jQuery学习笔记(三)元素处理

上一篇是DOM操作，也就是处理元素和元素之间的关系，本篇则是元素处理，关注元素的属性，样式以及内容的处理。

1.元素属性处理，分两组：

(1)元素字面属性，即我们在html中看到的元素属性处理

a.获取字面属性——attr(name)，该方法只能获得jQuery对象中第一个元素的字面属性值，如果需要元素集中所有元素的字面属性，可以配合each方法使用。

b.设置字面属性——attr(name,value)，attr(name,function)，attr(map)

c.删除字面属性——removeAttr

(2)元素对象属性，即HTMLElement对象定义的属性

a.获取对象属性——prop(name)，该方法只能获得jQuery对象中第一个元素的对象属性值，如果需要元素集中所有元素的对象属性，可以配合each方法使用。

b.设置对象属性——prop(name,value)，prop(name,function)，prop(map)

c.删除对象属性——removeProp

2.元素class属性处理，间接改变元素的样式

(1)判断jQuery元素集中至少有一个元素有某个class属性——has(name)

(2)为jQuery对象添加class——addClass(name)，addClass(function)

(3)为jQuery对象删除class——removeClass(name)，removeClass(function)

(4)切换class属性，即有该class，调用方法会删除该class，若没有该class，调用方法则添加class——toggleClass(boolean)，toggleClass(name)，toggleClass(name,boolean)，toggleClass(function,boolean)，其中boolean值用来确定是否是单向触发，为true，只做添加动作，为false，只做删除动作。

3.元素css样式处理，实际操作的就是元素的style属性

(1)获取css样式——css(name)，css(name[])，数组方式可以获取多个样式

(2)设置css样式——css(name,value)，css(map)，css(name,function)

(3)一些便捷方法——height，innerHeight，outerHeight，width，innerWidth，outerWidth，offset，position，scrollLeft，scrollTop

4.处理元素内容

(1)获取元素内容——text()和html()，text返回文本内容，html返回HTML内容

(2)设置元素内容——text(value)(或text(function))和html(value)(或html(function))，同样，text设置文本内容，html设置HTML内容。

5.处理表单元素值(input的value等)

(1)获取——val()，只能获取元素集中第一个元素的表单元素值，可配合each获取所有元素值。

(2)设置——val(value)，设置元素集中所有元素的表单元素值。

(3)val(function)可以在回调函数中动态获取或设置表单元素值

6.处理元素关联数据

(1)获取关联数据——data()，data(key)

(2)设置关联数据——data(key,value)，data(map)

(3)删除关联数据——removeData()，removeData(key)