jquery class

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);
	},

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值