這是jQuery 第三節課，主要學習jQuery中的高級選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lesson3 基本選擇器2</title>
<link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
</head>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
<div >
<p>pppppppp</p>
<p>bbbbbbbbp</p>
div
</div>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<ul id="ul">
<li><a href="#">#######</a></li>
<li><a href="#">aaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaa</a></li>
</ul>
</body>
</html>div,p{ //羣組選擇器
color:red;
}
ul li a{
color:green; //後代選擇器
}
ul li+li{ //next選擇器
color:#fof;
}
div > p{ //子代選擇器
color:red;
}
div ~ p{ //所有子代選擇器
color:red;
}$(function(){
$("div,p").css("color","blue"); //羣組選擇器
$("ul li a").css("color","#ff3"); //後代選擇器
$('ul li').find('a').css('color', 'red'); //和後代選擇器等價
$('div > p').css('color', '#abcdef'); //子選擇器
$('div').children('p').css('color', '#ff3'); //和子選擇器等價
$('div+p').css("color","#f3f"); //next選擇器 (div 的相鄰p節點)
$('#div').next('p').css('color', 'red'); //和 next 選擇器等價
$('div~p').css('color', 'red');
$('#box').nextAll('p').css('color', 'red'); //和 nextAll 選擇器等價
/*在 find()、next()、nextAll()和 children()這四個方法中，如果不傳遞參數，就相當於傳遞
了“*”*/
//$('ul').prev('p').css("color","blue"); //同級上一個元素
//$('ul').prevAll('p').css("color","red"); //同級所有上面的元素
$('ul').prevUntil('p').css('color', '#abcdef'); //同級上非指定元素選定，遇到則停止
//$('div').nextUntil('p').css('color', 'red'); //同級下非指定元素選定，遇到則停止
$('div').siblings('p').css('color', '#abcdef');//同級上下所有元素選定
/*
* 警告：切不可寫成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”這種形式，因爲
* prevAll('p')返回的是已經上方所有指定元素，然後再 nextAll('p')選定下方所有指定元素，這
* 樣必然出現錯誤。
* */
});
/*
* 選擇器 CSS模式 jQuery 模式 描述
* 元素名 div {} $('div') 獲取所有 div 元素的 DOM 對象
* ID #box {} $('#box') 獲取一個 ID 爲 box 元素的 DOM 對象
* 類(class) .box{} $('.box') 獲取所有class爲box的所有DOM對象
* 羣組選擇器 span,em,.box {} $('span,em,.box') 獲取多個選擇器的 DOM 對象
* 後代選擇器 ul li a {} $('ul li a') 獲取追溯到的多個 DOM 對象
* 通配選擇器 * {} $('*') 獲取所有元素標籤的 DOM 對象
* 後代選擇器 ul li a {} $('ul li a') 獲取追溯到的多個 DOM 對象
* 子選擇器 div > p {} $('div p') 只獲取子類節點的多個 DOM 對象
* next 選擇器 div + p {} $('div + p') 只獲取某節點後一個同級DOM對象
* nextAll 選擇器 div ~ p {} $('div ~ p') 獲取某節點後面所有同級DOM對象
*/