jquery選擇器和css一樣，但相容性更好
<body
>
<
p>p1
p>
<
p>p1
p>
<
p>p1
p>
<
div
id="box"
>
<
p>p2
p>
<
p>p2
p>
<
p>p2
p>
<
div>
<
p>p3
p>
<
p>p3
p>
<
p>p4
p>
div>
div>
<
p>p4
p>
<
p>p4
p>
<
p>p4
p>
body
>
層次選擇器：
$(function());
jquery方法對選擇器的補充：
//jquery對高階選擇器的補充，提供的幾種方法
//同級上指定元素:乙個或所有個
$('#box').prev('p').css('color','red');
$('#box').prevall('p').css('color','blue');
//同級非指定元素:上或下
$('#box').prevuntil('p').css('color','red');
$('#box').nextuntil('p').css('color','blue');
//同級指定元素：上和下
$('#box').siblings('p').css('color','red');
注：1 方法如果不傳參相當於*，表示任意，不建議使用
2 方法相對高階選擇器寫法好一些：find()最快，可以拆分組合使用
var box = $('#box');
var p = box.find('p');
屬性選擇器：
<a sss
="x"
title
="num1 aaa bbb"
>num1
a>
<
a>num2
a>
<
a>num3
a>
<
a>num4
a>
<
a sss
="s"
title
="num5"
>num5
a>
<
a title
="num-6"
>num6
a>
<
a title
="nsdfnumsdf"
>num7
a>
//屬性瀏覽器
$('a[title]').css('color','red');
$('a[title=num1]').css('color','blue');
$('a[title^=num]').css('color','red');
$('a[title$=1]').css('color','blue');
$('a[title|=num]').css('color','red');
$('a[title!=num5]').css('color','blue');
$('a[title~=aaa]').css('color','red');
$('a[title*=num]').css('color','blue');
$('a[sss][title=num5]').css('color','red');
jQuery高階選擇器
和css層級選擇器類似，可以通過層級關係獲取對應標籤物件。語法 a b 獲得a元素內部的所有的b元素。後代 a b 獲得a元素下面的所有b子元素。子標籤 a b 獲得a元素同級下乙個b元素。直接後兄弟 a b 獲得a元素之後的所有b元素。一般後兄弟 子代111111 子代222222 子代33333...
JQuery 學習 高階選擇器
第一 群組選擇器 css pdiv strong jquery function divdiv div pp p strong strong strong css div,strong,p jquery function divdiv divppp strong strong strong 後代選擇...
JQuery 學習 高階選擇器
第一，後代選擇器 box p css color red box find p css color red pqpq pqpqpqp p全部紅色 第二，子代選擇器 box p css color blue box children p css color blue pq pqpq pqpq p第三，...