jquery选择器大全

一,基本的选择器:

$("#myELement")           选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素

$("div")                  选择所有的div标签元素,返回div元素数组

$(".myClass")             选择使用myClass类的css的所有元素

$("*")                    选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")

$("div,span,p.myClass")  选择所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

二,层次的选择器:

$("div span")                 选择<div>里所有的<span>元素

$("div>span")                选择<div>元素下元素名是<span>的子元素

$(".one+div")                选择class为one的下一个<div>同辈元素

$("#two~div")               选择id为two的元素后面的所有<div>元素

三,过滤选择器 :

基本过滤的选择器

$("div:frist")                   选择所有的<div>元素中第一个<div>元素

$("div:last")                选择所有<div>元素中最后一个<div>元素

$("input:not(.myClass)")   选择class不是myClass的<input>元素

$("input:event")          选择索引为偶素的<input元素>

$("input:odd")         选择索引为偶素的<input元素>

$("input:eq(1)")          选择索引等于1的<input>元素

$("input:gt(1)")              选择索引大于1的<input>元素

$("input:lt(1)")          选择索引小于1的<input>元素

$(":header")               选择网页中所有的<h1>,<h2>,<h3>...

$("div:animated")        选择正在执行动画的<div>元素

$(":focus")          选择当前获取焦点的元素       

内容过滤的选择器

$("div:contains('我')")       选择含有文本“我”的<div>元素

$("div:empty")        选择不包含子元素(包括文本元素)的<div>空元素

$("div:has(p)")        选择含有<p>元素的<div>元素

$("div:parent")        选择拥有子元素(包括文本元素)的<div>元素

可见性过滤的选择器

$(":hidden")         选择所有不可见的元素,包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想选取<input>元素,可以使用$("input:hidden")

$(":visible")         选择所有可见的<div>元素

属性过滤的选择器

$("div[id]")           选择拥有属性id的<div>元素

$("div[title=test]")     选择属性title为"test"的<div>元素

$("!div[title=test]")      选择属性title不等于"test"的<div>元素(注意这里没有title属性的<div>元素也会被选取)

$("div[title^=test]")       选择属性title以"test"开始的<div>元素

$("div[title$=test]")     选择属性title以"test"结束的<div>元素

$("div[title*=test]")     选择属性title含有"test"的<div>元素

$("div[title|="en"]")     选择属性title等于en或以en为前缀(该字符串后跟一个连字符'_')的元素

$("div[titlt~="uk"]")     选择属性title用空格分隔的值中包含字符uk的元素

$("div[id][title$='test']")  选取拥有属性id,并且属性title以"test"结束的<div>元素

子元素过滤选择器

$("ul li:nth-child(2)")      选择ul标签内它的第2个li标签

$(":eq(index)")只匹配一个元素,而$(":nth-child(index)")将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始算起的

$("ul li:first-chlid")      选择每个<ul>中第一个<li>元素

$("ul li:last-child")      选择每一个<ul>中最后一个<li>元素

$("ul li:only-child")       在<ul>中选取是唯一子元素的<li>元素

表单对象属性过滤选择器

$("#form1:enabled");    选择id为"form1"的表单内的所有可用元素

$("#form2:disabled")     选择id为"form2"的表单内的所有不可用元素

$("input:checked");       选择所有被选中的<input>元素

$("select option:selected");  选择所有被选中的选项元素

四,表单选择器:

$("input")           选择所有<input>、<textarea>、<select>和<botton>元素

$(":test")           选择所有的单行文本框

$(":password")        选择所有的密码框

$(":radio")           选择所有的单选框

$(":checkbox")        选择所有的复选框

$(":submit")          选择所有的提交按钮

$(":image")           选择所有的图像按钮

$(":reset")            选择所有的重置按钮

$(":button")          选择所有的按钮

$(":file")            选择所有的上传域

$(":hidden")          选择所有的不可见元素

原文地址:https://www.cnblogs.com/geekjsp/p/5728582.html