jquery 选择器

CSS选择器详解

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34245749

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/keejun/blog/131222

本文详细介绍了CSS中的各类选择器，包括基本选择器、过滤选择器、内容选择器、可见性选择器、属性过滤选择器、层次选择器及表单选择器，并通过实例展示了它们的应用方式。

为什么80%的码农都做不了架构师？>>>

1.基本选择器：
  * :选择所有元素
  element:根据标签选取元素 如 $("p") 
  #id:根据元素ID选择
  .class:根据元素class选择
 但根据元素class属性值选择的效率较低，一般不采取
 我们可以在一次选择中，选择多个元素：
 $('h3,#top')/$('div,.sharp')
2.过滤选择器（可以附加在所有选择器的后面，在特定的过滤器来筛选元素）
    基本过滤选择器:
	:first  选择第1个元素  如$('p:first') / $('div:first')
	:last  选择最后的元素  如$('input:last')/$('p:last')
	:even  选择索引值为偶数的元素 如$('p:even')
	:odd   选择索引值为奇数的元素  $('p:odd')
	:eq(index) 选择索引值等于index /  :gt(index) 大于 / :lt(index) 小于  如：$('p:eq(4)')/$('input:gt(3)')
	:not(selector)  选择匹配元素之外的元素  如 $('p:not(#top)')
	:header 选择所有标题元素 $(':header')
	:animated 选择所有动画中的元素  $(':animated')
	子元素过滤选择器：
	:first-child 选择第一个子元素
	:last-child 选择最后的元素
	:only-child 选取唯一的子元素
	:nth-child(odd) 选取索引为奇数的元素
	:nth-child(even) 选取索引为偶数的元素
	:nth-child(index) 选取索引值为index的元素
	:nth-child(equation) 选取索引值符合equation的元素 如：$('p:nth-child(2n+1)') n取值为0、1....
  3.内容选择器
    :contains(text) 选取包含文本为text的元素
    :has(selector)	选取含有后代元素为selector的元素 如$('div:has(#top)')
    :parent 选取含有后代元素或文本的非空元素
    :empty  选取不包含后代元素或文本的空元素 如$('div:empty')	
	而input/br/img等天然地不包含后代元素文本。
  4.可见性的过滤选择器
    :hidden 选择不可见的元素 $("div:hidden")
	:visible 选取可见元素 $('p:visible')
  5.属性过滤选择器
    [attr] 选取含有attr属性的元素   如$('div[class]');
    [attr=value] 属性值为value的元素  如$('div[id=top]');
 	[attr!=value] 属性值不是为value元素
	[attr^=value] 选择以属性值开始的元素 
	[attr$=value]  以属性值结束的元素
	[attr*=value] 属性值包含有value的元素
	[attr~=value] 在以空格隔开的属性值中，有一个值为value的元素
  6.层次选择器 
    selector1 selector2 在selector1中选择为selector2的元素 $('body p')
	selector1>selector2 在selector1元素中子后代中选取为selector2的元素 $("body>p")
	selector1+selector2 在selector1后面的第一个兄弟中选择为selector2的元素 $("div+#top")
    selector1~selector2 在selector1中后面的兄弟元素中选择选取selector2	
  7.表单选择器
    :input 选取含input/textarea/select/button的元素  $('form:input')
	:text  选择含type为text的input元素
	:password 含password 的input元素
	:radio 含radio的input元素
	:image ...
	:file ....
	:checkbox  ...
	:button ....
	:submit ...
	:reset ...
    :enable   $('input:enable')
	:disable 选择不可用的元素 
	:checked 选取被选中的元素 
	:selected ...

转载于:https://my.oschina.net/keejun/blog/131222