jQuery 属性选择符和 eq()与 even的运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.7.1.js" ></script>
<style>
.a{color: blue;font-size: x-large;background-color: brown;}
.s{color: blue;font-size: x-large;}
.d{color: blue;font-size: x-large;}
.f{color: blue;font-size: x-large;}
.g{color: blue;font-size: x-large;}
</style>
<script>
$(document).ready(function(){
$('#z').click(function(){
$('li[title]').hide()
})
$('#x').click(function(){
$('li[title=w]').hide()
})
$('#c').click(function(){
$('li[title!=w]').hide()
})
$('#v').click(function(){
$('li:eq(3)').hide()
})
$('#b').click(function(){
$('li:not(.s)').hide()
})
$('#n').click(function(){
$('li:even').hide()
})
$('#m').click(function(){
$('ol li:even').css('background-color',"#A52A2A")
})
})
</script>
</head>
<body>
<ul>
<li title="q" class="a">1</li>
<li title="w" class="s">2</li>
<li title="e" class="d">3</li>
<li title="r" class="f">4</li>
<li class="g">5</li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<button id="z">隐藏1234</button>
<button id="x">隐藏2</button>
<button id="c">除了2以外都隐藏</button>
<button id="v">使用qe进行隐藏</button>
<button id="b">使用not来进行隐藏</button>
<button id="n">使用even进行隐藏</button>
<button id="m">对奇数行进行增加背景色</button>
</body>
</html>
