jQuery中.addClass()和.removeClass()使用

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

$(&https://csswang.com/8220;element&https://csswang.com/8221;).addClass(&https://csswang.com/8220;yourClassName1 yourClassName2 yourClassNameN&https://csswang.com/8221;);

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

//删除指定的类名
$(&https://csswang.com/8220;elements&https://csswang.com/8221;).removeClass(&https://csswang.com/8220;yourClassName1 yourClassName2 yourClassNameN&https://csswang.com/8221;);
//删除匹配元素中的所有类名
$(&https://csswang.com/8220;elements&https://csswang.com/8221;).removeClass();

接着我们分别来看.addClass(className)和.removeClass([className])的使用

<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>

.demo {
	width: 300px;
	padding: 10px;
	border: 1px solid https://csswang.com/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 https://csswang.com/ccc;
	background: https://csswang.com/f5f5f5;
	color: https://csswang.com/333;
	margin-right: 10px;
	text-decoration: none;
     }
      .demo ul li.selected {
	background: https://csswang.com/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(){
	$("https://csswang.com/addClass").click(function(){
	   $(".demo li:last").addClass("selected");
	   return false;
	});			
     });
   </script>

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

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

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

上面所表示的是：当你点击“addClass”按钮后会给div.demo中列表的最后一个列表项增加&https://csswang.com/8221;selected&https://csswang.com/8221;和&https://csswang.com/8221;highlight&https://csswang.com/8221;两个类名，效果如下：

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

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

<script type="text/javascript">
	$(function(){
		$("https://csswang.com/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(){
		$("https://csswang.com/addClass").click(function(){
			//增加selected 和 highlight类名
			$("div.demo li:last").addClass("selected highlight");
                	return false;
		});			
		$("https://csswang.com/removeClass").click(function(){
			//删除selected类名
			$("div.demo li:last").removeClass("selected");
			return false;
        	});
	});
</script>

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

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

$("https://csswang.com/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元素中的类名进行操作，前者用来给匹配的元素增加类名，后者刚好和其相反给匹配的元素删除类名。

本文链接：» https://www.csswang.com/exp/2197

转载请注明本文来源出处。