当前位置:首页 > 编程教程 > jQuery技术文章 > jquery选择器之层级过滤选择器详解

介绍jquery层级选择器、过滤选择器

  • 发布时间:
  • 作者:码农之家
  • 点击:102

这篇文章主要知识点是关于jquery、层级选择器、过滤选择器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery Mobile从入门到精通
  • 类型:jQuery大小:168.7 MB格式:PDF作者:未来科技
立即下载

jquery选择器之层级过滤选择器详解

 

 

$("ancestor descendant"):选取parent元素后所有的child元素
$("parent > child"):选取parent元素后所有的直属child元素,何谓“直属”,也就是第一级的意思了
$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素
$("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器

后两个用的比较少,一般会有其他选择器替代
 

$("prev + next")等价于next()
$("prev ~ siblings")等价于nextAll()

实例:
 

<style type="text/css">
  /*高亮显示*/
  .highlight{  
   background-color: gray
  }
 </style>

 

<body>
    <div>
     <p id="p1">第一个DIV里面的P元素。</p>
    </div>
    <p id="p2">第一个单P元素。</p>
    <div>
     <span>DIV里面的SPAN元素。</span>
     <p id="p3">第二个DIV里面的P元素。</p>
     <span>
      <p id="p4">DIV里面的SPAN里面的P元素。</p>
     </span>
    </div>
     <table>
      <tr>
       <th>A</th><th>B</th><th>C</th>
      </tr>
      <tr>
       <td>1</td><td>2</td><td>3</td>
      </tr>
     </table>
     <p id="p5">第二个单P元素。</p>
     <span>单SPAN元素。</span>
  </body>

 

var s = $("div p").addClass("highlight"); //选取div后面的所有p元素   结果为:p1,p3,p4

jquery选择器之层级过滤选择器详解

 

var s = $("div > p").addClass("highlight"); //选取div后 所有第一级p元素   结果为:p1,p3。p4不会选取,因为p4不是div的直属元素

jquery选择器之层级过滤选择器详解

 

var s = $("div + p").addClass("highlight");   //选取div后面紧邻的p元素  结果为:p2。p5不会选取,因为p5不紧邻div

jquery选择器之层级过滤选择器详解
 

var s = $("div ~ p").addClass("highlight");     //选取div后面所有紧邻的p元素  结果为:p2,p5

jquery选择器之层级过滤选择器详解

 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.924736

jquery可见性过滤选择器使用示例

script src="Jquery1.7.js" type="text/javascript"/script script type="text/javascript" $(function () { $('#btn').click(function () { //$('span:hidden').addClass('class1').show(); $(':hidden').addClass('class1').show(); //$('div:visible').addClass('class1'); $('div:visible').addClass('class1'); }) }) /script /head body form id="form1" div 第一层/div span Hidden/span input type="button" id="btn" value="显示" / /form /body ……

网友NO.570130

jquery选择器使用详解

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass") 层叠选择器: $("form input") 选择所有的form元素中的input元素 $("#main *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器: $("tr:first") 选择所有tr元素的……

网友NO.113402

常用jQuery选择器总结

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素[/code] 可以运用多种……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com