zoukankan      html  css  js  c++  java
  • jquery :last :lastchild区别

    :last Selects the last matched element.

    Note that :last selects a single element by filtering the current jQuery collection and matching the last element within it.

    Additional Notes:

    • Because :last is a jQuery extension and not part of the CSS specification, queries using :last cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :last to select elements, first select the elements using a pure CSS selector, then use.filter(":last").

    :last-child:

    Selects all elements that are the last child of their parent.

    <div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon,</span>
    <span>Sam</span>
    </div>
    <div>
    <span>Glen,</span>
    <span>Tane,</span>
     
    <span>Ralph,</span>
    <span>David</span>
    </div>
    <script>
    $("div span:last-child")
    .css({color:"red", fontSize:"80%"})
    .hover(function () {
    $(this).addClass("solast");
    }, function () {
    $(this).removeClass("solast");
    });
     
    这两个选择器都是匹配集合中的最后一个元素,差别在于 :last 将匹配所有的集合中的最后一个元素。而 :last-child 将匹配集合中的所有位置为最后一个的子元素。:last 将永远返回一个元素,而 :last-child可能返回一批元素。


    $('div p:last') 选择最后一个P元素并高亮显示得出结果如下:

    <div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    </div>
    <div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    </div>
    <div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    </div>

    $('div p:last-child') 将选择所有位于div最后一个p子元素,并高亮: 
    <div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    </div>
    <div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    </div>
    <div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    </div>
     
     
  • 相关阅读:
    Asp.Net图片上传
    JQuery实现CheckBox全选全不选
    DES加密解密公用方法(详细注释)
    sysobjects
    window.onload和$(document).ready()区别
    Ajaxpro2 实现三级联动
    idea Mac版过期处理方法.适用于JetBrains全家桶
    rabbitmq报错Failed to start RabbitMQ broker
    pip install image 失败,加上国内源
    关于系统程序员的一些感悟
  • 原文地址:https://www.cnblogs.com/youxin/p/2947990.html
Copyright © 2011-2022 走看看