js给标签添加属性和值

一.节点操作

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属性值”不存在，则添加