JQuery中怎么設置class

  Jquery

 

JQuery中設置class相關的有如下三個方法：

$(selector).addClass();       // 向被選元素添加一個或多個類
$(selector).removeClass();    // 從被選元素刪除一個或多個類
$(selector).toggleClass();    // 對被選元素進行添加/刪除類的切換操作

下面實例演示一下以上三個方法的用法：

1. 創建Html元素

   <div class="box">
   	<span>點擊不同按鈕后，觀察效果：</span><br>
   	<div class="content">
   		<li>list-item-1</li>
   		<li>list-item-2</li>
   		<li>list-item-3</li>
   		<li>list-item-4</li>
   		<li>list-item-5</li>
   	</div>		
   	<input type="button" class="btn1" value="偶數位置添加紅色樣式"><br>
   	<input type="button" class="btn2" value="交換紅色、黑色樣式"><br>
   	<input type="button" class="btn3" value="去除所有紅色樣式">
   </div>

2. 簡單設置css樣式

   div.box{width:300px;height:300px;padding:10px 20px;border:4px dashed #ccc;}
   div.box>span{color:#999;font-style:italic;}
   div.content{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:1px solid green;}
   input{margin:10px;}
   input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;}
   .red{color:red;}

3. 編寫jquery代碼

   $(function(){
   	$("input:button.btn1").click(function() {
   		$(".content li:odd").addClass('red');
   	});
   	$("input:button.btn2").click(function() {
   		$(".content li").toggleClass('red');
   	});
   	$("input:button.btn3").click(function() {
   		$(".content li").removeClass('red');
   	});
   })

4. 觀察顯示效果

• 初始樣式

  

• 點擊第一個按鈕，給偶數位置的列表項目添加red類

  

• 點擊第二個按鈕，有red類的元素去除red類，沒有的就加上red類

  

• 點擊第三個按鈕，刪除所有的red類