辛苦堆砌,转载请注明出处,谢谢!
上一篇是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)