代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript"><!--
$(function(){
$("#aContains").click(function(){
$("div:contains('hello')").each(function(){
$(this).css("background","red");
})
})
$("#aEmpty").click(function(){
$("div:empty").each(function(){
$(this).html("EmptyDIV");
})
})
$("#aHas").click(function(){
$("div:has(p)").each(function(){
$(this).css("background","red");
})
})
$("#aParent").click(function(){
$("div:parent").each(function(){
$(this).css("background","red");
})
})
})
// --></script>
</head>
<body>
<div id ="div1">
<p>hello word!</p>
</div>
<div id ="div2">
hello
</div>
<div id ="div3" height="20px">
</div>
<div id ="div4"></div>
<a href="#" id="aContains">設置內容包含“hello”的節點紅色背景顏色</a>
<a href="#" id="aEmpty">設置無內容的DIV內容設為EmptyDIV</a>
<a href="#" id="aHas">設置包含 p 節點的 div 節點紅色背景顏色</a>
<a href="#" id="aParent">設置包含子節點的 div 節點紅色背景顏色</a>
</body>
</html>
首先還是對本章的課外知識點進行說明下
1.element.css("attributeName","value")
描述：用於設置element的style，在例子中$(this).css("background","red");就是設置節點的background為red。
現在進入主題咯
1.$("TagName:contains('keyword')")
描述：用於獲取所有TagName節點裡包含keyword內容的節點集合
返回值：Array(Element)；
2.$("TagName:Empty")
描述：用於獲取所有TagName節點裡，內容為空的節點集合
返回值：Array(Element)；
3.$("TagName1:has(TagName2))
描述：用於獲取所有TagName1節點裡，包含TagName2子節點的節點集合
返回值：Array(Element)；
4.$("TagName:parent")
描述：用於獲取所有TagName節點裡，包含子節點的節點集合
返回值：Array(Element)；