Jquery选择元素小结(转载)
2010-06-25 11:27 爱研究源码的javaer 阅读(556) 评论(0) 编辑 收藏 举报// //取匹配元素的第一个子元素
// $("ul li:first-child").each(function(){
// $("span").append("匹配元素内容"+$(this).text()+"<br/>");
// });
// //取匹配元素的最后一个子元素
// $("ul li:last-child").each(function(){
// $("span").append("匹配元素内容"+$(this).text()+"<br/>");
// });
// //取匹配元素的第二个子元素，索引从1开始
// $("ul li:nth-child(2)").each(function(){
// $("span").append("匹配元素内容"+$(this).text()+"<br/>");
// });
// //取匹配元素的偶数个子元素，索引从1开始，取2，4，6
// $("ul li:nth-child(even)").each(function(){
// $("span").append("匹配元素内容"+$(this).text()+"<br/>");
// });
// //取匹配元素的奇数个子元素，索引从1开始，取1，3，5
// $("ul li:nth-child(odd)").each(function(){
// $("span").append("匹配元素内容"+$(this).text()+"<br/>");
// });
// //取匹配元素的第3的整数倍个子元素，索引从1开始，取3,6
// $("ul li:nth-child(3n)").each(function(){
// $("span").append("匹配元素内容"+$(this).text()+"<br/>");
// });
//
// //取匹配元素的第3的整数倍+1个子元素，索引从1开始，取0，4，7
// $("ul li:nth-child(3n+1)").each(function(){
// $("span").append("匹配元素内容"+$(this).text()+"<br/>");
// });
// //取匹配元素的第3的整数倍-1个子元素，索引从1开始，取2，5
// $("ul li:nth-child(3n-1)").each(function(){
// $("span").append("匹配元素内容"+$(this).text()+"<br/>");
// });
//匹配只有一个子元素
$("span").append("匹配元素内容"+$("ul li:only-child").text()+"<br/>");
})
</script>
</head>
<body>
<span></span>
<ul>
<li>
John
</li>
<li>
Karl
</li>
<li>
Brandon
</li>
<li>
miaojingwei
</li>
<li>
KJ
</li>
</ul>
<ul>
<li>
Glen
</li>
<li>
Tane
</li>
<li>
Ralph
</li>
</ul>
<ul>
<li>
独生子
</li>
</ul>
</body>
</html>
转自:http://kb.cnblogs.com/a/1564363/
属性
1、[attribute]
匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
返回值 Array<Element>
参数
attribute (String) : 属性名
示例：
$(document).ready(function() {
var eleArr = $("div[id]"); //查找所有含有 id 属性的 div 元素
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.innerHTML);
}
});
2、[attribute=value]
匹配给定的属性是某个特定值的元素
返回值 Array<Element>
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例：
$(document).ready(function() {
var eleArr = $("input[name='newsletter']"); //查找所有 name 属性是 newsletter 的 input 元素
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.value);
}
});
文档片段：
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
3、[attribute!=value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素。
此选择器等价于:not([attr=value])
要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
返回值 Array<Element>
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例：
$(document).ready(function() {
var eleArr = $("input[name!='newsletter']"); //查找所有 name 属性不是 newsletter 的 input 元素
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.value);
}
});
4、[attribute^=value]
匹配给定的属性是以某些值开始的元素
返回值 Array<Element>
参数
attribute (String) : 属性名
value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例：
$(document).ready(function() {
var eleArr = $("input[name^='newsletter']"); //查找所有 name 以 'news' 开始的 input 元素
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.value);
}
});
5、[attribute$=value]
匹配给定的属性是以某些值结尾的元素
返回值 Array<Element>
参数
attribute (String) : 属性名
value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例：
$(document).ready(function() {
var eleArr = $("input[name$='letter']"); //查找所有 name 以 'letter' 结尾的 input 元素
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.value);
}
});
6、[attribute*=value]
匹配给定的属性是以包含某些值的元素
返回值 Array<Element>
参数
attribute (String) : 属性名
value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例：
$(document).ready(function() {
var eleArr = $("input[name*='let']"); //查找所有 name 包含 'letter' 的 input 元素
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.value);
}
});
7、[selector1][selector2][selectorN]
复合属性选择器，需要同时满足多个条件时使用。
返回值 Array<Element>
参数
selector1 (Selector) : 属性选择器
selector2 (Selector) : 另一个属性选择器，用以进一步缩小范围
selectorN (Selector) : 任意多个属性选择器
示例：
$(document).ready(function() {
var eleArr = $("input[id][name$='vil']"); //找到所有含有 id 属性，并且它的 name 属性是以 vil 结尾的
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.value);
}
});
七、子元素
1、:nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素
对比：':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
使用方式:
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
返回值 Array<Element>
参数
index (Number) : 要匹配元素的序号，从1开始
示例：
$(document).ready(function() {
var eleArr = $("ul li:nth-child(2)"); //在每个 ul 查找第 2 个li
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.innerHTML);
}
});
文档片段：
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
2、:first-child
匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
返回值 Array<Element>
示例：
$(document).ready(function() {
var eleArr = $("ul li:first-child"); //在每个 ul 查找第 1 个li
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.innerHTML);
}
});
3、:last-child
匹配最后一个子元素
':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
返回值 Array<Element>
示例：
$(document).ready(function() {
var eleArr = $("ul li:last-child"); //在每个 ul 中查找最后一个 li
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.innerHTML);
}
});
4、:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
返回值 Array<Element>
示例：
$(document).ready(function() {
var eleArr = $("ul li:only-child"); //在 ul 中查找是唯一子元素的 li
for (var i = 0; i < eleArr.length; i++) {
var ele = eleArr[i];
alert(ele.innerHTML);
}
转自：http://hi.baidu.com/%D0%A1%C2%EC%D2%CF_google/blog/item/9a41e87e9fd4330429388ac4.html
