5.1.2 Class
prk/彭仁夔 2008-08-22
在开发过程中,对元素的class进行操作是经常的事情,如为元素增加一个class或删除一个class或对一个class进行toggle操作。Jquery提供了三个方法addClass、removeClass、toggleClass用来完成对class的操作。
// 一组对元素attr,class等进行操作的函数
jQuery.each( {
addClass : function(classNames) {// 为元素增加一些classNames
jQuery.className.add(this, classNames);
},
removeClass : function(classNames) {// 除去元素的一些classNames
jQuery.className.remove(this, classNames);
},
toggleClass : function(classNames) {// 开关该class,
jQuery.className[jQuery.className.has(this, classNames)
? "remove" : "add"](this, classNames);
},
}, function(name, fn) {
jQuery.fn[name] = function() {
return this.each(fn, arguments);
};
});
上面的代码简单,它们调用jQuery. className中的add或remove方法:
// 一组内部使用的Class操作函数
className : {
// 为元素增加classNameS
add : function(elem, classNames) {// 多个className,空格分开
jQuery.each((classNames || "").split(/\s+/),
function(i, className) {
if (elem.nodeType == 1
&& !jQuery.className.has(elem.className,className))
elem.className += (elem.className ? " " : "") + className;
});
},
// 为元素除去classNames
remove : function(elem, classNames) {
if (elem.nodeType == 1)// 元素
elem.className = classNames != undefined ? jQuery.grep(
elem.className.split(/\s+/), function(className) {// 过滤
return !jQuery.className.has(classNames,className);
}).join(" ") : "";
},
// 元素有没有className?
has : function(elem, className) {
return jQuery.inArray(className, (elem.className || elem)
.toString().split(/\s+/)) > -1;
}
},
jQuery.className.has方法先把elem.className分成多个class(如果有多个的话),再判断参数className在数组中的位置来判断元素是否包含指定的class。jQuery.className.add先判断元素是不是含有指定的class,没有话就追加。jQuery.className.remove 正好相反。
Jquery还提供了一个hasClass用来判断其集合的元素是否含有指定的class,如果有一个含有的话,就返回true。
/ 检查当前的元素是否含有某个特定的类,如果有,则返回true
hasClass : function(selector) {
return this.is("." + selector);
},