1. :empty选择器,选择所有的没有子节点且内容为空的节点,就是说,如果含有子节点且子节点为空,该节点不会被选中,如果没有子节点,但是当前节点内容不为空,一样不会被选中。(或者说文本内容可以看作是文本节点)例如
<tr>
<td>a<td>
<td><p></p><td>
<td></td>
</tr>
在jQuery中使用$(":empty")选择器,仅<td></td>被选中
2. contains(text),选择所有包括指定text的元素,要特别提醒一点是,单独使用$(:contains(text))会发生意想不到的结果,例如以下情况,整个页面都会变成红色。<p></p>是包括在<body></body>中的文本。
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":contains(p)").css("background-color","red");
});
</script>
</head>
<body>
<p></p>
</body>
</html>
3.has选择器。在例子中,整个页面都变成红色,匹配含有选择器所匹配的元素的元素,所以匹配到道德元素是selector的父元素
:has(selector) | 匹配含有选择器所匹配的元素的元素 | 给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test"); |
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body:has(.intro)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
4. :parent选择器,匹配所有包含子元素或者内容不为空的元素,则<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>两列变为红色,第三列不变色,因为第三列不含有子元素或者内容。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:parent").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p></p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>
5.属性选择器:包含指定属性[attr],指定属性等于,不等于,开头,结尾,任意位置,都可以进行筛选,也可以使用符合属性条件进行筛选。
[attributeFilter1][attributeFilter2][attributeFilterN] | 复合属性选择器,需要同时满足多个条件时使用。 | 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的: $("input[id][name$='man']") |
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1:[class = 'intro']").css("background-color","red");
$("p:has(.intro)").css("background-color","red");
});
</script>
</head>
<body>
<h1 class="intro">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>
$("h1:[class = 'intro']").css("background-color","red");
$("p:has(.intro)").css("background-color","red");
这两句话区别出了:has和属性选择器的区别,has选出包含指定属性选择器的父元素,属性选择器选择出包含指定属性的元素,所以Welcome to My Homepage变为红色,My name is Donald不变色。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a:[href$=.org][class='intro']").css("background-color","red");
});
</script>
</head>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
<br />
<a href="http://www.google.com">Google.com</a>
<br />
<a href="http://www.wikipedia.org" class="intro">wikipedia.org</a>
</body>
</html>
只有wikipedia.org变成红色。
6.子元素选择器
名称 | 说明 | 举例 |
:nth-child(index/even/odd/equation) | 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 可以使用: | 在每个 ul 查找第 2 个li: $("ul li:nth-child(2)") |
:first-child | 匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找第一个 li: $("ul li:first-child") |
:last-child | 匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找最后一个 li: $("ul li:last-child") |
:only-child | 如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。 | 在 ul 中查找是唯一子元素的 li: $("ul li:only-child") |
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#choose li:nth-child(1)").css("background-color","red");
$(".abc li:only-child").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
<ul class="abc">
<li>abc</li>
</ul>
</body>
</html>
运行结果:<li>abc</li> 和<li>Goofy</li>均为红色标出。
PS:以下语句均可以实现<li>abc</li> 红色标出。
$(".abc li:only-child").css("background-color","red");
$(".abc li:first-child").css("background-color","red");
$(".abc li:last-child").css("background-color","red");
更多的内容参见:http://www.blogjava.net/ywj-316/archive/2010/01/21/310340.html