跟著Jquery API學Jquery之一 選擇器
2024-05-06 14:10:36
供稿：網友
有了Jquery的選擇器，吃飯飯飯香，身體倍棒……
1.基本
我們知道jquery最常用的就是選擇器了，我們看一下jqueryAPI中的 選擇器—基本中有5種情況 class ,id ,element, *,還有一個多選擇器，這里我們想一下css樣式的寫法
css樣式也有幾種情況：1.類樣式 2.id樣式 3.標簽樣式，
如果有一個aa的類 ，那么我們定義aa的樣式就要寫成 .aa{}
如果有一個bb的id，那么我們定義bb的樣式就要寫成 #bb{}
如果有標簽<div></div>,那么我們定義的樣式就寫成 div{}
如果我們要定義所有的標簽樣式，那我們就寫成 *{} （當然這樣簡寫不太好）
如果我們要定義多個標簽之類的就用分號來分開 比如 .aa,#bb,div{} 就定義了 class為aa，id為bb，標簽為div的樣式了。
我們看到上面5個如果 ，在和jquery的5個基本的選擇器對比一下
如果我們要選擇一個aa的類就寫成 $(“.aa”)
如果我們要選擇一個bb的id就寫成$(“#bb”)
如果我們要選擇div的標簽就寫成$(“div”)
如果我們要選擇所有就寫成 $(“*”)
如果我們要選擇多個對象就寫成 $ (“.aa,#bb,div”)
對比一下，發現基本的選擇器完全是按在css的語法在操作，是不是很容易呢
2層次
我們現在知道了上面5個選擇器的寫法之后，現在我們來考慮如果對層次做選擇器，
先想一下什么是層次，其實說的就是 HTML的DOM結構 一層一層的，或者說XML的結構層次
那我們就打開jquery的Api ，發現有4個關于層次的選擇器。
歸納一下就是 a空格b，a>b ，a+b，a~b 當然我這里只是為了少打幾個字而已，
比如有如下的一個結構
代碼如下:
<div>
<div class="bb">
<span>1<span><span>2<span>
</div>
<span>3<span>
<div class=”cc” ></div>
<span>4<span>
</div>
我們現在想選擇id為aa節點下所有的span節點 ，就用 $(“#aa span”)
我們現在想選擇id為aa節點下第一層的span 就是span中文本為 3，4的兩個，就用 $(“#aa >span”)
我們現在想得到跟在class為bb后的那個span 就是span中文本為3的那個，就用$(“.bb+span”)
現在我們想得到class為bb后所有的span 就用$(“.bb~span”)
總結一下：第一個的寫法還是css樣式的寫法一樣 用空格表示節點下的元素
第二個用>來表示子節點，和空格不同的是它只作用在第一層
第三個第四個都是用來表示跟隨節點，只不過不同的是用+號表示緊接著的用~表示所有跟隨的 我們是需要記住 (空格 > + ~ )四個符號就可以了
3簡單
我們知道了基本的選擇器和層次的選擇器，有時候我們選擇出的是多個比如
代碼如下:
<ul>
<li id='aa'>1</li>
<li>2</li>
