过滤选择器：基本过滤、内容过滤、可见性过滤和属性过滤

基本过滤：

:first
:last
:not
:even
:odd
:eq(index) 选取索引值为index的元素
:gt(index) 选取索引值大于index的元素
:lt(index) 选取索引值小于index的元素

内容过滤：

:contains(text) 选取包含文本内容text的元素
:empty 选取不包含子元素或文本的元素
:has(sel) 选取包含sel选择器的元素
:parent 选取包含子元素或文本的元素

		<script>
			$(function() {
				//:empty 不包含文本或者子元素的空元素
				var $div1 = $("div:empty")
				console.log($div1)
				//:parent 包含文本或者子元素的非空元素
				var $div2 = $("div:parent")
				console.log($div2)
				//:has(selector) 包含指定子元素（选择器）的元素
				var $div3 = $("div:has(span)")
				console.log($div3)
				//:contains(text) 包含指定文本的元素
				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>
        /*
         需求:
         1. 选择第一个div
         2. 选择最后一个class为box的元素
         3. 选择所有class属性不为box的div
         4. 选择第二个和第三个li元素
         5. 选择内容为BBBBB的li
         6. 选择隐藏的li
         7. 选择有title属性的li元素
         8. 选择所有属性title为hello的li元素
         */
        $(function(){
            //1. 选择第一个div
            $('div:first').css('background','red');
            //2. 选择最后一个class为box的元素
            $('.box:last').css('background','green');
            //3. 选择所有class属性不为box的div
            $('div:not(.box)').css('background','pink');
            //4. 选择第二个和第三个li元素
            $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次
            //$('li:lt(3):gt(0)').css('background', 'red')
            //5. 选择内容为BBBBB的li
            // $('li:contains("BBBBB")').css('background', 'red')
            $('li:contains("BBBBB")').css('background','purple');
            //6. 选择隐藏的li
            // console.log($('li:hidden').length, $('li:hidden')[0])
            $('li:hidden').css('display','block');
            //7. 选择有title属性的li元素
            $('li[title]').css('background','grey');
            //8. 选择所有属性title为hello的li元素
            $('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>

jiaody111

发布了119 篇原创文章 · 获赞 1 · 访问量 3986

私信关注

jQuery2.4--过滤选择器

过滤选择器：基本过滤、内容过滤、可见性过滤和属性过滤

基本过滤：

内容过滤：

可见性过滤：

属性过滤：

练习：

猜你喜欢