jQuery 選擇器 學習筆記三

2021-04-22 09:59:36 字數 1186 閱讀 3780

選擇器是jquery最重要的部分之一,在jquery中對事件處理,dom操作和ajax操作都依賴於選擇器,熟練使用選擇器,不僅能簡化**,還可以達到事半功倍的效果。

在說jquery之前我們也可以回憶一下css的選擇器,我想這對我們還算是比較熟悉,分別有:標籤選擇器、id選擇器、類選擇器、群組選擇器、後代選擇器、通配選擇符....等等選擇器,具體語法說明在這裡就不說了。而我們要說了jquery中的選擇器完全繼承了css的風格,不過jquery選擇器適應通用性更好,css中很多選擇器ie不支援,但jquery支援常用的瀏覽器。

$的選擇器部分,凡是運用符號:$,其返回值都是乙個object。

下面分類別的簡單介紹一下jquery選擇器:

1、基本選擇器:通過標籤元素id、class、標籤名等來查詢dom元素

$("#id名"),如$("#test")是選取了id為test的標籤節點

$("標籤名"),如$("p")是選取了所有的p標籤節點

$(".class名"),如$(".test")是選取了所有class為test的標籤節點

$("*"),如$("*")是選取所有的標籤元素

$("標籤名1,標籤名2,..."),如$("div,span,p.myclass")是選取所有,和擁有class為myclass的的一線標籤元素。

2、層次選擇器:通過dom元素的層次關係來獲取特定元素,包括後代元素、子元素、相依元素、兄弟元素等。

$("標籤名 標籤名"),如$("div span")選取裡所有的元素

$("parent  child"),如$("div>span")選取元素下元素名是的子元素

$('prev+next')等價$('prev').next('next'),如$('.one+div')等價$('.one').next('div')是選取class為one的下乙個標籤元素

$('prev~siblings')等價$('prev').nextall('div'),如('#two~div')等價$('#two').nextall('div')是選取id為two的元素後面的所有兄弟元素

3、過濾選擇器:主要是通過一些過濾規則來篩選dom元素,過濾規則與css中的偽類選擇器語法相同,即選擇器都以乙個冒號(:)開頭

$("標籤元素:first"),如$("div:first")是選取所有元素中第乙個元素

jQuery學習筆記(三) jQuery選擇器2

4 內容過濾選擇器 內容過濾選擇器根據元素中的文字內容或所包含的子元素特徵獲取元素,其文字內容可以模糊或絕對匹配進行元素定位,其詳細說明如下表所示 內容過濾選擇器語法 選擇器功能返回值 contains text 獲取包含給定文字的元素 元素集合 empty 獲取所有不包含子元素或者文字的空元素 元...

JQuery 選擇器學習筆記

img removeattr title 移除指定元素屬性值 p last addclass lastp addclass 為指定元素新增class,p last 為最後乙個p元素 p first addclass firstp 同上,只不過是第乙個p元素 p last removeclass 移除...

jQuery學習筆記 選擇器

3 jquery四種常見寫法 第一種 function 第二種 document ready function 第三種 jquery function 第四種 jquery document ready function 注 比js裡window.onload事件高效,因為不需要整個文件載入結束去執...