`
jljlpch
  • 浏览: 323970 次
  • 性别: Icon_minigender_1
  • 来自: 南昌
社区版块
存档分类
最新评论

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

 

分享到:
评论

相关推荐

    jQuery类辅助函数Classie.zip

    Classie 是一个轻量级的脚本,可以让你很容易地添加、移除、切换和检查 DOM 中的类。 标签:Classie

    jquery点击改变class并toggle

    本文将详细讲解如何使用jQuery实现点击事件改变元素的class,并结合toggle功能进行动态切换。 首先,我们需要了解jQuery的选择器,它是jQuery库的核心特性之一,用于找到页面中的特定元素。例如,我们可以使用`$("#...

    jQuery根据ID、CLASS、等获取对象的实例

    $(.class1, .class2, #id1)在以上的例子中,将会选择含有类名为class1,和class2及id为1的所有元素。 Jquery实例: 在以下的例子中,有类名为p1和类名为p2 和id 为div3 的所有元素将会动态的添加一个红色的边框。 ...

    页面滚动时为元素动态添加class类的jquery插件

    `jQuery-scrollAddclass` 插件正是为此而设计,它允许开发者在元素进入浏览器视口时为其添加预设的class,从而实现丰富的视觉效果。 ### 插件安装与引入 在使用`jQuery-scrollAddclass`之前,你需要确保已经引入了...

    a标签跳转到指定div,jquery添加和移除class属性的实现方法

    如果使用a标签跳转到指定的div区域,则只需要把a标签的href属性设置为“#divId”就好了,比如: 跳转到div 这里是被跳转的区域 ...以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的

    jQuery使用removeClass方法删除元素指定Class的方法

    在HTML中,我们通过class属性为元素指定一个或多个类名,类名可以用来应用CSS样式,也可以被JavaScript或jQuery用来选取元素。例如,我们给一个段落元素添加class="important",就可以针对这个类编写CSS样式来定义...

    jQuery-Class:JQuery学习的学习空间

    考虑Web可访问性的JQuery插件创建过程课堂上要讲的内容创建jQuery自定义伪类选择器(面向更改) jQuery方法覆盖jQuery skipNav,navigationMenu插件制作jQuery.expr.pseudos扩展Sizzle引擎扩展自定义虚拟选择器的新...

    jQuery使用hide方法隐藏指定元素class样式用法实例

    通过本次实例分析,我们会具体探讨如何使用jQuery的hide()方法来隐藏具有特定class样式的元素。我们首先需要引入jQuery库,然后使用jQuery的选择器和hide()方法来实现隐藏功能。在上述提供的代码中,我们通过点击一...

    通过Jquery和yclass获取服务器时间

    标题 "通过Jquery和yclass获取服务器时间" 涉及到的是在Web开发中如何利用JavaScript库JQuery和一个名为yclass的工具来获取服务器的实时时间。在这个过程中,我们将探讨这两个工具的基本功能,以及如何结合它们实现...

    jquery采用oop模式class类的使用示例

    在本示例中,OOP模式类(class)的使用展示了如何将jQuery函数和方法组织成类的形式,以类的方式管理和调用,这使得代码的可读性和维护性得到了显著提升。 在介绍jQuery采用OOP模式class类的使用方法时,通常会结合...

    jQuery修改class属性和CSS样式整理

    class属性修改  类属性即class属性,规定类名.  用类选择器规定样式的... 用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass(), removeClass(), toggleClass()等方法来完成. addClass()

    jquery手册(jquery.cuishifeng.cn网页版)2

    1. **选择器**: jQuery的选择器允许你高效地选取DOM元素,如`$("#id")`选取ID为指定值的元素,`$(".class")`选取所有class为指定值的元素,`$("tag")`选取所有特定类型的元素。 2. **DOM操作**: jQuery提供了简便的...

    Jquery演示 jquerydemo jquery常用

    例如,`$("#id")` 选取ID为"id"的元素,`$(".class")` 选取所有class为"class"的元素,`$("tagname")` 选取所有tagname类型的元素。更复杂的组合选择器如`:first`, `:last`, `:even`, `:odd`, `:gt(index)`, `:lt...

    jsmvc-api.docx

    6. jQuery Class:类系统是面向对象编程的基础,jQuery Class提供了基于原型的类创建机制,支持继承和混合,方便构建复杂的对象结构。 7. jQuery Model List:这是一个数据集合类,可以用于管理一组相关的模型实例...

    jQuery1.12.4+jQuery中文手册.rar

    1. **选择器**:jQuery提供了丰富的CSS选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`用于选取具有特定类的元素,`$("tagname")`则用于选取所有指定标签名的元素。 2. **DOM操作**:`$(selector)....

    jquery-1.12.4-jquery.min.js.zip

    1. **DOM操作**:jQuery 提供了一套丰富的选择器,可以方便地选取DOM元素,如$("#id")用于选取ID为id的元素,$(".class")用于选取所有class为class的元素。此外,它还提供了链式操作,如$("#element").addClass(...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    选择器是jQuery的精髓,它极大地简化了CSS选择器的使用,如`$("#id")`用于选取ID为`id`的元素,`$(".class")`用于选取所有class为`class`的元素。DOM操作则允许我们方便地添加、删除和修改元素,如`$(element).html...

    jquery例子大全 jquery demo

    例如,`$("#id")` 选择ID为指定值的元素,`$(".class")` 选择所有具有特定类名的元素,而`$("tagname")` 则选择所有指定标签的元素。jQuery对象提供了许多方法,如 `.html()` 用于获取或设置元素的HTML内容,`.css()...

    jquery-3.3.1Windows

    例如,`$("#id")`选择ID为id的元素,`$(".class")`选择所有class为class的元素。 2. **DOM操作**:jQuery提供了简便的API来操作DOM,如`.append()`用于在元素末尾添加内容,`.prepend()`在元素开头添加内容,`.html...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    `selector`可以是CSS选择器,如`$("#id")`选取ID为`id`的元素,`$(".class")`选取所有class为`class`的元素。 - `$(element).html()`:获取或设置元素的HTML内容。 - `$(element).append()`/`.prepend()`:在元素...

Global site tag (gtag.js) - Google Analytics