jQuery选择器_程序人生

admin

2023-08-02 15:51:46

0次

不会用选择器，望元素兴叹，难受的要死！在此全面的记录一遍。看完就彻底知之了！
jquery的选择器分为以下几类

基本选择器

层次选择器

过滤选择器

表单选择器

选择器	描述	示例
#id	根据id匹配一个元素	$(\”#test\”)选取id为test的元素
.class	根据类名匹配元素	$(\”.test\”)选取类名为test的元素集合
element	根据标签名匹配元素	$(\”p\”)选取所有的元素
*	匹配所有元素	$(\”*\”)选取所有元素
selector1, selector2, …., selectN	将每一个选择器匹配到的元素合并到一起返回	$(\”div, span, p.myCalss\”)选取所有 , 和拥有class为myClass的标签的一组元素

选择器	描述	示例
$(\”ancestor descendant\”)	选取ancestor元素里所有的descendant（后代）元素	$(\”div span\”)选取里所有的后代元素
$(\”parent > child\”)	选取子元素	$(\”div > span\”)选取元素下元素名是的子元素
$(\”prev + next\”)	选取紧接在prev元素后的next元素	$(\”.one + div\”)选取class为one的下一个同辈元素
$(\”prev~siblings\”)	选取pre元素之后的所有siblings元素	$(\”#two~div\”)选取id为two的元素后面的所有同辈元素

前两种常用，后两种不常用，因为有更简单的方式替代
$(\”.one + div\”) 等价于 $(\”.one\”).next(\”div\”)
$(\”#pre~div\”) 等价于 $(\”#pre\”).nextAll(\”div\”) 选取之后的同辈元素

另外，有一个选取同辈元素的方法，但是选取全部，无论前后位置
$(\”#pre\”).siblings(\”div\”)

主要通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即以一个冒号开头

选择器	描述	示例
:first	选取第一个元素	$(\”div:first\”)选取第一个div元素
:last	选取最后一个元素	$(\”div:last\”)选取最后一个div元素
:not(selector)	去除所有与给定选择器匹配的元素	$(\”input:not(.myClass)\”)选取class不是myClass的所有input元素
:even	选择索引是偶数的所有元素，索引从0开始	$(\”input:even\”)选取索引是偶数的input元素
:odd	选择索引是奇数的所有元素，索引从0开始	$(\”input:odd\”)选取索引是奇数的input元素
:eq(index)	选择索引等于index的元素，索引从0开始	$(\”input:eq(1)\”)选取索引等于1的input元素
:gt(index)	选择索引大于index的元素，索引从0开始	$(\”input:gt(1)\”)选取索引大于1的input元素
:lt(index)	选择索引小于index的元素，索引从0开始	$(\”input:lt(1)\”)选取索引小于1的input元素
:header	选取所有的标题元素，例如h1,h2,h3等	$(\”:header\”)选取网页中所有的h1, h2, h3 …
:animated	选取当前正在执行动车的所有元素	$(\”div:animated\”)选取正在执行动车的div元素
:focus	选取当前获取焦点的元素	$(\”:focus\”)选取当前获取焦点的元素

选择器	描述	示例
:contains(text)	选取含有文本内容为\”text\”的元素	$(\”div:contains(\’我\’\”)选取含有文本“我”的div元素
:empty	选取不包含子元素或文本的空元素	$(\”div:empty\”)选取不包含子元素（包括文本元素）的div空元素
:has(selector)	选取含有选择器所匹配的元素的元素	$(\”div:has(p)\”)选取含有p元素的div元素
:parent	选取含有子元素或文本的元素	$(\”div:parent\”)选取拥有子元素（包括文本元素）的div元素

选择器	描述	示例
:hidden	选取所有不可见元素	$(\”:hidden\”)选取所有不可见元素，包括, 和等元素。如果只想选取input元素，可以使用$(\”input:hidden\”)
:visible	选取所有可见元素	$(\”div:visible\”)选取所有可见的div元素

选择器	描述	示例
[attribute]	选取拥有此属性的元素	$(\”div[id]\”)
[attribute=value]	选取属性的值为value的元素	$(\”div[title=test]\”)
[atrribute!=value]	选取属性的值不等于value的元素	$(\”div[title!=test]\”)
[atrribute^=value]	选取属性的值以value开始的元素	$(\”div[title^=test]\”)
[atrribute$=value]	选取属性的值以value结束的元素	$(\”div[title$=test]\”)
[atrribute*=value]	选取属性的值含有value的元素	$(\”div[title*=test]\”)
[atrribute竖线=value]	选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素	$(\”div[title竖线=test]\”)
[atrribute~=value]	选取属性用空格分隔的值中包含一个给定值的元素	$(\”div[title~=test]\”)
[attribute][attribute2][attributeN]	用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围	$(\”div[id][title$=test]\”)

选择器	描述	示例
:nth-child(index/ even/odd/equation)	选取每个父元素下的第index个子元素或者奇偶元素（index从1开始）	$(\”div.one :nth-child(2)\” 每个class为one的div父元素下的第2个子元素
:first-child	选取每个父元素的第1个子元素	$(\”div.one :first-child\”) 每个class为one的div父元素下的第1个子元素
:last-child	选取每个父元素的最后一个子元素	$(\”div.one :last-child\”) 每个class为one的div父元素下的最后一个子元素
:only-child	如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果含有其它元素，则不会被匹配	$(\”div.one :only-child\”) 如果class为one的div父元素下只有一个子元素，匹配

为了更加灵活操作表单，专门加入了表单选择器

选择器	描述	示例
:input	选取所有的input、textarea、select、button	$(\”#form1 :input\”)
:text	选取单行文本框	$(\”:text\”)
:password	选取密码框	$(\”:password\”)
:radio	选取单单选框	$(\”:radio\”)
:checkbox	选取多选框	$(\”:checkbox\”)
:submit	选取提交按钮	$(\”:submit\”)
:image	选取图像按钮	$(\”:image\”)
:reset	选取重置按钮	$(\”:reset\”)
:button	选取按钮	$(\”:button\”)
:file	选取上传域	$(\”:file\”)
:hidden	选取不可见元素	$(\”:hidden\”)