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