jquery选择器集锦

一，基本选择器：

1 2 3 4

$("#txtName");   $("#txt\\#b");//获取id为 txt#b的元素，\\为转义符 $(".className"); $("div"); $(div,span,p.className);

 

二，层次选择器：

1 2 3 4

$("div span"); // 选取div里所有的后代span元素。 $("div>span");  //选取div下的span子元素 $(".one+div"); //选取class为one的下一个div同辈元素。== $(".one").next("div"); $("#two~div"); //选取id为two的元素后的所有div同辈元素。== $("#two").nextAll("div"); 与siblings()的区别：siblings()与前后位置无关，只要是同辈节点都能匹配。

 

三，过滤选择器：

1，基本过滤选择器：

1 2 3 4 5 6 7 8 9 10 11

$("div:first"); //选取所有div元素中的第一个。 $("div:last"); $("input:not(.myClass)"); //选取class不是myClass的input元素。 $("input:even"); //选取索引是偶数的input元素。 $("input:odd"); $("input:eq(0)"); // 选取索引是0的input元素。 $("input:gt(1)"); $("input:lt(2)"); $(":header"); //选取所有标题元素，如h1, h2,h3 $("div:animated"); // 选取所有正在执行动画的div元素。 $(":focus");   // 选取当前获取焦点的元素。

 

2，内容过滤选择器：

1 2 3 4

$("div:contains('我')"); //选取含有文本"我"的div元素。 $("div:empty");  //选取不包含子元素或文本的空元素。 $("div:has(p)");  //选取含有p元素的div元素。 $("div:parent");  //选取含有子元素或文本的元素。

 

3，可见性过滤选择器：

1 2	$(":hidden"); //选取隐藏元素，包括hidden元素，display:none元素，visibility:hidden元素。 $(":visible"); //选取所有可见元素

 

4，属性过滤选择器：

1 2 3 4 5 6 7 8 9

$("div[value]"); //选取拥有属性value的div元素。 $("div[title=hello]"); // 选取属性title的值等于hello的div元素 $("div[title!=hello]"); $("div[title^=hello]"); //选取属性title的值以hello开头的div元素。 $("div[title$=hello]");  //选取属性title的值以hello结束的div元素。 $("div[title*=hello]");  //选取属性title的值含有hello的div元素。 $("div[title|='en']");  //选取属性title等于en或以en为前缀(后跟连字符-)的div元素。 $("div[title~=hello]");  // 选取属性title用空格分隔的值中包含字符hello的div元素。 $("div[id][title$=zy]"); //选取含有id属性，并且title属性值以zy结尾的div元素。

 

5，子元素过滤选择器，注意这里的索引值是从1开始的。

1 2 3 4 5 6

$("div:nth-child(2)");  // 选取每个div父元素下的第二个子元素。 $("div:nth-child(even)");  // 选取每个div父元素下索引值时偶数的元素。 $("div:nth-child(3n+1)");  // 选取每个div父元素下索引值为3n+1的元素，n从1开始。 $("ul li:first-child"); //选取每个ul下的第一个li子元素。 $("ul li:last-child"); //选取每个ul下的最后一个li子元素。 $("ul li:only-child"); // 如果li是ul中的唯一子元素，则返回，否则为空。

 

6，表单对象属性过滤选择器：

1 2 3 4

$("div :enabled"); //选取div内所有可用的后代元素，注意有空格。 $("div :disabled"); $("input:checked"); //选取所有被选中的input元素，注意没有空格。 $("select :selected");  //获取下拉框中被选中的项，注意有空格。

 

四，表单选择器：

1 2 3 4 5 6 7 8 9 10 11

$(":input");  //选取所有<input>,<textarea>,<select>,<button>元素。 $(":text"); //选取所有的单行文本框。 $(":password"); $(":radio"); $(":checkbox"); $(":submit"); $(":image"); $(":reset"); $(":button"); $(":file"); $(":hidden");

 

这些选择器可组合运用。