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功能进行动态切换。 首先,我们需要了解jQuery的选择器,它是jQuery库的核心特性之一,用于找到页面中的特定元素。例如,我们可以使用`$("#...
$(.class1, .class2, #id1)在以上的例子中,将会选择含有类名为class1,和class2及id为1的所有元素。 Jquery实例: 在以下的例子中,有类名为p1和类名为p2 和id 为div3 的所有元素将会动态的添加一个红色的边框。 ...
`jQuery-scrollAddclass` 插件正是为此而设计,它允许开发者在元素进入浏览器视口时为其添加预设的class,从而实现丰富的视觉效果。 ### 插件安装与引入 在使用`jQuery-scrollAddclass`之前,你需要确保已经引入了...
如果使用a标签跳转到指定的div区域,则只需要把a标签的href属性设置为“#divId”就好了,比如: 跳转到div 这里是被跳转的区域 ...以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的
在HTML中,我们通过class属性为元素指定一个或多个类名,类名可以用来应用CSS样式,也可以被JavaScript或jQuery用来选取元素。例如,我们给一个段落元素添加class="important",就可以针对这个类编写CSS样式来定义...
考虑Web可访问性的JQuery插件创建过程课堂上要讲的内容创建jQuery自定义伪类选择器(面向更改) jQuery方法覆盖jQuery skipNav,navigationMenu插件制作jQuery.expr.pseudos扩展Sizzle引擎扩展自定义虚拟选择器的新...
通过本次实例分析,我们会具体探讨如何使用jQuery的hide()方法来隐藏具有特定class样式的元素。我们首先需要引入jQuery库,然后使用jQuery的选择器和hide()方法来实现隐藏功能。在上述提供的代码中,我们通过点击一...
标题 "通过Jquery和yclass获取服务器时间" 涉及到的是在Web开发中如何利用JavaScript库JQuery和一个名为yclass的工具来获取服务器的实时时间。在这个过程中,我们将探讨这两个工具的基本功能,以及如何结合它们实现...
在本示例中,OOP模式类(class)的使用展示了如何将jQuery函数和方法组织成类的形式,以类的方式管理和调用,这使得代码的可读性和维护性得到了显著提升。 在介绍jQuery采用OOP模式class类的使用方法时,通常会结合...
class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的... 用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass(), removeClass(), toggleClass()等方法来完成. addClass()
1. **选择器**: jQuery的选择器允许你高效地选取DOM元素,如`$("#id")`选取ID为指定值的元素,`$(".class")`选取所有class为指定值的元素,`$("tag")`选取所有特定类型的元素。 2. **DOM操作**: jQuery提供了简便的...
例如,`$("#id")` 选取ID为"id"的元素,`$(".class")` 选取所有class为"class"的元素,`$("tagname")` 选取所有tagname类型的元素。更复杂的组合选择器如`:first`, `:last`, `:even`, `:odd`, `:gt(index)`, `:lt...
6. jQuery Class:类系统是面向对象编程的基础,jQuery Class提供了基于原型的类创建机制,支持继承和混合,方便构建复杂的对象结构。 7. jQuery Model List:这是一个数据集合类,可以用于管理一组相关的模型实例...
1. **选择器**:jQuery提供了丰富的CSS选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`用于选取具有特定类的元素,`$("tagname")`则用于选取所有指定标签名的元素。 2. **DOM操作**:`$(selector)....
选择器是jQuery的精髓,它极大地简化了CSS选择器的使用,如`$("#id")`用于选取ID为`id`的元素,`$(".class")`用于选取所有class为`class`的元素。DOM操作则允许我们方便地添加、删除和修改元素,如`$(element).html...
1. **DOM操作**:jQuery 提供了一套丰富的选择器,可以方便地选取DOM元素,如$("#id")用于选取ID为id的元素,$(".class")用于选取所有class为class的元素。此外,它还提供了链式操作,如$("#element").addClass(...
例如,`$("#id")` 选择ID为指定值的元素,`$(".class")` 选择所有具有特定类名的元素,而`$("tagname")` 则选择所有指定标签的元素。jQuery对象提供了许多方法,如 `.html()` 用于获取或设置元素的HTML内容,`.css()...
例如,`$("#id")`选择ID为id的元素,`$(".class")`选择所有class为class的元素。 2. **DOM操作**:jQuery提供了简便的API来操作DOM,如`.append()`用于在元素末尾添加内容,`.prepend()`在元素开头添加内容,`.html...
- **选择器**:使用CSS选择器,如`$("#id")`,`.class`,`[attribute=value]`等,可以方便地选取DOM元素。 - **DOM操作**:`append()`, `prepend()`, `before()`, `after()`, `html()`, `text()`, `val()`等方法用于...