jQuery属性操作(一)
下载了jQuery的UI组件,发现内容还挺多的,还是决定先把jQuery的源码看完一遍之后再涉足UI组件。考虑到队列和动画使用较少,特别是动画,基本开始使用css3完成。因此暂时略过,开始看jQuery对属性操作的处理。该部分大约500行代码,预计一周看完。
jQuery提供的属性操作方法有两种
1、挂载到jQuery对象上
// 获取或设置属性值。当参数只有name时,获取jQuery集合中的第一个元素的name属性的值。
// name和value都有时,为jQuery集合中的所有元素增加name属性,value为值的属性
$(elem).attr(name, [value]);
// 删除jQuery集合中所有元素上的name属性
$(elem).removeAttr(name);
// 获取或设置属性值。当参数只有name时,获取jQuery集合中的第一个元素的name属性的值。
// name和value都有时,为jQuery集合中的所有元素增加name属性,value为值的属性
// 同attr的区别是当属性为checked等属性时,attr返回“checked”字符串,而prop返回true布尔值
$(elem).prop(name, value);
// 删除jQuery集合中所有元素上的name属性
$(elem).removeProp(name);
// 为jQuery集合中每个元素添加class
$(elem).addClass(value);
// 删除class,当有value参数时,删除jQuery集合中所有元素的为value的class,如果没有参数,则删除jQuery集合中所有元素的所有class
$(elem).removeClass([value]);
// 交替添加或删除class。当只有value参数时,有这个class就删除,没有就添加
// 如果有两个参数时,第二个参数如果为true,则添加class,否则删除class
$(elem).toggleClass(value, [stateVal]);
// 判断元素上是否有某个class
$(elem).hasClass(selector);
// 得到或者获取元素的值(一般是表单元素),当有value参数时,为jQuery集合中每个元素设置value
// 如果没有传入参数。则得到jQuery集合中第一个元素的值
$(elem).val(value);
2、挂载在$上的属性和方法。(主要为第一种方法提供兼容性上的处理)
$.valHooks 属性
$.attr()
$.removeAttr()
$.attrHooks 属性
$.propFix 属性
$.prop()
$.propHooks 属性
因为挂载到$上的方法提供基础处理,所以先看下挂载到$上的方法和属性
jQuery.extend({
valHooks: {
option: {
// 处理获取option的value时,不同浏览器的兼容性(原生不熟悉,并不了解为什么做这样的处理)
get: function( elem ) {
var val = elem.attributes.value;
return !val || val.specified ? elem.value : elem.text;
}
},
},
attr: function( elem, name, value ) {},
removeAttr: function( elem, value ) {},
attrHooks: {},
propFix: {},
prop: function( elem, name, value ) {},
propHooks: {}
});