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);
},
分享到:
相关推荐
Classie 是一个轻量级的脚本,可以让你很容易地添加、移除、切换和检查 DOM 中的类。 标签:Classie
jquery点击改变class并toggle
如果使用a标签跳转到指定的div区域,则只需要把a标签的href属性设置为“#divId”就好了,比如: 跳转到div 这里是被跳转的区域 ...以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的
考虑Web可访问性的JQuery插件创建过程课堂上要讲的内容创建jQuery自定义伪类选择器(面向更改) jQuery方法覆盖jQuery skipNav,navigationMenu插件制作jQuery.expr.pseudos扩展Sizzle引擎扩展自定义虚拟选择器的新...
jquery-scrollAddclass是一款可以在页面滚动时为元素动态添加class类的jquery插件。你可以定制自己的class类,使元素在进入视口时产生指定的动画效果。
主要介绍了jquery采用oop模式class类的使用方法,结合实例形式分析了jQuery模拟oop模式定义class类与方法的技巧,需要的朋友可以参考下
jquery检测屏幕宽度并自动添加class
class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的... 用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass(), removeClass(), toggleClass()等方法来完成. addClass()
主要介绍了jQuery使用removeClass方法删除元素指定Class的方法,可实现针对指定元素样式的批量删除功能,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了jquery中each方法使用及常用选择器都有哪些,需要的朋友,可以参考下
$(.class1, .class2, #id1)在以上的例子中,将会选择含有类名为class1,和class2及id为1的所有元素。 Jquery实例: 在以下的例子中,有类名为p1和类名为p2 和id 为div3 的所有元素将会动态的添加一个红色的边框。 ...
2.1 jQuery 核心函数 17 2.1.1 jQuery(expression, [context]) 17 2.1.2 jQuery(html, [ownerDocument]) 18 2.1.3 jQuery(html, props) 19 2.1.4 jQuery(elements) 20 2.1.5 jQuery() 20 2.1.6 jQuery(callback) 21 ...
本文实例讲述了jQuery针对input的class属性写了多个值情况下的选择方法。分享给大家供大家参考,具体如下: jQuery选择input的class属性写了多个值的情况: <html> <head> <meta ...
jQuery.tabbable 选择下一个/上一个“可粘贴”元素的简单实用程序。 包括并使用jQuery UI Core中的':tabbable'和':focusable'选择器。 演示版 查看。 方法 jQuery.tabbable添加以下方法。 // Focuses the next ...
包括特效(Effect) , 显示(Show) , 隐藏(Hide) , 切换(Toggle) , 添加 Class(Add Class) , 移除 Class(Remove Class) , 切换 Class(Toggle Class) , 转换 Class(Switch Class) , 颜色动画(Color ...
主要介绍了jQuery实现判断控件是否显示的方法,涉及jQuery针对页面元素属性相关操作技巧,需要的朋友可以参考下
jquery.scrollAnimations是一款页面滚动时动态为元素添加class的jQuery插件。它结合animate.css来使用,可以为元素进入浏览器视口时添加炫酷的动画特效。
jquery validate用于前台验证,里面的remote异步验证,jquery.metadata.js加载后可以直接在控件旁写class{}
jQuery制作文章段落更改背景颜色属性jquery toggleClass()属性。文中给大家附实例代码和源码,感兴趣的朋友参考下吧
jQuery帮助文档 查询非常方便 jQuery 核心函数 jQuery(expr, [context]) jQuery(html, [ownerDoc]) jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector context ...