jquery中元素属性的操作

<input type=”text” name=”username” class=”apple” value=”linken” id=”student” weather=”晴朗”/>

① 获得属性值得信息：

var it = document.getElementById(‘student’);

it.value //节点对象.属性名称 该方式获得的属性都是w3c规定的属性

it.getAttribute(‘属性名称’); //可以获得元素节点的全部属性(不受规定限制)

②设置属性信息

it.属性名称= 值; //该方式设置属性的值收到w3c规定的限制

it.setAttribute(属性名称,值); //该方式设置属性的值信息不受规定限制

jquery对属性的操作：

$(选择器).attr(属性名称); //获取属性的信息

$(选择器).attr(属性名称，值); //设置属性的信息

$(选择器).attr(json对象); //同时修改多个属性

$(选择器).removeAttr(属性名称); //删除指定的属性

$(选择器).attr(属性名称, fn函数);
//通过函数的返回值给属性设置信息

属性操作快捷方法—class类操作



<div class=”apple”></div>

$(选择器).attr(“class”,’值’); ------------类似------->addClass();

$(选择器).removeAttr(‘class’); ----------类似-------->removeClass();

如果操作单一的属性值，以上两种方式都可以

如果操作多个属性值，以上两种方法使用有差异

前者每次只可以设置一个属性值，删除的时候要把全部class都删除

后者可以把多个属性值全部作用到一个元素节点上，删除的时候也可以删除其中的指定属性值。

text() 和 html()的区别：

① 如果两者操作的目标内部没有html标签，则效果一致

<div>this is book</div>

$(选择器).html(文本内容,没有html标签)

$(选择器).text(文本内容,没有html标签)

② 操作的目标有html标签内容,两种使用有区别

<div><span>this</span> is book</div>

$(‘div’).html()--------------> <span>this</span> is book

$(‘div’).text()----------------> this is book

$(“div”).html(“<a>百度</a>”)-----------> <div><a>百度</a></div>

$(“div”).text(“<a>百度</a>”);------------> <>会被转为实体符号（<div><a>百度</a></div> ）