过滤选择器:基本过滤、内容过滤、可见性过滤和属性过滤
基本过滤:
- :first
- :last
- :not
- :even
- :odd
- :eq(index) 选取索引值为index的元素
- :gt(index) 选取索引值大于index的元素
- :lt(index) 选取索引值小于index的元素
内容过滤:
- :contains(text) 选取包含文本内容text的元素
- :empty 选取不包含子元素或文本的元素
- :has(sel) 选取包含sel选择器的元素
- :parent 选取包含子元素或文本的元素
<script>
$(function() {
var $div1 = $("div:empty")
console.log($div1)
var $div2 = $("div:parent")
console.log($div2)
var $div3 = $("div:has(span)")
console.log($div3)
var $div4 = $("div:contains('我是一个div')")
console.log($div4)
})
</script>
</head>
<body>
<div></div>
<div>我是一个div</div>
<div>aaa我是一个divaaaaa</div>
<div><span>我是一个span</span></div>
</body>
可见性过滤:
- :hidden 选取所有不可见的元素
- :visible 选取所有可见的元素
属性过滤:
- [attribute] 选取拥有此属性的元素
- [attribute=value] 选取属性的值为value的元素
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script>
$(function(){
$('div:first').css('background','red');
$('.box:last').css('background','green');
$('div:not(.box)').css('background','pink');
$('li:gt(0):lt(2)').css('background', 'red')
$('li:contains("BBBBB")').css('background','purple');
$('li:hidden').css('display','block');
$('li[title]').css('background','grey');
$('li[title=hello]').css('background','yellow');
})
</script>
</head>
<body>
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display:none">我本来是隐藏的</li>
</ul>
</body>
</html>