当前位置:首页 > 资讯 > info5 > 正文

jq中多条件选择器,相对选择器,层次选择器的区别

发表于: 2016-04-16   作者:qq_34121668   来源:转载   浏览:
摘要: 一、Jquery常用的过滤选择器如下所示:    1、:first,选取第一个元素,比如$("div:first")选取第一个div元素    2、:last,选取最后一个元素,比如$("div:last")选取最后一个div元素    3、:not(选择器),选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素   

一、Jquery常用的过滤选择器如下所示:

    1、:first,选取第一个元素,比如$("div:first")选取第一个div元素

    2、:last,选取最后一个元素,比如$("div:last")选取最后一个div元素

    3、:not(选择器),选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素

    4、:even/:odd,选取索引为偶数/奇数的元素,比如$("div:even"),选取索引号为偶数的所有div元素

    5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号),选取等于索引号/大于索引号/小于索引号的元素,比如$("div:lt(3)"),选取索引号小于3的所有div元素

注意:

    过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础,即过滤的逐级性,比如

$("#t1 tr:gt(0):lt(3)").css("fontSize", "28");  //lt(3)是从gt(0)出的新序列中的序号,不要写成lt(4)


二,重点

    多条件选择器

    多条件选择器:$("p,div,span,menuitem"),同时选择p标签,div标签,和拥有menuitem样式的span标签元素

    注意选择器表达式中的空格不能多不能少,易错!


    相对选择器

    只要在$()指定第二个参数,第二个参数为相对的元素。比如html代码如下

        <table id="table1">

               <tr><td>dsds</td><td>dsfdef</td></tr>

               <tr><td>dsds</td><td>dsfdef</td></tr>

               <tr><td>dsds</td><td>dsfdef</td></tr>

               <tr><td>dsds</td><td>dsfdef</td></tr>

               <tr><td>dsds</td><td>dsfdef</td></tr>

           </table>

$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器,选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素,没有涉及到其他行的td元素

 

            <script type="text/javascript">

                  $(function () {

                      $("#table1 tr").click(function () {

                          $("td", $(this)).css("background", "red");

                      });

                  });

              </script>


层次选择器:

    1 $("#div li")获取div下的所有li元素(后代,子,子的子....)

    2 $("#div > li")获取div下的直接li子元素//注意空格

    3 $(".menuitem + div")获取样式名为menuitem之后的第一个div元素,不常用。

    3 $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素,不常用。

细节区别在于(易错点):

多条件选择器:$("p,div,span,menuitem"),相对选择器:$("td", $(this)).css("background", "red")",层次选择器:$("#div li")获取div下的所有li元素(后代,子,子的子....)

三者的区别是:

多条件选择器:在一个“”内有逗号区分,

相对选择器:2个元素分开 ,

层次选择器在一个“”内以空格区分

jq中多条件选择器,相对选择器,层次选择器的区别

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
一、jQuery 选择器 jQuery 选择器简介 - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery
首先建立工程,然后再stroyboard拖入UIPicker,为在程序中访问该控件,需要将该控件绑定到picker IB
选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似。 选择器
1 www.jquery.com 2 利用jQuery获取页面内的对象并赋予属性 $(document).ready(function () { //获
1 www.jquery.com 2 利用jQuery获取页面内的对象并赋予属性 $(document).ready(function () { //获
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号