jQuery选择器探究:语法汇总

首先概略汇总一下jQuery常见选择器,大概分为这么几类:基本选择器、层次选择器、过滤选择器。基本选择器包含id/class/tag等,层次选择器包含祖孙、父子、兄弟、同级选择器四种,过滤选择器比较多样化,有根据当前元素在同级元素集合中的位置选择的,有根据相对父元素的子元素选择的,有根据属性选择的,也有根据内容选择的,还有表单元素等多种过滤选择器。


一 基本选择器
ID选择器 #id
类选择器 .class
标签选择器 tag,*
群组选择器 s1,s2,s3


二 层次选择器
祖孙选择器 ancestor descendant
父子选择器 parent>child
兄弟选择器 prev+next
同级选择器 prev~siblings


三 过滤选择器
位置过滤选择器
:first
:last
:even
:odd
:nth(index)
:eq(index)
:gt(index)
:lt(index)
子元素过滤选择器
:first-child
:last-child
:nth-child(index/even/odd/equation)
:only-child
属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attribute|=value]
[attribute~=value]
内容过滤选择器
:contains(text)
:empty
:parent
可见性过滤选择器
:hidden
:visible
表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:reset
:button
:image
:file
:hidden
其他过滤选择器
:has(selector)
:not(selector)
:header
:animated

:focus


jquery基本选择器

jquery基本选择器,包括id选择器、class选择器、标签选择器、通配符选择器,同时配合选择器的空格、逗号等语法,可以实现大部分需要的选择功能。 
代码如下:

$("#myid");                     //根据id获取元素,等价于document.getElementById(),
$("#myid\\#b");                 //根据id为myid#b的元素,对于属性中含有.#([等特殊字符的要转义获取
$("label");                     //根据标签名称获取元素列表,等价于document.getElementByTagName(),
$(".myclass");                  //根据class获取元素列表
$("div.myclass");               //根据class获取元素列表
$("label,div,input");           //根据元素并集
$("body *");                     //*获取所有元素,空格表示后代元素


猜你喜欢

转载自blog.csdn.net/qq_41328247/article/details/80060532