<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//抓ID
$('#box').css({'width':'200px','height':'400px','border':'1px solid red'})
//標籤名抓元素 // 抓取的是#box 下面所有p元素， 不管是子代 還是孫子代
$('#box p').css({'color':'pink'})
// class名抓元素
$('.box').css({'background':'yellow'})
// 羣組選擇器
$('.p,.p1').css({'color':'blue'})
//找親兒子
$('#box>p').css({'background':'brown'})
// 尋找找到 緊挨class名爲p的元素的下一個class名叫p1的元素
$('.p+.p1').css({'background':'#000'})
// 找到.p後面所有兄弟元素class名叫p1
$('.p~.p1').css({'background':'#ff6700'})
// 尋找到所有p標籤中第一p標籤
$('p:first').css({'background':'purple'})
// 尋找到所有p標籤中最後一個p標籤
$('p:last').css({'color':'blue'});
// 找到所有的p標籤不包括class名叫做p標籤
$('p:not(.p)').css({'color':'#aaddee'})
// 找到所有奇數行的p標籤
$('p:even').css({'color':'blue'});
// 找到所有偶數行的p標籤
$('p:odd').css({'color':'blue'});
//找到下標爲3的p標籤
$('p:eq(3)').css({'color':'blue'});
// 另一種寫法
$('p').eq(4).css({'color':'blue'});
//找到第一個子集元素
$('#box p:first-child').css({'background':'green'});
//找到最後一個子集元素
$('#box p:last-child').css({'background':'#eeaadd'});
})
</script>
</head>
<body>
<div id="box">
<p class="p2">今天真涼快！</p>
<p class="p1">今天我們不留作業！</p>
<p class="p1">同學們很高興，他們竟然相信了！</p>
<div class="box">
<p class="p">今天真涼快！</p>
<p class="p1">今天我們不留作業！</p>
<p class="p1">同學們很高興，他們竟</p>
</div>
<div class="box">
<p class="p">今天真涼快！</p>
<p class="p1">今天我們不留作業！</p>
<p class="p1">同學們很高興，他們竟</p>
</div>
</div>
</body>
</html>$(this).addClass('active').siblings('span').removeClass('active');