jquery分類
元素選擇器
$('a'); //選擇所有a元素
$('div'); //選擇所有div元素
$('p'); //選擇所有p元素
類選擇器
$('div.myClass'); //所有擁有myClass類的div元素
$('p.myClass'); //所有擁有myClass類的p元素
$('*.myClass'); //擁有myClass類的所有類型元素ID選擇器
$('#myID'); //id爲myID的元素通常在一個html頁面中，一個元素只能擁有一個id，一個id也只能出現一次。
|
並集選擇器 |
selector1,selector2,...,selectorN |
將每一個選擇器匹配的元素合併後一起返回 |
$("div,p,.title" )選取所有div、p和擁有class爲title的元素 |
|
交集選擇器 |
element.class或element#id |
匹配指定class或id的某元素或元素集合 |
$("h2.title")選取所有擁有class爲title的h2元素 |
|
全局選擇器 |
* |
匹配所有元素 |
$("*" )選取所有元素 |
層次選擇器
|
後代選擇器 |
ancestor descendant |
選取ancestor元素裏的所有descendant（後代）元素 |
$("#menu span" )選取#menu下的<span>元素 |
|
子選擇器 |
parent>child |
選取parent元素下的child（子）元素 |
$(" #menu>span" )選取#menu的子元素<span> |
|
相鄰元素選擇器 |
prev+next |
選取緊鄰prev元素之後的next元素 |
$(" h2+dl " )選取緊鄰<h2>元素之後的同輩元素<dl> |
|
同輩元素選擇器 |
prev~sibings |
選取prev元素之後的所有siblings元素 |
$(" h2~dl " )選取<h2>元素之後所有的同輩元素<dl> |
<div>
<p>
<span></span>
<a></a>
<b></b>
</p>
</div>p是div的子元素，span是p的子元素，a、b同樣是p的子元素
p是div的後代元素，span、a、b都是div的後代元素
後代可認爲是包含的所有元素，而子元素只是包含一層的元素
上面的例子可以理解爲div是父親，p是div的兒子
span、a、b是p的兒子即div孫子，但都是div和p的後代
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery層次選擇器示例</title>
<style type="text/css">
* {margin:0; padding:0; line-height:30px;}
body {margin:10px;}
#menu {border:2px solid #03C; padding:10px;}
a {text-decoration:none; margin-right:5px;}
span {font-weight:bold; padding:3px;}
h2 {margin:10px 0;}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").click(function(){
// $("#menu span").css("background-color","#09F");//後代選擇器，獲取並設置#menu下的<span>元素的背景顏色
$("#menu>span").css("background-color","#09F");//子選擇器，獲取並設置#menu下的子元素<span>的背景顏色
// $("h2+dl").css("background-color","#09F");//相鄰選擇器，獲取並設置緊接在<h2>元素後的<dl>元素的背景顏色
//$("h2~dl").css("background-color","#09F");//同輩選擇器，獲取並設置<h2>元素之後的所有同輩元素<dl>的背景顏色
});
});
</script>
</head>
<body>
<div id="menu">
<h2>全部旅遊產品分類</h2>
<dl>
<dt>北京周邊旅遊<span>特價</span></dt>
<dd><a href="#">按天數</a> <a href="#">海邊旅遊</a> <a href="#">草原</a></dd>
</dl>
<dl>
<dt>景點門票</dt>
<dd><a href="#">名勝</a> <a href="#">暑期</a> <a href="#">樂園</a></dd>
<dd><a href="#">山水</a> <a href="#">雙休</a></dd>
</dl>
<span>更多分類</span>
<span>更多分類</span><span>特價</span>
</div>
</body>
</html>這的自己慢慢體會慢慢理解
|
屬性選擇器 |
[attribute] |
選取包含給定屬性的元素 |
$(" [href]" )選取含有href屬性的元素 |
|
[attribute=value] |
選取等於給定屬性是某個特定值的元素 |
$(" [href ='#']" )選取href屬性值爲“#”的元素 |
|
|
[attribute !=value] |
選取不等於給定屬性是某個特定值的元素 |
$(" [href !='#']" )選取href屬性值不爲“#”的元素 |
|
屬性選擇器 |
[attribute^=value] |
選取給定屬性是以某些特定值開始的元素 |
$(" [href^='en']" )選取href屬性值以en開頭的元素 |
|
[attribute$=value] |
選取給定屬性是以某些特定值結尾的元素 |
$(" [href$='.jpg']" )選取href屬性值以.jpg結尾的元素 |
|
|
[attribute*=value] |
選取給定屬性是以包含某些值的元素 |
$(" [href* ='txt']" )選取href屬性值中含有txt的元素 |
|
|
[selector] [selector2] [selectorN] |
選取滿足多個條件的複合屬性的元素 |
$("li[id][title=新聞要點]" )選取含有id屬性和title屬性爲新聞要點的<li>元素 |
後面在補上現在時間是23:14分建軍節8/1