- 在开发过程中,对元素的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);
- },