jQuery学习笔记—— .addClass()/.removeClass()/.toggleClass()

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

在平时的页面交互制作中,我们常常要使用jQueryjavaScript来动态改变页面中某个或部分元素的样式,为了实现这样的功能,我们往往都是使用jQueryjavaScript来控制HTMLDOM的类名(class)从而实现增加或删除某一样式,今天我们所要看得是如何使用jQuery来实现这个功能。在jQuery中提供了三种方法来实现这样的效果:.addClass()方法.removeClass()方法.toggleClass()方法。下面我们主要看他们是如何实现这样的功能以及他们之间的区别。

一、addClass()——添加className

jQuery中的.addClass()方法主要是用来给选定的Dom元素添加一个或多个指定的类名,他有两种方法实现:

					$("selector").addClass("className");
				

也可以同时给元素添加多个类名,同时添加多个类名时,他们之间需要用空格隔开:

					$("selector").addClass("className1 className2");
				

上面说是第一种方法给指定的元素添加类名,我们还可以使用函数的方法来给指定的元素添加类名:

					$("selector").addClass(function(index,class){});
				

这种方法城要注意一点,此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。更详细的使用可以点击这里

我们来看一个简单的例子:

HTML Code:

					<p id="myElement">test</p>
				

jQuery Code:

					$(document).ready(function(){
						$("#myElement").click(function(){
							$(this).addClass("myClassName");
						});
					});
				

上在代码表示的是:当在p#myElement上单击后,会给这个段落p元素加上一个"myClassName"的类名。

二、removeClass——移除className

jQuery中的.removeClass()方法和前面的.addClass()方法刚好是相反的,.removeClass()主要是用来给选定的DOM元素移除一个或多个指定的类名。他同样有两种方法:

					$("selector").removeClass("className");
				

也可以同时移除多个指定的类名:

					$("selector").removeClass("className1 className2");
				

这里有一点需要特别注意:如果.removeClass()中没有带任何参数,表示的是把指定元素中的所有类名移除。

					$("selector").removeClass();//这种方法将移除选择定元素的所有类名
				

.removeClass()方法像.addClass()方法一样,可以使用函数的形式:

				 	$("selector").removeClass(function(index,class){});//此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
				 

有关于removeClass()更详细的介绍可以点击这里,下在我们一起来看一个简单的实例:

HTML Code:

					<p id="myElement" class="myClassName">test</p>
				

jQuery Code:

					$(document).ready(function(){
						$("#myElement").click(function(){
							$(this).removeClass("myClassName");
						});
					});
				

上面代码表示是:单击段落p#myElement元素后,其类名myClassName将会被移除。

三、toggleClass——添加或者移除className

前面的addClass()和removeClass()分别只能添加和者移除className,但是这个toggleClass()方法却不同,如果元素有这个类名,它将补移除;反之,如果元素没有这个类名,那么将加上这个类名。我们来看看其实现的几种方法:

					$("selector").toggleClass("className")
				

上面表示的是:如果元素selector存在类名className时,将删除禾className;反之如果元素selector不存在className类名,将增加className类名。看个实例:

					$("#foo li").click(function() {
					    $(this).toggleClass("active");
					});
				

点击ul#foo中的li元素后,如果被点击的li元素中包含了"active"则删除“active”,反之没有将增加"active"。接下来看第二种实现方法

					$("selector").toggleClass(class, switch);//其中class为要切换的类名,switch是boolean值,用来决定是否切换class.
				

上在所表示的意思是:当switch为真时就给选定的元素增加class类名,如果switch为假时就移除选定的元素的类名。我们一起来看jQuery API的一个实例,在p元素上点击三次加上一个高亮的背景:

HTML Code:

					<div class="demo2">
						<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
						<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
						<p class="blue">on these (<span>clicks: 0</span>)</p>
						<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
					</div>
				

CSS Code:

					.blue {color: blue;}

					.highlight {
						background-color: orange;
					}
				

jQuery Code:

					var count = 0;
					$(".demo2 p").each(function(){
						var $thisParagraph = $(this);
						var count = 0;
						$thisParagraph.click(function(){
							count++;
							$thisParagraph.find("span").text("clicks:" + count);
							$thisParagraph.toggleClass("highlight", count%3 == 0);
						});
					});
				

上在代码表示的是在段落p元素上点击三次就会加上“highlight”样式,换句话说是点击的次数是3的掊九时,段落会加上"highlight"高亮背景。我们这里是通过表达式“count%/3==0”来进行判断元素是否需要切换"highlight"样式。

toggleClass除了上面两种方法之外,还有一种就是通过function来实现

					$("selector").toggleClass(function(index, class), [switch])
					//其中function(index,class)是一个function:返回class名的一个函数,接受两个参数,index为元素在集合中的索引位置,class为原先元素的class值。
					// 而switch是一个boolean值,用于决定元素是否包含class的布尔值。
				

如果开关switch参数为true则加上对应的class,否则就删除。如:

HTML Code

					<div id="testToggleClass">
						<p>test</p>
					</div>
				

CSS Code

					.happy {background-color:green;}
					.sad {background-color: #000;color: #fff;}
				

jQuery Code:

					$("#testToggleClass p").toggleClass(function(){
						if($(this).parent().hasClass("blue")){
							return "happy";
						} else {
							return "sad";
						}
					});
				

toggleClass()方法和addClass()方法一样,可以同时加多个或同时移除多个类名,不过他们之间需要用空格隔开,如:

					$("selector").toggleClass("className1 className2");
					//上面表达式等于
					$("selector").toggleClass("className1").toggleClass("className2");
				

无参数时,自动删除、恢复全部class,也可以传递一个布尔值,true为恢复class,false为删除class 也可以第一个参数为class名,第二个参数为布尔值,具体用法如下:

HTML Code:

					<div class=”a b c”>test toggleClass("a b c")</div>
				

CSS Code:

					.a{background-color: blue;}
					.b{background-color:green;}
					.c{background-color:orange;}
				

jQuery Code:

					$("div").toggleClass(); //点击第一次时: <div class=””>test toggleClass("a b c")</div>
					$("div").toggleClass(); //点击第二次时:<div class=”a b c”>test toggleClass("a b c")</div>
					$("div").toggleClass( false ); //点击第一次时:<div class=””>test toggleClass("a b c")</div>后面点击也是一样的
					$("div").toggleClass( true );  //点击第一次时<div class=”a b c”>test toggleClass("a b c")</div>
					// 删除、恢复多个 class
					$("div").toggleClass( “a b” ); //点击第一次时<div class=”c”>test toggleClass("a b c")</div>
					$("div").toggleClass( “a c” ); //点击第一次时:<div class=”b”>test toggleClass("a b c")</div>
					$("div").toggleClass( “a b c”, false ); //点击第一次时: <div class=””>test toggleClass("a b c")</div>
					$("div").toggleClass( “a b c”, true );  //点击第一次时:<div class=”a b c”>test toggleClass("a b c")</div>
				

其实toggleClass()方法就类似于这样的,如:

					$("selector").toggleClass("className");
					等同于
					if($("selector").hasClass("className")){
						$(this).removeClass("className");
					} else {
						$(this).addClass("className");
					}
					也等同于
					$("selector").hasClass('className') ? $("selector").removeClass('className') : $("selector").addClass('className');
				

有关于toggleClass()方法更多的介绍大家可以点这里,或者查看这里的demo

上在简单的介绍了这几种方法的使用,最后总结一下:jQuery中有三种方法能元素的类进行操作,这三种方法分别是:.addClass(),.removeClass(),.toggleClass()。这三种方法共同点都是能对元素的类进行操作,那么他们不同之处是:

  1. .addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式;
  2. .removeClass("className")方法是用来给指定的元素移除类名,也就是说给指定元素移除样式;
  3. .toggleClass("className")方法是用来给脂定的元素增加或移除类名(如果元素的类名存在就移除,如果不存在就增加),也就是说用来给指定的元素进行样式切换(如果元素存在样式则去掉,如果不存在则加上样式)。

jQuery中还有几种对样式的操作,比如说:获取样式attr("class")和设置样式attr("class","myclass");另外可以通过.hasClass("className").is("className")判断指定的元素是否存在样式。大这相了解更详细的话可以点击:attr和前在介绍的《JQuery学习笔记—— .Is() VS .HasClass()》。

那么有关于addClass,removeClass,toggleClass的介绍就说到这里了,刚学习jQuery,如果有不对之处,烦请大家指点。谢谢。

如需转载烦请注明出处:W3CPLUS

Nike Unveil a Dip Dye-Inspired Air VaporMax Plus

如需转载,烦请注明出处:https://www.w3cplus.com/blog/117.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部