不同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");