zoukankan      html  css  js  c++  java
  • 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    前面的话

      本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容。该部分内容并非没有出现在《锋利的jQuery》一书中,nth-of-type()选择器参照CSS中的nth-of-type选择器,于1.9版本新增,本文将详细介绍该内容

    通用形式

    :nth-of-type()

      个人认为,:nth-of-type()选择器不应该归类于子元素选择器,也不完全等同索引选择器,因为其索引是指特定元素的索引,但索引是从1开始的,而且返回的是集合元素。所以,我把其称之为伪子元素选择器

    $('div span:nth-of-type(2)').css('color','red');

      对应于CSS的:nth-of-type()选择器

    div span:nth-of-type(2){color:red;}

      如果使用javascript实现类似效果

    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++){
        var span2 = divs[i].getElementsByTagName('span')[1];
        if(span2){
            span2.style.color = 'red';
        }
    }
    <button id='btn1' style="color:red">$('div span:nth-of-type(2)')</button>
    <button id='btn2' style="color:blue">$('div span:nth-child(2)')</button>
    <button id='btn3' style="color:green">$('div span:eq(1)')</button>
    <button id="reset">还原</button>
    <div>
        <i>1.1</i>
        <span>1.2</span>
        <span>1.3</span>    
    </div>
    <div>
        <i>2.1</i>
        <span>2.2</span>
        <span>2.3</span>
    </div>
    <script>
    reset.onclick = function(){history.go();}
    btn1.onclick = function(){
        //选择所有父元素为div元素的第2个出现的span元素,所以结果为1.3、2.3
        $('div span:nth-of-type(2)').css('color','red');
    }
    btn2.onclick = function(){
        //选择所有父元素为div元素的第2个子元素,且该子元素是span元素,所以结果是1.2、2.2
        $('div span:nth-child(2)').css('color','blue');
    }
    btn3.onclick = function(){
        //选择首次出现的父元素为div元素的第1个出现的span元素(索引从0开始),所以结果是1.3
        $('div span:eq(1)').css('color','green');
    }
    </script>

      当然$(':nth-of-type(index)')选择器作为通用形式,可以有多种参数选择

      【1】$(':nth-of-type(even)') 选取所有索引值为偶数的元素

      【2】$(':nth-of-type(odd)') 选取所有索引值为奇数的元素

      【3】$(':nth-of-type(3n+1)') 选取所有索引值为(3n+1)的元素

    <button id="btn1" style="color: red;">$(':nth-of-type(even)')</button>
    <button id="btn2" style="color: blue;">$(':nth-of-type(odd)')</button>
    <button id="btn3" style="color: green;">$(':nth-of-type(3n+1)')</button>
    <button id="reset">还原</button>
    <div>
        <i>1</i>
        <span>2</span>
        <span>3</span>    
        <i>4</i>
        <span>5</span>
        <span>6</span>
    </div>
    <script src="jquery-3.1.0.js"></script>
    <script>
    reset.onclick = function(){history.go();}
    //匹配每个父元素为div的索引为偶数的元素,结果是3(第2个span)、6(第4个span)、4(第2个i)
    btn1.onclick = function(){$('div :nth-of-type(even)').css('color','red');}
    
    //匹配每个父元素为div的索引为奇数的元素,结果是1(第1个i)、2(第1个span)、5(第3个span)
    btn2.onclick = function(){$('div :nth-of-type(odd)').css('color','blue');}
    
    //匹配每个父元素为div的索引为(3n+1)的元素,索引可以是1、4。所以结果是1(第1个i)、2(第1个span)、6(第4个span)
    btn3.onclick = function(){$('div :nth-of-type(3n+1)').css('color','green');}
    </script>

    反向形式

    :nth-last-of-type()

      :nth-last-of-type()选择器选择所有第n个元素,但计数从最后一个元素到第一个

    $('div :nth-last-of-type(even)').css('color','red');

      对应的CSS选择器是:nth-last-of-type()

    div :nth-last-of-type(even){color:red;}

      如果使用javascript实现类似效果

    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++){
        var children = divs[i].children;
        var lastName = '';
        //从后往前数
        for(var j = children.length; j > -1; j--){
            //标签第一次出现或奇数次出现
            if(children[j].nodeName != lastName){
                children[j].style.color = 'red';
                lastName = children[j].nodeName;
            //标签第二次出现或偶数次出现
            }else{
                lastName = '';
            }
        }
    }
    <button id="btn1" style="color: red;">$(':nth-last-of-type(even)')</button>
    <button id="btn2" style="color: blue;">$(':nth-last-of-type(odd)')</button>
    <button id="btn3" style="color: green;">$(':nth-last-of-type(3n+1)')</button>
    <button id="reset">还原</button>
    <div>
        <i>1</i>
        <span>2</span>
        <span>3</span>    
        <i>4</i>
        <span>5</span>
        <span>6</span>
    </div>
    <script src="jquery-3.1.0.js"></script>
    <script>
    reset.onclick = function(){history.go();}
    //匹配每个父元素为div的索引为偶数的元素(从后往前数),结果是5(倒数第2个span)、2(倒数第4个span)、1(倒数第2个i)
    btn1.onclick = function(){$('div :nth-last-of-type(even)').css('color','red');}
    
    //匹配每个父元素为div的索引为奇数的元素(从后往前数),结果是4(倒数第1个i)、6(倒数第1个span)、3(倒数第3个span)
    btn2.onclick = function(){$('div :nth-last-of-type(odd)').css('color','blue');}
    
    //匹配每个父元素为div的索引为(3n+1)的元素(从后往前数),索引可以是1、4(从后往前数)。所以结果是4(倒数第1个i)、6(倒数第1个span)、2(倒数第4个span)
    btn3.onclick = function(){$('div :nth-last-of-type(3n+1)').css('color','green');}
    </script>

    首尾元素

    $(':first-of-type')

      :first-of-type选择器是:nth-of-type(1)选择器的简写形式,选取所有相同元素中的首个元素

    $(':last-of-type')

      类似地,$(':last-of-type')选择器选取所有相同元素中的最后一个元素

    <button id="btn1" style="color: red;">$('div :first-of-type')</button>
    <button id="btn2" style="color: blue;">$('div :last-of-type')</button>
    <button id="btn3" style="color: green;">$('div span:first-of-type')</button>
    <button id="btn4" style="color: pink;">$('div span:last-of-type')</button>
    <button id="reset">还原</button>
    <div id="t1">
        <i>1.1</i>
        <span>1.2</span>
    </div>
    <p  id="t2">
        <span>2.1</span>
        <i>2.2</i>
    </p>
    <div id="t3">
        <span>3.1</span>
        <i>3.2</i>
    </div>
    <script src="jquery-3.1.0.js"></script>
    <script>
    reset.onclick = function(){history.go();}
    //匹配每个div元素为父元素的索引为1的元素,结果是1.1、1.2、3.1、3.2
    btn1.onclick = function(){$('div :first-of-type').css('color','red');}
    
    //匹配每个div元素为父元素的索引为1的元素(从后向前数),结果同上
    btn2.onclick = function(){$('div :last-of-type').css('color','blue');}
    
    //匹配每个div元素为父元素的索引为1的span元素,结果是1.2、3.1
    btn3.onclick = function(){$('div span:first-of-type').css('color','green');}
    
    //匹配每个div元素为父元素的索引为1的span元素(从后向前数),结果是同上
    btn4.onclick = function(){$('div span:last-of-type').css('color','pink');}
    </script>

      首尾伪子元素选择器分别对应于CSS中的:first-of-type和:last-of-type

      如果要完成同样的功能,选择器格式分别为: 

    div :first-of-type{color:red;}
    
    div :last-of-type{color:blue;}
    
    div span:first-of-type{color:green;}
    
    div span:last-of-type{color:pink;}

      如果使用javascript选择器要完成上面的最后一个功能,则如下所示

    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++){
        var spans = divs[i].getElementsByTagName('span');
        spans[spans.length-1].style.color = 'pink';
    }

    唯一元素

    :only-of-type()

      :only-of-type()选择器选择出所有没有具有相同名称的兄弟元素的元素

    $('div span:only-of-type').css('color','green');

      对应于CSS的:only-of-type选择器

    div span:only-of-type{color:green;}

      如果使用javascript实现,则如下所示

    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++){
        var spans = divs[i].getElementsByTagName('span');
        if(spans.length == 1){
            divs[i].spans[0].color = 'green';
        }
    }
    <button id="btn1" style="color: green;">$('div span:only-of-type')</button>
    <button id="reset">还原</button>
    <div>
        <span>1.1</span>
        <span>1.2</span>
        <i>1.3</i>
    </div>
    <div>
        <span>2.1</span>
        <i>2.2</i>
    </div>
    <script src="jquery-3.1.0.js"></script>
    <script>
    reset.onclick = function(){history.go();}
    //第2个div中只存在一个<span>元素,所以结果是2.1
    btn1.onclick = function(){$('div span:only-of-type').css('color','green');}
    </script>

    最后

      终于把jQuery选择器系列完结了,与原生javascript选择器相比,内容多了不少。jQuery选择器主要基于CSS选择器,并有所拓展。但实际上,选择器太过丰富也增加了选择的代价,同时也提出了各种选择器选用的性能问题

      如果只有一条路,这条路再难,也得咬牙走下去。如果有10条路,如果时间充足,则可以把10条路都走一遍,找出最轻松的路,也就是性能最好的路;如果时间不足,只能挑一条熟悉的路,但总感觉没选到最轻松的路

      就像索引选择器:eq()、子元素选择器:nth-child()和伪子元素选择器:nth-of-type()。方法多了,容易混淆,使用时有多种选择,但要注意区分

      丰富是好事,也是坏事

      库是好事,也是坏事

      以上

  • 相关阅读:
    UVA 11488 Hyper Prefix Sets (字典树)
    UVALive 3295 Counting Triangles
    POJ 2752 Seek the Name, Seek the Fame (KMP)
    UVA 11584 Partitioning by Palindromes (字符串区间dp)
    UVA 11100 The Trip, 2007 (贪心)
    JXNU暑期选拔赛
    计蒜客---N的-2进制表示
    计蒜客---线段的总长
    计蒜客---最大质因数
    JustOj 2009: P1016 (dp)
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/5813357.html
Copyright © 2011-2022 走看看