1. 什么是属性？什么是属性节点？
2. jQuery添加和移除属性节点
3. jQuery操作css类
4. jQuery操作文本值

1. 什么是属性？什么是属性节点？

1. 什么是属性？

• 对象身上保存的变量就是属性
• 在浏览器找到某个dom元素后(如一个div)，展开看到的都是它的属性

2. 如何操作属性？

- 对象.属性名称 = 值;
- 对象["属性名称"] = 值;

3. 什么是属性节点？

• 在编写HTML代码时，在HTML标签(dom元素)中添加的属性就是属性节点，如"class"、"id"、"name"
• dom元素中的attributes属性中包含的所有属性都是属性节点，如"class"、"id"、"name"

4. 如何操作属性节点？

// 上面操作属性的方法同样适用。此外还有以下方法
dom元素.setAttribute("属性名称", 值);
dom元素.getAttribute("属性名称");

5. 属性和属性节点有什么区别？
   任何对象都有属性，但只有dom对象才有属性节点

2. jQuery添加和移除属性节点

2.1 attr()

作用：获取或者设置属性节点
attr(属性节点名称, 值)

• 传递一个参数：获取属性节点的值
  无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
• 传递两个参数：设置属性节点的值
  找到多少个元素就设置多少个元素
  如果设置的属性节点不存在，会自动增加该属性

// 获取第一个span元素的class
$("span").attr("class");
// 设置所有span元素的class
$("span").attr("class", "box");
// 也可以传递一个对象
$("span").attr({class: "box", id: "box"});

2.2 removeAttr()

removeAttr(属性节点名称)

• 删除属性节点
  会删除所有找到元素的属性节点

// 删除所有span元素的class属性节点
$("span").removeAttr("class");
// 删除所有span元素的class和id属性节点
$("span").removeAttr("class id");

2.3 prop()

特点和attr方法一致

// 获取第一个span元素的class
$("span").prop("class");
// 设置所有span元素的class
$("span").prop("class", "box");
// 也可以传递一个对象
$("span").prop({class: "box", id: "box"});

2.4 removeProp()

特点和removeAttr一致

// 删除所有span元素的class属性节点
$("span").removeProp("class");
// 删除所有span元素的class和id属性节点
$("span").removeProp("class id");

2.5 prop和attr的区别

体现在某些属性节点返回值不同

$("input").prop("checked");  // 返回true或者false
$("input").attr("checked");  // 返回checked或者undefined

官方推荐在操作属性节点时，具有true和false两个取值的属性节点，如checked、selected或者disabled使用prop()，其它的使用attr()

3. jQuery操作css类

用途：给某些类写好css样式，通过给dom元素添加或者删除该类名，达到修改css样式的目的

3.1 addClass(类名)

作用：给指定的dom元素添加类名
如果要添加多个，多个类名之间用空格隔开即可

$("div").addClass("class1 class2");

3.2 removeClass(类名)

作用：给指定的dom元素删除类名
如果要删除多个，多个类名之间用空格隔开即可

$("div").removeClass("class1 class2");

3.3 toggleClass(类名)

作用：指定的dom元素无该类名则添加该类名，有该类名则删除该类名
如果要切换多个，多个类名之间用空格隔开即可

$("div").toggleClass("class1 class2");

4. jQuery操作文本值

4.1 html()

• 和原生js中的innerHTML一模一样
• 不填写参数，则获得指定dom元素的innerHTML
• 填写参数，则增加或修改指定dom元素的innerHTML

$("div").html();
$("div").html("<p>我是段落<span>我是span</span></p>");

4.2 text()

• 和原生js中的innerText一模一样
• 不填写参数，则获得指定dom元素的innerText
• 填写参数，则增加或修改指定dom元素的innerText

$("div").text();
$("div").text("我是div");

4.3 val()

• 和原生js中的value一模一样
• 不填写参数，则获得指定dom元素的value
• 填写参数，则增加或修改指定dom元素的value

$("input").val();
$("input").val("请输入内容");