jQuery 操作属性和属性节点

一、什么是属性节点

1. 什么是属性？
  对象身上保存的变量就是属性

2. 如何操作属性？
  赋值：
    对象.属性名 = 属性值;
  获取：
    对象.属性名;
    对象[“属性名”]

3.1 什么是属性节点？
  编写HTML代码时，在标签中添加的属性就是属性节点

3.2 下图显示如何在浏览器中找到属性节点：
  1. 在浏览器中找到的DOM元素，展开看到的都是属性
  2. 在attributes属性中展开的所有内容都是属性节点
  3. 只有DOM元素才有属性节点

4. 如何操作属性节点？
  1. 获取属性节点的值：
    DOM元素.getAttribute(“属性名称”);
  1. 设置属性节点的值：
    DOM元素.setAttribute(“属性名称”,“属性值”);

5. 属性和属性节点有什么区别？
  1. 任何对象都有属性
  2. 只有DOM对象才有属性节点

二、attr() 方法

$("span").attr("name");
//如果找到多个元素，只返回第一个元素指定的属性节点的值

$("span").attr("name","hhh");
//如果找到多个元素，则每一个元素的属性节点的值都会改变

$("span").attr({name:'hhhjj',demo:'sss'});
//使用这种写法可以同时操作多个属性节点

作用：获取或设置属性节点的值
接受参数：
  接收一个参数：用来获取属性节点的值
  接收两个参数：用来设置属性节点的值
  接收{key:‘value’,key:‘value’}：同时设置多个属性节点的值
注意点：
  获取：
    如果找到多个元素，则只返回第一个元素指定的属性节点的值
  设置：
    如果找到多个元素，则每一个元素的属性节点的值都会改变
    如果设置的属性节点不存在，则会在每一个找到的元素下新增该属性节点

三、prop() 方法

$("span").prop("demo","ddd");
//如果找到多个元素，则每一个元素的demo属性的值都会改变

$("span").eq(0).prop("demo","ddd");
//$("span")找到所有的span元素，eq(0)找到第一个span元素

$("span").prop("name");
//如果找到多个元素，只返回第一个元素指定的属性节点的值

$("span").prop({name:'hhhjj',demo:'sss'});
//使用这种写法可以同时操作多个属性节点

作用：获取或设置属性的值
接受参数：
  接收一个参数：用来获取属性的值
  接收两个参数：用来设置属性的值
  接收{key:‘value’,key:‘value’}：同时设置多个属性的值
注意点：
  获取：
    如果找到多个元素，则只返回第一个元素指定的属性的值
  设置：
    如果找到多个元素，则每一个元素的属性的值都会改变
    如果设置的属性不存在，则会在每一个找到的元素下新增该属性

四、removeAttr() 方法 和 removeProp() 方法

$("span").removeAttr("name");
//删除一个属性节点

$("span").removeAttr("name id");
//删除多个属性节点，字符串中用空格隔开

removeAttr() 作用：删除所有匹配到的元素指定的属性节点
removeProp() 作用：删除所有匹配到的元素指定的属性

补充：
  prop() 方法不仅可以操作属性，也可以操作属性节点，官方推荐在操作具有 true/false 的属性节点时，如 checked,selected 或者 disabled 使用 prop()，其他使用 attr()

console.log($("input").prop("checked")); // true/false
console.log($("input").attr("checked")); // checked/undefind