一，基本选择器：
|
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"); |
这些选择器可组合运用。