jQuery中.addClass()和.removeClass()

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

jQuery.addClass()主要用来给匹配的元素增加一个类或多个类名(class名),需要注意的是这种方法只是给匹配的元素增加了类名,这里所说的增加就是在以前的基础上追加类名,新增加的类名并不会代替元素原有的类名。可以使用.addClass()给元素一次添加一个或多个类,如果添加多个类名时,需要在类名之间用空格隔开。如:

   $("element").addClass("yourClassName1 yourClassName2 yourClassNameN");

jQuery中与.addClass()方法相匹配使用的有一个叫.removeClass()方法。这个.removeClass()方法刚好与.addClass()方法相反。.removeClass()方法主要是在匹配的元素中删除一个或多个类。在.removeClass()中有一点需要特别注意,如果在.removeClass()中指定了类名,那么将在元素中删除相对应的类名,如果没有指定任何参数时,.removeClass()将删除元素中所有的类,如:

  //删除指定的类名
  $("elements").removeClass("yourClassName1 yourClassName2 yourClassNameN");
  //删除匹配元素中的所有类名
  $("elements").removeClass();

接着我们分别来看.addClass(className)和.removeClass([className])的使用,同样先在页面上创建一个Markup:

   <div class="demo">
     <ul>
 	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
	<li>item4</li>
     </ul>
     <div class="btn"><a href="" id="addClass">addClass</a><a href="" id="removeClass">removeClass</a></div>
   </div>

CSS

     .demo {
	width: 300px;
	padding: 10px;
	border: 1px solid #ccc;
     }
				
     .demo ul {
	overflow: hidden;
     }
			
     .demo ul li {
	list-style: none outside none;
	float: left;
	width: 50px;
	height: 50px;
	border: 1px solid lime;
	margin: 0 10px 10px 0; 
      }
				
      .btn a{
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 3px 5px;
	border: 1px solid #ccc;
	background: #f5f5f5;
	color: #333;
	margin-right: 10px;
	text-decoration: none;
     }
			
      .demo ul li.selected {
	background: #ccc;
	border-color: red;
     }
				
      .demo ul li.highlight {
	color: orange;
	font-weight: bold;
      }

一、.addClass(className)

我们可以使用两种方法来给匹配的元素增加类名,一种是.addClass(className),另一种是.addClass(function(index,currentClass)):

1、addClass(className):

这种方法就是给匹配的元素增加指定的类名,其中className是指一个或多个类名,如果是多个类名需要用空格隔开。我们一起来看个实例:

   <script type="text/javascript">
     $(function(){
	$("#addClass").click(function(){
	   $(".demo li:last").addClass("selected");
	   return false;
	});			
     });
   </script>

上面的代码所表达的是,点击“addClass”按钮后,会给div.demo列表中的最后一个列表项加上一个“.selected”的class名,这样selected上的样式就会追加到相匹配的元素上,我们一起来看一下效果:

上面演示的是仅增加一个类名,那么我个接着看一个增加多个类名的实例:

  <script type="text/javascript">
     $(function(){
	$("#addClass").click(function(){
            $(".demo li:last").addClass("selected highlight");
	    return false;
	});			
     });
   </script>

上面所表示的是:当你点击“addClass”按钮后会给div.demo中列表的最后一个列表项增加"selected"和"highlight"两个类名,效果如下:

1、.addClass(function(index,currentClass))

这个方法是通过函数为匹配的元素增加指定的类名,其中function(index,currentClass)必须返回一个或多个空格分隔的类名,其主要接受两个参数,index参数是为对象在这个集合中的索引值,currentClass参数为这个对象原行的类名。我们来看一个实列:

   <script type="text/javascript">
	$(function(){
		$("#addClass").click(function(){
		   $("div.demo li").addClass(function(index,currentClass){
			var addedClass;
			if(currentClass == "") {//判断列表项初始类名是不是空字符串,如果是空就增加类名						
				addedClass = "item-" + (index+1);//定义类名
			}
		       return addedClass;//返回类名
		    })
		return false;
        	});			
	});
   </script>

上面代码所表示的是点击“addClass”按钮后,给div.demo中的列表项没定义类名的列表增加指定的类名。一起看看点击前后的对比图(Firebug对比图)

二、.removeClass([className])

.removeClass()其实跟前面的.addClass()用法是相对应的,只不过.addClass()用来增加类名,而.removeClass()是用来删除类名。.removeClass()也有两种使用方法:

1、.removeClass([className])

.removeClass([className])是用来删除匹配元素中的指定的类名或全部类名;而其中className是可选的,如果className选择了值,删除的将是这个指定的值,如果指定任何值,将删除所有的类名。如:

<script type="text/javascript">
	$(function(){
		$("#addClass").click(function(){
			//增加selected 和 highlight类名
			$("div.demo li:last").addClass("selected highlight");
                	return false;
		});			
					
		$("#removeClass").click(function(){
			//删除selected类名
			$("div.demo li:last").removeClass("selected");
			return false;
        	});
	});
</script>

上面代码前一段是点击“addClass”按钮后给div.demo中列表项中最后一项增加“selected higlight”类名,而后一段代码就是点击“removeClass”按钮后将把刚才添加的“selected”类名删除去。效果如下所示:

如果将上面的代码后半部改一下:

	$("#removeClass").click(function(){
		//删除selected类名
		$("div.demo li:last").removeClass();
		return false;
	});

这样一来,就把前面新增加的类名就全部删除了。

2、.removeClass(function(index,currenClass))

这种方法是从匹配的元素中删除全部或者指定的类名,function(index,currenClass)函数必须返回一个或多个空格分隔的类名。这个函数也接受两个函数,其中index参数为对象在这个集合中的索引值,currentClass参数为这个对象原先的类名,其具体使用方法和前面介绍的.addClass(function(index,currentClass))类似。

最后总结一点:.addClass(className)和.removeClass([className])都是对DOM元素中的类名进行操作,前者用来给匹配的元素增加类名,后者刚好和其相反给匹配的元素删除类名。

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

Zoom Lebron XIV 14

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

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

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