1、基本选择器
$('#id') ,
$('.class') ,
$('element')
注: $('*').css("background","#bbffaa") 表示 改变所有元素 的背景色
2、层次选择器
$("div span") --- 选取<div>里的所有的<span>元素
$("div>span") --- 选取<div>元素下,元素名为<span>的子元素
$(".one + div") --- 选取class为one的 下一个<div>元素 <==> $(".one").next("div")
$("#two ~ div")---选取id为two的后面 所有同辈 <div>元素 <==> $("#two").nextAll("div")
注: $("#two").siblings ("div") 选取id为two的所有同辈 <div>元素 (没有前后限定)
3、过滤选择器 (以:开头)
1)基本过滤选择器
:first ---- 例 $("div:first") 选取所有<div>元素中的第一个<div>元素
:last ---- 例 $("div:last") 选取所有<div>元素中的第后一个<div>元素
:not(selector) ----例$("input:not(.myclass)") 选取class不是myclass的所有<input>元素
:even 选取索引为偶数的所有元素(索引从0开始) 例$("input:even") 选取索引为偶数的<input>元素
: odd 选取索引为奇数的所有元素(索引从0开始)
:eq(index) 选取索引等于 index的元素(index 从0开始)
:gt(index) 选取索引大于 index的元素(index 从0开始)
:lt(index) 选取索引小于 index的元素(index 从0开始)
:header 选取所有标题元素 如:h1,h2,h3 等。 例$(":header") 选取网页中所有标题元素 如:h1,h2,h3 .等
:animated 选取当前正在执行动画的所有元素。例$("div:animated") 选取正在执行动画的<div>元素
2)内容过滤选择器
:contains(text) 选取文本内容包含text的元素。 例$("div:contains('我')")选取文本包含“我”的<div>元素
:empty 选取不包含子元素或文本的空元素。 例$("div:empty")选取不包含子元素(包含文本元素)的<div>元素
:has(selector) 选取含有选择器所匹配的元素的元素。 例$("div:has(p)")选取含有<p>元素的<div>元素
: parent 选取含有子元素或者文本的元素。例$("div:parent") 选取拥有子元素(包含文本元素)的<div>元素
3)可见性过滤选择器
:hidden 选取所有不可见的元素
$(":hidden") 选取所有不可见元素,包括<input type="hidden" />;
<div style="display:none;">和<div style="visibility:hidden;">等元素。
$("input:hidden").show(3000) 选取所有不可见的<input>元素,让它显示3000毫秒
:visible 选取所有可见的元素。 例$("div:visible") 选取所有可见的<div>元素
4)属性过滤选择器 ([..])
[attribute] 选取拥有此属性的元素。 例$("div[id]") 选取拥有id属性的<div>元素
[attribute=value] 选取属性值为value的元素。 例$("div[title=test]") 选取属性title为test的<div>元素
[attribute!=value] 选取属性值不等于value的元素。
例$("div[title!=test]")选取属性title不等于test的<div>元素.(注意:没有属性title的<div>也会被选取 )
[attribute^ = value] 选取属性值以value开头 的元素。
[attribute$ = value] 选取属性值以value结束 的元素。
[attribute* = value] 选取属性值含有value 的元素。
5)子元素过滤选择器
:first-child 选取父元素的第一个子元素
:last-child 选取父元素的最后一个子元素
:only-child 如果某元素是它父元素的唯一子元素,那么它将会匹配。如果还有其他子元素,则不匹配。
:nth-child (even ) 选取每个父元素下的索引值为偶 数的子元素。
:nth-child (odd ) 选取每个父元素下的索引值为奇 数的子元素。
:nth-child (2 ) 选取每个父元素下的索引值为2 的子元素。
:nth-child (3n ) 选取每个父元素下的索引值为3的倍数 的子元素。(n从0开始 )
:nth-child (3n+1 ) 选取每个父元素下的索引值为(3n+1) 的子元素。(n从0开始 )
注意: :nth-child(index) index 是从1开始 ;
:eq(index) index 是从0开始 ; 同理,:first和:first-child,:last和:last-child 类似。
6)表单属性过滤选择器
:enabled 选取所有可用元素。
:disabled 选取所有不可用元素。
:checked 选取所有被选中的元素(单选框,复选框)。
:selected 选取所有被选中的选项元素(下拉列表)。
例: $("#from1 input:enabled ").val("hello..."); 改变表单内可用 <input>元素的值。
$("#from1 input:disabled ").val("hello..."); 改变表单内不可用 <input>元素的值。
$("input :checked ").length ; 获取多选框选中的个数
$("select :selected ").text(); 获取下拉列表选中的内容。
4、表单选择器
:input 选取所有<input>,<textarea>.<select>.<button>元素
:text 选取所有单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有不可见元素
在选择器中可以使用“ \\ ” 对特殊符号进行转义 ;例如 . /# 等等
区别: $(".test :hidden") 中间多一个空格 ---- 表示选取class为test的元素里面的 隐藏元素。 $(".test:hidden") ---- 表示选取隐藏的class为test的元素。
转自-http://hb-keepmoving.iteye.com/blog/972459