jQuery选择器
一、基本分类
jQuery选择器大致可以分为两类,基本选择器和过滤选择器,总体结构体系如下:
二、基本选择器
2.1 CSS选择器
CSS选择器(链接:http://www.cnblogs.com/qinwang913/p/3443766.html)
2.1.1 标签选择器
2.1.2 ID选择器
2.1.3 类选择器
例: $(".t").css("border","2px solid blue");
2.1.4 通用选择器
2.1.5 群组选择器
格式:$("selector,selector2,......,selectorN")
例: $("div,span,p.styleClass").css("border","2px solid blue");
2.2 层级选择器
在HTML方档中,每个元素总是处在DOM节点树上的某个位置,文档层次结构中元素之间总是存在着某种层级关系。
2.2.1 子元素选择器
2.2.2 后代选择器
2.2.3 紧邻同辈选择器
2.2.4 相邻同辈选择器
例:$("input~p").css("color","red");
2.3 表单域选择器
表单域指网页中的input,textareaselect,button元素。jQuery 表单域选择器专门用于从文档中选择表单域。
2.3.1 :input选择器
用于选择所有input,textareaselect,button元素。
2.3.2 :text选择器
用于选择所有单行文本框(<input type="text"/>)。
2.3.3 :password选择器
用于选择所有密码框(<input type="password"/>)。
2.3.4 :radio选择器
用于选择所有单选按钮(<input type="radio"/>)。
2.3.5 :chckbox选择器
用于选择所有复选框(<input type="chckbox"/>)。
2.3.6 :file选择器
用于选择所有文件域(<input type="file"/>。
2.3.7 :image选择器
用于选择所有图像域(<input type="image"/>)。
2.3.8 :hidden选择器
用于选择所有不可见元素(<input type="hidden"/>)。
2.3.9 :button选择器
用于选择所有按钮(<input type="button"/>和<button>···</button>)。
2.3.10 :submit选择器
用于选择所有提交按钮(<input type="submit"/>和<button>···</button>)。
2.3.11 :reset选择器
用于选择所有重置按钮(<input type="reset"/>)。。
三、过滤选择器
过滤选择器可以使用元素的索引值,内容,属性,子元素位置,表单域属性以及可见性作为筛选条件获取相关元素。
3.1简单过滤选择器
根据索引值对元素进行筛选,类似于CSS的伪类选择器,以冒号(:)开头;并且要和另一选择器一起使用。
3.1.1 :first选择器
例: $("td:first").css("border","2px solid blue");
3.1.2 :last选择器
3.1.3 :odd选择器
3.1.4 :even选择器
3.1.5 :eq()选择器
格式:$(":selector:eq(index)),index 为指定元素在selector集合中的索引值(从0开始计数)
3.1.6 :gt()选择器
格式:$(":selector:gt(index)),index 为指定元素在selector集合中的索引值(从0开始计数),只有索引值大于此值的元素才会包含在查询结果中。
3.1.7 :lt()选择器
格式:$(":selector:lt(index)),index 为指定元素在selector集合中的索引值(从0开始计数),只有索引值小于此值的元素才会包含在查询结果中。
3.1.8 :not选择器
例:$("td:not(:first,:last)").css("background","#FCF")
3.1.9 :header选择器
3.1.10 :animated选择器
3.2内容过滤选择器
3.2.1:contains()选择器
格式:$("selector:contains(text)")
3.2.2: has()选择器
格式:$("selector1:has(selector2)"),selector1,selector2为任意有效的选择器。
3.2.3 :empty选择器
3.2.4 :parent选择器
用于选择包含子元素或者文本的所有空元素,与:empty选择器作用相反。
3.3简单过滤选择器
在HTML文档中,元素的开始标记中通常包含多个属性,根据各种属性对由选择器查询到的元素进行过滤。
语法格式:“选择器[属性过滤选择器]”,可根据是否包含指定属性或根据属性值从查询到的元素进行筛选。
3.3.1 包含属性选择器
3.3.2 属性等于选择器
格式:$("selector[attribute=value]")
例:$("input[name=accept]").attr("checked","true");
3.3.3 属性包含选择器
格式:$("selector[attribute*=value]")
例:$("input[name*='news']").val("name 中包含news 的元素");
3.3.4 属性包含单词选择器
格式:$("selector[attribute~=value]")
例:$("input[name~='news']").val("name 中包含news单词的元素");
3.3.5 属性不等于选择器
用于选择不包含给定属性,或者包含指定属性但该属性不等于某个值的所有元素。
格式:$("selector[attribute!=value]")
3.3.6 属性开始选择器
格式:$("selector[attribute^=value]")
3.3.7 属性结尾选择器
格式:$("selector[attribute$=value]")
3.3.8 复合属性选择器
格式:$("selector[selector1][selector2]....[selectorN]")
例:$("input[id][name^='news’]").val(“选择包含id属性且name属性以news开头的文本框”);
3.4子元素过滤选择器
子元素过滤选择器必须与某个选择器一起使用,得到一个父元素数组,然后再按照子元素过滤选择器指定的索引值或规则进一步筛选出部分子元素。
3.4.1 :first-child选择器
例:$("ul:first-child").css("text-decoration","underline");
3.4.2 :last-child选择器
3.4.3 :nth-child选择器
格式:$("selector:nth-child(index/even/odd/equation)")
3.4.4 :only-child选择器
3.5表单过滤选择器
3.5.1:checked选择器
选择器可指定要查找的元素类型,可以是input(单选按钮和复选框),:radio(单选按扭) :checkbox(复选框)
3.5.2:enabled选择器
3.5.3:disabled选择器
3.5.4:selected选择器
3.6可见性过滤选择器
如果某元素及其父元素在文档中占用空间,则认为该元素为可见;反之,则此元素不可见。
3.6.1:hidden选择器
3.6.1:visible选择器
四、总结
至此,关于CSS选择器和jQuery选择器的知识小结终于结束了,很释然,很快乐,给自己的知识作个整理,也将这些分享给每个需要的人,大家一起加油努力。
JQuery选择器大全
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素,返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
层叠选择器:
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器:
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("input:not(:checked) + span")
过滤掉:checked的选择器的所有的input元素
$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:lt(4)") 选择td元素中序号小于4的所有的td元素
$(":header") 选择h1、h2、h3之类的
$("div:animated") 选择正在执行动画效果的元素
内容过滤选择器:
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器:
$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
属性过滤选择器:
$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器:
$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器:
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点
例子:找到表单中所有的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("A>B") 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]