Jquery第三章过滤选择器

最新推荐文章于 2024-05-24 00:34:26 发布

穿林来了

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量1.1w

点赞数 13

分类专栏： jquery笔记文章标签： jquery

本文链接：https://blog.csdn.net/chuanlinlaile/article/details/79578646

版权

jquery笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第三章过滤选择器

一.基本过滤器

写法	描述
$(‘p:first’)	选取页面元素内的第一个p元素
$(‘p:last’)	选取页面元素内的最后一个p元素
$(‘p:not(.select)’)	选取选择器不是select的p元素
$(‘p:even’)	选取索引是偶数的P元素(索引从0开始)
$(‘p:odd’)	选取索引是奇数的p元素(索引从0开始)
$(‘p:eq(index)’)	选取索引等于index的p元素(索引从0开始,索引支持负数)
$(‘p:gt(index)’)	选取索引>index的p元素(索引从0开始)
$(‘p:lt(index)’)	选取索引<index的p元素(索引从0开始)
$(‘:header’)	选取标题元素h1~h6
$(‘:animated’)	选取正在执行动画的元素
$(‘input:focus’)	选取当前被焦点的元素
jQuery为常用的过滤器提供了丰富的方法
eq(index)	获取是index索引值的元素(索引从0开始,负值从后开始)
first()	选取第一个元素
last()	选取最后一个元素
not(select)	选取不是该选择器的元素

用法：

<body>
<p>第一个P</p>
<p id="select">第二个P</p>
<p>第三个P</p>
<h3>我是h3</h3>
<h4>我是h4</h4>
<input type="text" value="123">
<script type="text/javascript">
    $(function(){
        $('p:first').css('color','pink');
//     $('p').first().css('color','pink');
        $('p:last').css('color','orange');
//     $('p').last().css('color','orange');
        $('p:not(#select)').css('background','green');
//     $('p').not('#select').css('background','green');
        $('p:even').css('font-family','华文行楷');
        $('p:odd').css('font-family','隶书');
        $('p:eq(1)').css('color','red');
//     $('p').eq(1).css('color','red');
        $('p:gt(1)').css('width','80px');
        $('p:lt(1)').css('width','120px');
        $(':header').css('color','blue');//全局查找
        $('h4:header').css('color','peru');//限定了是h4
        $('input').focus();//设置页面刷新就激活焦点
        $('input:focus').css('color','deeppink')
//     :focus过滤器必须是网页初始状态就已经被激活的焦点元素,不能是通过鼠标点击或Tab键激活
    });
</script>
</body>

二.内容过滤器

写法	描述
$(‘:contains(“百度”)’)	选取含有”百度”文本的元素
$(‘:empty’)	选取不包含子元素或空文本的元素
$(‘:has(select)’)	选取含有该select选择器的元素(必须是父元素上调用,返回的是父元素)
$(‘:parent’)	选取含有子元素或文本的元素
has()	jQuery提供了一个has()方法作用等同has过滤器
jQuery提供了parent相关方法,但与过滤器含义不等同
parent()	选择当前元素的父元素
parents()	选择当前元素的祖先元素(包括父元素)
parentsUntil()	选择当前元素的祖先元素,遇到指定元素则停止

用法：

<body>
<a href="http://www.baidu.com">百度</a>
<p></p>
<div>
    <span>我是第一个span</span>
    <span id="show">我是第二个span</span>
</div><br>
<nav style="width:100px;height:100px;background:deeppink">
    <p style="width:80px;height:50px;background:orangered">
        <span>测试parents</span>
    </p>
</nav>
<script type="text/javascript">
    $(function (){
        $('a:contains("百度")').css('border','double');
        $('p:empty').css('background','orange').css('height','50px').css('width','50px');
        //必须是块级元素,width和height才有效
        $('div:has(#show)').css('color','peru');
        $('div').has('#show').css('width','120px');
        //这是在父元素上调用,返回的也是父元素。意思就是样式作用在父元素上
        $('div:parent').css('color','red').css('border','dashed');//div作为父亲
        $('#show').parent().css('background','green');//查找某元素的父亲
        //这两者是有区别的,且color会影响borderColor的颜色
        //$('p>span').parents().css('border','groove');
        alert($('p>span').parents().length);//4个
        alert($('p>span').parents()[3].nodeName);//HTML
        $('p>span').parentsUntil('body').css('border','groove');
    });
</script>
</body>

三.可见性过滤器

写法	描述
$(‘:hidden’)	选取所有不可见元素
$(‘:visible’)	选取所有可见元素
hidden过滤器一般是包含样式为display:none。input表单类型为hidden 设置了visibility:hidden的元素,虽然其在物理上是不可见的,但却保留了物理空间,因此该算是可见元素

用法：

<body>
<div style="width:50px;height:50px;background:#ccc;visibility:hidden">我是一个div标签</div>
<div style="height:50px;background:#ccc;display:none;">div</div>
<input type="hidden" name="hidden">
<div></div><!--没有文本或子元素的标签,不算隐藏元素-->
<p>我是一个小小p标签</p>
<script type="text/javascript">
    $(function (){
//************************全局查找隐藏元素
        var count=$(':hidden');
        alert(count.size());//7
        for(var i=0;i<count.length;i++){
            alert(count[i].nodeName);
        }//HEAD  META  TITLE  SCRIPT  DIV INPUT SCRIPT
//************************指定查找隐藏元素
        alert($('div:hidden').size()+':'+$('div:hidden').get(0).nodeName);//1:DIV
        alert($('input:hidden').size()+':'+$('input:hidden').get(0).nodeName);//1:INPUT
//************************全局查找显示元素
        var visible=$(':visible');
        alert($(':visible').length);//5
        for(var i=0;i<visible.length;i++){
            document.write(visible[i].nodeName+'<br>');
        }//HTML  BODY  DIV  DIV  P
    });
</script>
</body>

四.子元素过滤器

（注意:子元素过滤器查找的该元素是作为第几个孩子元素,返回是该元素也就是孩子）

写法	描述
$(‘li:first-child’)	查找li作为第一个孩子的元素
$(‘li:last-child’)	获取li的父元素的最后一个子元素
$(‘li:only-child’)	获取只有一个子元素的元素
$(‘li:nth-child(even/odd/index)’)	获取li是偶数/奇数/索引的子元素(索引从1开始)

用法：

<body>
<ul>
    <li>1aaa</li>
    <li>2bbb</li>
    <li>3ccc</li>
    <li>4ddd</li>
    <li>5eee</li>
</ul>
<div style="height:50px;background:#ccc;">
    <span>我是唯一的孩子</span>
</div>
<script type="text/javascript">
    $(function (){
        $('li:first-child').css('color','red');
        $('li:last-child').css('color','deeppink');
        //$('li:only-child').css('background','green');
        $('span:only-child').css('background','green');
        $('li:nth-child(2)').css('color','peru');
        $('li:nth-child(2n)').css('font-size','25px');
        $('li:nth-child(3n+1)').css('font-family','华文行楷');
        $('li:nth-child(odd)').css('background','wheat');
        $('li:nth-child(even)').css('background','#ccc');
    });
</script>
</body>

五.其他方法

方法	写法	描述
is(s/o/e/f)	$(‘span’).is(‘.red’)	判断span标签的class名是否是red
hasClass(class)	$(‘span’).eq(2).hasClass(‘.red’)	判断页面中的第二个span是否拥有class名为red
slice(start,end)	$(‘span’).slice(0,2)	选定span的索引是0和1的
end()	$(‘span’).find(‘p’).end()	返回当前元素的上一个状态(这里的上一个状态可以是当前元素的父元素,也可以是当前元素的同级元素)
contents()	$(‘span’).contents()	获取span元素下的所有节点(元素节点、文本节点、属性节点)
filter(s/o/e/f)	$(‘span’).filter(‘.red,:first-child’)	过滤器:多种选择器的组合
s（是选择器）、o（是对象）、e（是索引）、f（是函数）

用法：

<body>
<ul id="test">
    <li>0-1</li>
    <li id="red">1-2</li>
    <li>2-3</li>
    <li title="blue" aaa="bbb">3-4</li>
    <li>4-5</li>
</ul>
<ul>
    <li>0-1</li>
    <li>1-2</li>
</ul>
<script type="text/javascript">
    $(function () {
//***************is方法
        alert($('li:nth-child(2)').is('#red'));//true
        alert($('#red').is($('li')));//true
        alert($('#red').is($('li').get(1)));//true
        alert($('li'));//jQuery对象
        alert($('li').get(1));//DOM对象
        alert($('li').is($('li').eq(1)));//true
        alert($('#red').is(function () {
            return $(this).attr('id')==='red';
        }));//ture
//***************hasClass方法
//      alert($('li').eq(1).hasClass('.red'));//false
//***************slice方法
        $('li').slice(1).css('background','peru');//从索引为1开始到最后都选定
        $('li').slice(0,2).css('color','deeppink');//选定索引0和1
        $('li').slice(0,-2).css('font-weight','bold');//从倒数第三个位置向前选定所有
        $('li').slice(2,-2).css('font-size','20px');//前两个和后两个都不选定
//***************end方法
        alert($('#test').find('li').get(0));//[object HTMLLIElement]
        alert($('#test').find('li').end().get(0));//[object HTMLUListElement]
        alert($('#test').find('li').parent().get(0));//等价上列
        $('#test').next('ul').css('color','deeppink');//返回当前元素的同级元素ul
//***************content方法
        alert($('ul:nth-child(2)').contents().size());//5
        alert($('ul:nth-child(2)').children().size());//3
        var count=$('ul:nth-child(2)').contents();
        for(var i=0;i<count.length;i++){
            alert(i+':'+count[i].nodeName);
            //0:#text  1:LI  2:#text  3:LI  4:#text
        }
//***************filter方法
        $('ul').filter('#test,:last').css('background','green');
        //寻找满足id为test的ul,以及最后一个ul,并给予背景为绿色的样式
        $('li').filter($('#test>li:nth-child(2)')).css('color','deeppink');
        $('li').filter($('li:nth-child(3)')).css('color','green');
        $('li').filter(function () {
            return $(this).attr('title')=='blue'&&$(this).attr('aaa')=='bbb';
        }).css('color','purple');
    });
</script>
</body>

六.实例

<!--************html部分-->
<body>
<!--实现页面中的经典导航条-->
<div class="nav">
    <div class="clsHeader">
        <h3>品牌分类</h3>
        <span><img src="img/girl.png" alt="girl"></span>
    </div>
    <div class="clsContent">
        <ul>
            <li><a href="#">佳能</a><small>(1234)</small></li>
            <li><a href="#">索尼</a><small>(1234)</small></li>
            <li><a href="#">三星</a><small>(1234)</small></li>
            <li><a href="#">苹果</a><small>(1234)</small></li>
            <li><a href="#">尼康</a><small>(1234)</small></li>
            <li><a href="#">富士</a><small>(1234)</small></li>
            <li><a href="#">理光</a><small>(1234)</small></li>
            <li><a href="#">佳能</a><small>(1234)</small></li>
            <li><a href="#">索尼</a><small>(1234)</small></li>
            <li><a href="#">三星</a><small>(1234)</small></li>
            <li><a href="#">卡西欧</a><small>(1234)</small></li>
            <li><a href="#">其他</a></li>
        </ul>
    </div>
    <div class="clsbottom">
        <a>精简显示品牌</a>
        <img src="img/cat.png" alt="cat">
    </div>
</div>
</body>

<script>
    //*********************************js部分
    //在该导航中需要实现的功能是,
    // 1. 点击"品牌分类"字样或者右边的图片——实现分类内容的成列和收起
    //点击图片时,有着图片的切换
    $(function () {
        $('.clsHeader>h3').click(function () {
            if($('.clsContent').is(':visible')){
                $('.clsContent').hide();
                $('.clsbottom').hide();
            }else{
                $('.clsContent').show();
                $('.clsbottom').show();
            }
        });
        $('.clsHeader>span').click(function () {
            if($('.clsContent').is(':visible')){
                $('.clsContent').hide();
                $('.clsbottom').hide();
                $('.clsHeader img').attr('src','img/text.png');
            }else{
                $('.clsContent').show();
                $('.clsbottom').show();
                $('.clsHeader img').attr('src','img/girl.png');
            }
        });
//2. 点击"精简显示品牌"字样,实现列表内容的精简。
// 点击"显示全部内容"字样则显示全部列表内容,并颜色为红色。
//永远保持"其他"字样在最后显示
        $('.clsbottom>a').click(function () {
            if($(this).text()=='精简显示品牌'){
                $('.clsContent li:gt(6):not(li:last)').hide();
                $(this).text('显示全部品牌').css('color','red');
            }else if($(this).text()=='显示全部品牌'){
                $('.clsContent li:gt(6):not(li:last)').show();
                $(this).text('精简显示品牌').css('color','black');
            }
        });
    });
</script>

<!--**********************css部分-->
<style>
    .nav{
        border:2px dashed orangered;
        width:220px;
    }
    .clsHeader{
        width:220px;
        padding:4px 0px;
        background-color:orange;
    }
    .clsHeader span{
        position: relative;
        left:118px;
    }
    img{
        width:20px;
        height:20px;
        position:relative;
        top:3px;
    }
    h3{
        display:inline;
    }
    .clsContent{
        width:200px;
    }
    ul li{
        list-style-type: none;
        display:inline;

    }
    ul a{
        color:black;
        font-size:18px;
        font-family:华文行楷;
    }
    ul small{
        font-size:8px;
    }
    .clsbottom{
        width:130px;
        margin-left:103px;
    }
    .clsbottom>a{
        font-size:15px;
        color:black;
    }
</style>

穿林来了

关注

13
点赞
踩
36

收藏

觉得还不错? 一键收藏
1
评论
Jquery第三章过滤选择器

第三章过滤选择器一.基本过滤器写法描述 $(‘p:first’) 选取页面元素内的第一个p元素 $(‘p:last’) 选取页面元素内的最后一个p元素 $(‘p:not(.select)’) 选取选择器不是select的p元素 $(‘p:even’) 选取索引是偶数的P元素(索引从0开始) $(‘p:odd’) 选取索引是奇数的p元素(索引从0开始) $(‘p:eq(index)’...
复制链接

扫一扫