更新時間:2020-10-27 來源:黑馬程序員 瀏覽量:
jQuery中的選擇器非常多,對于初學(xué)者來說,并沒有必要全部掌握,只記住常用的選擇器即可。首先是jQuery的基本選擇器,它和CSS選擇器非常類似,常用的基本選擇器如表1所示。
表1 基本選擇器
為了使讀者更好地理解,下面通過代碼進行演示。
1 <div class="nav">我是nav div</div>
2 <script>
3 console.log($(".nav"));
4 </script>
上述代碼執(zhí)行后,即可看到獲取結(jié)果,如圖1所示。
圖1 使用選擇器獲取元素
從圖1可以看出,索引為0的元素就是頁面中的DOM對象,length屬性表示匹配到符合條件的DOM對象個數(shù),若沒有匹配到合適的結(jié)果為0。其中,類選擇器、標(biāo)簽選擇器等可以獲取多個元素,id選擇器只能獲取1個元素。
當(dāng)需要使用其他不熟悉的選擇器時,可以通過查閱文檔查看具體的解釋。下面是一些其他在開發(fā)中可能會用到的選擇器。
2. 獲取同級元素
使用“+”或“~”可以獲取同級元素,如表2所示。
表2獲取同級元素
3. 篩選元素
在jQuery中還有一些選擇器可以篩選元素,如表3所示。
表3篩選元素
4. 屬性選擇器
jQuery中還提供了根據(jù)元素的屬性獲取指定元素的方式。例如,含有class屬性值為current的
元素。常用的屬性選擇器如表4所示。
表4屬性選擇器
5. 子元素選擇器
利用子元素選擇器可以對子元素進行篩選,常用的如表5所示。
表5子元素選擇器
6. 表單選擇器
jQuery還提供了針對表單元素的選擇器,用來方便表單開發(fā),如表6所示。
表6 表單選擇器
需要注意的是,$("input")與$(":input")雖然都可以獲取表單項,但是它們表達的含義有一定的區(qū)別,前者僅能獲取表單標(biāo)簽是<input>的控件,后者則可以同時獲取頁面中所有的表單控件,包括表單標(biāo)簽是<select>以及<textarea>的控件。
【AI設(shè)計】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運營】深圳跨境電商運營畢業(yè)22個工作日,就業(yè)率91%+,最高薪資達13500元
2025-09-19【AI運維】鄭州運維1期就業(yè)班,畢業(yè)14個工作日,班級93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個工作日,就業(yè)率已達到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)當(dāng)天offer率91%,薪資1W+占比54.2%,班級均薪12k+
2025-09-19