从零开始学习jQuery (二) 万能的选择器(4)

注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.

  查找所有不可见的 tr 元素:$("tr:hidden")  
:visible   匹配所有的可见元素   查找所有可见的 tr 元素:$("tr:visible")  
6.属性过滤器 Attribute Filters 名称   说明   举例  
  匹配包含给定属性的元素   查找所有含有 id 属性的 div 元素:
$("div[id]")
 
  匹配给定的属性是某个特定值的元素   查找所有 name 属性是 newsletter 的 input 元素:
$("input[name='newsletter']").attr("checked", true);
 
  匹配给定的属性是不包含某个特定值的元素   查找所有 name 属性不是 newsletter 的 input 元素:
$("input[name!='newsletter']").attr("checked", true);
 
  匹配给定的属性是以某些值开始的元素   $("input[name^='news']")  
  匹配给定的属性是以某些值结尾的元素   查找所有 name 以 'letter' 结尾的 input 元素:
$("input[name$='letter']")
 
 

匹配给定的属性是以包含某些值的元素

 

查找所有 name 包含 'man' 的 input 元素:
$("input[name*='man']")

 
  复合属性选择器,需要同时满足多个条件时使用。   找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的:
$("input[id][name$='man']")
 
7.子元素过滤器 Child Filters 名称   说明   举例  
 

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

  在每个 ul 查找第 2 个li:
$("ul li:nth-child(2)")
 
:first-child  

匹配第一个子元素

':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

  在每个 ul 中查找第一个 li:
$("ul li:first-child")
 
:last-child  

匹配最后一个子元素

':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

  在每个 ul 中查找最后一个 li:
$("ul li:last-child")
 
:only-child  

如果某个元素是父元素中唯一的子元素,那将会被匹配

如果父元素中含有其他元素,那将不会被匹配。

  在 ul 中查找是唯一子元素的 li:
$("ul li:only-child")
 
8.表单选择器 Forms
名称   说明   解释  
:input   匹配所有 input, textarea, select 和 button 元素   查找所有的input元素:
$(":input")
 
:text   匹配所有的文本框   查找所有文本框:
$(":text")
 
:password   匹配所有密码框   查找所有密码框:
$(":password")
 
:radio   匹配所有单选按钮   查找所有单选按钮  
:checkbox   匹配所有复选框   查找所有复选框:
$(":checkbox")
 
:submit   匹配所有提交按钮   查找所有提交按钮:
$(":submit")
 
:image  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxzww.html