不同eq()函數的區別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作樣式</title>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<style>
.newStyle1{
font-family: "微軟雅黑";
font-size: 14px;
background-color: #4169E1;
/*list-style: none;*/
}
.liStyle{
list-style:none;
background-color: antiquewhite;
}
</style>
</head>
<body>
<ul>
<li class="liStyle">我是li元素</li>
<li class="liStyle">我是li元素</li>
<li class="liStyle">我是li元素</li>
<li>我是li元素</li>
<li >我是li元素</li>
<li>我是li元素</li>
</ul>
<button id="change">切換樣式</button>
<script type="text/javascript">
$(document).ready(function (){
var index = 1;
$("li").addClass("newStyle1");
// 1.移除樣式使用 .eq()方法獲取元素移除他的類
// $("li").eq(1).removeClass("liStyle");
// 2.移除樣式使用 :eq()方法獲取元素移除他的類,要注意的是,如果:eq()裏面的是變量,不能:eq(index);這樣使用,因爲他會把它當做字符串
$("li:eq("+ index +")").removeClass("liStyle");
});
$("#change").click(function (){
$("li").toggleClass("liStyle");
});
</script>
</body>
</html>
1.移除樣式使用 .eq()方法獲取元素移除他的類,使用.eq()方法,裏面放變量或者是數字都可以,相比較而言,更方便一些。
var index = 3;
$("li").eq(index).removeClass("liStyle");
$("li").eq(1).removeClass("liStyle");
2.移除樣式使用 :eq()方法獲取元素移除他的類,要注意的是,如果:eq()裏面的是變量,不能:eq(index);這樣使用,因爲他會把它當做字符串
使用方法:
$("li:eq("+ index +")").removeClass("liStyle");