EducoderjQuery DOM操作 第1关：jQuery获取内容和属性

任务描述

本关任务：用jQuery获取元素的内容和属性。效果如下：

相关知识

为了完成本关任务，你需要掌握：1.获取元素的内容，2.获取元素的属性。

获取元素的内容

基本的html结构如下：

1. <p><srtong>我是 srtong 标签</strong>我是文本内容</p>

如何获取p标签的内容呢？这里有两种方法，要注意区分，代码如下：

1. $("p").text();
2. $("p").html();

效果图如下：

可以看出：

• text()是获取所选元素的文本内容，html 标签的内容已经转化；

• html()是获取所选元素的内容，包括 html 标签。

基本的html结构如下：

1. <input type="text" placeholder="Educoder平台"/>
2. <p></p>

如何获取input标签的value值呢？这里有一个专门获取表单value值的方法val()，代码如下：

1. var val = $("input").val(); //获取表单的 value 值
2. $("p").text(val);

效果如下：

获取元素的属性

基本的html结构如下：

1. <div class="box" id="wrap" name="容器" data-count="none">
2. </div>

如何获取该div的各种属性呢？这里用attr()，代码如下：

1. console.log($(".box").attr("class"));
2. console.log($(".box").attr("id"));
3. console.log($(".box").attr("name"));
4. console.log($(".box").attr("data-count"));

效果图如下：