jquery之Document元素选择器篇

2020-05-19 07:38:08易采站长站整理

 <ol>
  <li>list item 1 with dummy link to <a href=”/action/edit/Silly.pdf” class=”new” title=”Silly.pdf”>silly.pdf</a></li>
  <li class=”groof”><em>list <strong>item</strong> 2</em> with class=”<strong>groof</strong>“</li>
  <li>list item 3<span style=”display: none;”> SURPRISE!</span></li>
  <li><strong>list item 4</strong> with silly link to <a href=”/action/edit/Silly.pdf_silly.pdf” class=”new” title=”Silly.pdf silly.pdf”>silly.pdf silly.pdf</a></li>
  <li><a href=”contains.php”>支持火箭</a>,支持MM!</li>
 </ol>
</div>
jquery代码
//获取第一个list item
$(‘#jqdt ol li:eq(0)’)
//等价于
$(‘#jqdt’).find(‘li:eq(0)’) //以下同
//获取所有偶数行的list item
$(‘#jqdt ol li:even’)
//获取索引小于3的list item
$(‘#jqdt ol li:lt(3)’)
//获取所有li中css不为groof的list item
$(‘#jqdt ol li:not(.groof)’)
//获取P标记下所有超连接属性值以’#’打头的元素
$(‘p a[@href*=#]’)
//获取所有code元素和css为groof的li元素的集合
$(‘#jqdt code, li.groof’)
//先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素
$(‘#jqdt ol .groof > strong’)
//首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为’pdf’结尾的一级子节点
$(‘#jqdt ol li + li > a[@href$=pdf]’)
//找到所有已隐藏的span元素
$(‘span:visible’)
//找到超连接中包含火箭字样的元素
$(‘li a:contains(“火箭“)’)
 
注:
$(‘#jqdt ol.groof > strong’) 其中的>代表只访问下一级子节点中包含strong的元素,
如果改为 $(‘#jqdt ol.groof strong’) 则访问所有下级子节点中的strong元素,包括子节点的子节点等。 

 3).
常用的自定义选择器
  :eq(0) 选择索引等于0也就是第一个元素
  :gt(4) 选择所有索引大于4的元素
  :lt(4) 选择所有索引小于4的元素
  :first 等价于 :eq(0)