一.节点操作
1.DOM内容节点操作:
①innerHTML属性:设置或获取文本的内容(普通文本和标签)。
②innerText属性:设置或获取文本的内容(普通文本),存在兼容性问题。
2.jQuery内容节点属性:
①html([value])方法:设置或获取文本内容(普通文本和标签)。
②text([value])方法:设置或获取文本的内容(普通文本),不存在兼容性问题。
二.jQuery属性操作
1.DOM的value属性
value属性:设置或获取表单元素(表单域和表单按钮)的默认值。
2.jQuery的val([value])方法
val([value])方法设置或获取表单元素(表单域和表单按钮)的默认值。
注:DOM中常用属性值来操作,而jQuery常用方法来操作。
3.DOM属性节点操作和jQuery属性节点操作的区别
1)DOM属性节点操作
①把元素节点当做普通js对象来操作属性(点语法和中括号法)
缺点:无法操作class属性
②使用DOM提供的方法来操作
getAttribute("属性名")
setAttribute("属性名","属性值")
hasAttribute("属性名")
removeAttribute("属性名")
③使用className来操作
注:采用的是覆盖操作
2)jQuery属性节点操作
①采用attr()方法来操作属性
注:可以操作固有属性,也可以操作自定义属性。
a.获取属性
语法:attr("属性名")
b.设置单个属性
语法:attr("属性名","属性值");
c.设置多个属性
语法:attr({
"属性名1":"属性值1",
"属性名2":"属性值2",
...
});
d.删除属性
语法:removeAttr("属性名")
②采用prop()方法来操作属性
注:主要用于操作固有属性,操作checked、selected和disabled属性,一定要有
prop()方法,不能用attr()方法。
a.获取属性
语法:prop("属性名")
作用:当属性名为:checked、selected时,如果选中状态时则返回true,则否
返回false,当属性名为:disabled时,当禁用状态时返回true,否则返回false
b.设置属性
语法:prop("属性名","属性值")
作用:当属性名为:checked、selected时,设置的属性值如果为true,代表选
中,否则代表没选中;当属性值为disable时,设置的属性值如果为true,代表
禁用否则代表取消禁用。
注:如果属性值为boolean类型,那么可以不用双引号或单引号包裹。
c.删除属性
语法:removeProp("属性名")
注:使用DOM或jQuery提供的方法来操作表单属性,操作完毕之后在标签上面
不会有任何展示,使用DOM或jQuery所做的任何操作,都是在内存中做的操作。
③专门为class属性提供的操作方法
a.添加class属性
语法:addClass("class属性值");
注:jQuery提供添加class的方法做的是追加操作。
b.判断是否存在某个class属性值(返回的是Boolean类型值)
语法:hasClass("class属性值");
c.删除class属性
语法:removeClass(["class属性值"]);
注:如果没有参数,则代表删除所有的class属性值,
如果有参数,代表删除指定的class属性值
d.切换class属性
语法:toggleClass("class属性值");
注:如果标签中对应的“class属性值”存在,则删除
如果标签中对应的“class属性值”不存在,则添加