1. 程式人生 > >JQuery選擇器部分

JQuery選擇器部分

源自:慕女郎
1、JQuery中常用的函式方法:
1).html()、.text():設定或獲取元素中顯示的內容;使用html()和text()方法操作元素的內容,當兩個方法的引數為空時,表示獲取該元素的內容,而如果方法中包含引數,則表示將引數值設定為元素內容
2).css()、addClass():設定或獲取元素的某種樣式屬性;通過addClass()和css()方法可以方便地操作元素中的樣式,前者括號中的引數為增加元素的樣式名稱,後者直接將樣式的屬性內容寫在括號中
3).attr():設定或獲取元素的某項屬性值;分為attr(屬性名)格式返回元素屬性值;attr(屬性名,屬性值)格式是設定元素屬性名的值

4).addClass():為元素新增指定的樣式類別名稱;使用removeAttr(name)和removeClass(class)分別可以實現移除元素的屬性和樣式的功能,前者方法中引數表示移除屬性名,後者方法中引數則表示移除的樣式名

.text():獲取或設定元素的文字內容

2、JQuery中的選擇元素的方法:$("arg");
其中arg包括id選擇器(#id)、標籤選擇器、類選擇器(.class)、*選擇器、sele1,sele2,...,seleN;
層次選擇器:ance desc:其中ance引數表示父元素,desc引數表示後代元素即包括子元素和孫元素;
1)parent>child選擇器:child引數獲取的元素都是parent選擇器的子元素,通過">"符號來表示一種層次關係,第一代子輩元素;
2)prev+next選擇器:查詢與“prev”元素緊鄰的下一個“next”元素,“+”表示一種上下層次關係,只返回唯一的一個元素

3)prev~siblings選擇器:返回prev元素後面全部相鄰的同輩元素;“~”表示一種層次關係

以上為jQuery基礎選擇器

4)(:first )、(:last):根據過濾選擇進行元素匹配,書寫時以“:”號開頭,用於查詢集合元素中某一位置的元素
5)(:eq(index)):其中引數index表示索引號(即:一個整數),它從0開始,如果index的值為3,表示選擇的是第4個元素。
6)(:contains(text)):是選擇包含指定字串的全部元素,它通常與其他元素結合使用,獲取包含“text”字串內容的全部元素物件。其中引數text表示頁面中的文字。
7)(:has(selector)):過濾選擇器的功能是獲取選擇器中包含指定元素名稱的全部元素,其中selector引數就是包含的元素名稱,是被包含元素。
8)(:hidden)、(:visible)::visible過濾選擇器獲取的是全部可見的元素,hidden與visible相反
9)[attribute=value]屬性選擇器、[attribute!=value]屬性選擇器:是獲取與屬性名和屬性值完全相同的全部元素,其中[]是專用於屬性選擇器的括號符,引數attribute表示屬性名稱,value引數表示屬性值。
10)[attribule*=value]屬性選擇器:*為任意匹配字串,可以獲取屬性值中包含指定內容的全部元素,其中[]是專用於屬性選擇器的括號符,引數attribute表示屬性名稱,value引數表示對應的屬性值
11):first-child子元素過濾選擇器:可以獲取每個標籤素中返回的首個元素,它是一個集合,常用多個集合資料的選擇處理;:last-child子元素過濾選擇器的功能是獲取每個標籤元素中返回的最後一個元素,它也是一個集合,常用多個集合資料的選擇處理。

以上為jQuery過濾性選擇器

以下為jQuery表單選擇器
12)( :input)表單選擇器:返回全部的表單元素,不僅包括所有<input>標記的表單元素,而且還包括<textarea>、<select> 和 <button>標記的表單元素

13)( :text)表單文字選擇器、( :password)表單密碼選擇器、( :radio)單選按鈕選擇器、( :checkbox)複選框選擇器、( :submit)提交按鈕選擇器、( :image)影象域選擇器、( :button)表單按鈕選擇器、( :checked)選中狀態選擇器、( :selected)選中狀態選擇器

以下是jQuery操作DOM元素

1)使用append()方法向元素內追加內容
append(content)方法的功能是向指定的元素中追加內容,被追加的content引數,可以是字元、HTML元素標記,還可以是一個返回字串內容的函式。

2)使用appendTo()方法向被選元素內插入內容
appendTo()方法也可以向指定的元素內插入內容,它的使用格式是:
$(content).appendTo(selector);引數content表示需要插入的內容,引數selector表示被選的元素,即把content內容插入selector元素內,預設是在尾部。

3)使用before()和after()在元素前後插入內容
使用before()和after()方法可以在元素的前後插入內容,它們分別表示在整個元素的前面和後面插入指定的元素或內容,呼叫格式分別為:
$(selector).before(content)和$(selector).after(content)
其中引數content表示插入的內容,該內容可以是元素或HTML字串

4)使用clone()方法複製元素
呼叫clone()方法可以生成一個被選元素的副本,即複製了一個被選元素,包含它的節點、文字和屬性,它的呼叫格式為:
$(selector).clone()

其中引數selector可以是一個元素或HTML內容。

5)替換內容
replaceWith()和replaceAll()方法都可以用於替換元素或元素中的內容,但它們呼叫時,內容和被替換元素所在的位置不同,分別為如下所示:
$(selector).replaceWith(content)和$(content).replaceAll(selector)
引數selector為被替換的元素,content為替換的內容。

6)使用wrap()和wrapInner()方法包裹元素和內容
wrap()和wrapInner()方法都可以進行元素的包裹,但前者用於包裹元素本身,後者則用於包裹元素中的內容,它們的呼叫格式分別為:
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
引數selector為被包裹的元素,wrapper引數為包裹元素的格式。

7)使用each()方法遍歷元素
使用each()方法可以遍歷指定的元素集合,在遍歷時,通過回撥函式返回遍歷元素的序列號,它的呼叫格式為:
$(selector).each(function(index))
引數function為遍歷時的回撥函式,index為遍歷元素的序列號,它從0開始。this:用於指定當前控制元件

8)使用remove()和empty()方法刪除元素
remove()方法刪除所選元素本身和子元素,該方法可以通過新增過濾引數指定需要刪除的某些元素,而empty()方法則只刪除所選元素的子元素。