|
|
<!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”的節(jié)點紅色背景顏色</a>
<a href="#" id="aEmpty">設置無內容的DIV內容設為EmptyDIV</a>
<a href="#" id="aHas">設置包含 p 節(jié)點的 div 節(jié)點紅色背景顏色</a>
<a href="#" id="aParent">設置包含子節(jié)點的 div 節(jié)點紅色背景顏色</a>
</body>
</html>
首先還是對本章的課外知識點進行說明下
1.element.css("attributeName","value")
描述：用于設置element的style，在例子中$(this).css("background","red");就是設置節(jié)點的background為red。
現(xiàn)在進入主題咯
1.$("TagName:contains('keyword')")
描述：用于獲取所有TagName節(jié)點里包含keyword內容的節(jié)點集合
返回值：Array(Element)；
2.$("TagName:Empty")
描述：用于獲取所有TagName節(jié)點里，內容為空的節(jié)點集合
返回值：Array(Element)；
3.$("TagName1:has(TagName2))
描述：用于獲取所有TagName1節(jié)點里，包含TagName2子節(jié)點的節(jié)點集合
返回值：Array(Element)；
4.$("TagName:parent")
描述：用于獲取所有TagName節(jié)點里，包含子節(jié)點的節(jié)點集合
返回值：Array(Element)；
JavaScript技術：JQuery 學習筆記 選擇器之四，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
