Jquery常用選擇器

2021-09-28 19:09:36 字數 3306 閱讀 1349

1. jquery物件和js物件區別與轉換

1. jquery物件在操作時,更加方便。

2. jquery物件和js物件方法不通用的.

3. 兩者相互轉換

* jq -- > js : jq物件[索引] 或者 jq物件.get(索引)

* js -- > jq : $(js物件)

2. 選擇器:篩選具有相似特徵的元素(標籤)

1. 基本操作學習:

1. 事件繫結

//1.獲取b1按鈕

$("#b1").click(function());

2. 入口函式

$(function () );

window.onload 和 $(function) 區別

* window.onload 只能定義一次,如果定義多次,後邊的會將前邊的覆蓋掉

* $(function)可以定義多次的。

3. 樣式控制:css方法

// $("#div1").css("background-color","red");

$("#div1").css("backgroundcolor","pink");

2. 分類

1. 基本選擇器

1. 標籤選擇器(元素選擇器)

* 語法: $("html標籤名") 獲得所有匹配標籤名稱的元素

2. id選擇器

* 語法: $("#id的屬性值") 獲得與指定id屬性值匹配的元素

3. 類選擇器

* 語法: $(".class的屬性值") 獲得與指定的class屬性值匹配的元素

4. 並集選擇器:

* 語法: $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素

2. 層級選擇器

1. 後代選擇器

* 語法: $("a b ") 選擇a元素內部的所有b元素

2. 子選擇器

* 語法: $("a > b") 選擇a元素內部的所有b子元素

3. 屬性選擇器

1. 屬性名稱選擇器

* 語法: $("a[屬性名]") 包含指定屬性的選擇器

2. 屬性選擇器

* 語法: $("a[屬性名='值']") 包含指定屬性等於指定值的選擇器

3. 復合屬性選擇器

* 語法: $("a[屬性名='值']...") 包含多個屬性條件的選擇器

4. 過濾選擇器

1. 首元素選擇器

* 語法: :first 獲得選擇的元素中的第乙個元素

2. 尾元素選擇器

* 語法: :last 獲得選擇的元素中的最後乙個元素

3. 非元素選擇器

* 語法: :not(selector) 不包括指定內容的元素

4. 偶數選擇器

* 語法: :even 偶數,從 0 開始計數

5. 奇數選擇器

* 語法: :odd 奇數,從 0 開始計數

6. 等於索引選擇器

* 語法: :eq(index) 指定索引元素

7. 大於索引選擇器

* 語法: :gt(index) 大於指定索引元素

8. 小於索引選擇器

* 語法: :lt(index) 小於指定索引元素

9. 標題選擇器

* 語法: :header 獲得標題(h1~h6)元素,固定寫法

5. 表單過濾選擇器

1. 可用元素選擇器

* 語法: :enabled 獲得可用元素

2. 不可用元素選擇器

* 語法: :disabled 獲得不可用元素

3. 選中選擇器

* 語法: :checked 獲得單選/核取方塊選中的元素

4. 選中選擇器

* 語法: :selected 獲得下拉框選中的元素

3. dom操作

1. 內容操作

1. html(): 獲取/設定元素的標籤體內容 內容

獲取到的是--> 內容 如果往html(「***

」)方法中設定值,就可以設定標籤標籤體內容。

2. text(): 獲取/設定元素的標籤體純文字內容 內容

獲取到的是--> 內容 如果往text("***");方法中設定值,就可以設定標籤中的文字內容。

3. val(): 獲取/設定元素的value屬性值,往val(「***」)方法中傳入值就可以設定value屬性值。

2. 屬性操作

1. 通用屬性操作

1. attr(): 獲取/設定元素的屬性

2. removeattr():刪除屬性

3. prop():獲取/設定元素的屬性

4. removeprop():刪除屬性

* attr和prop區別?

1. 如果操作的是元素的固有屬性,則建議使用prop

2. 如果操作的是元素自定義的屬性,則建議使用attr

2. 對class屬性操作

1. addclass():新增class屬性值

2. removeclass():刪除class屬性值

3. toggleclass():切換class屬性

* toggleclass("one"):

* 判斷如果元素物件上存在class="one",則將屬性值one刪除掉。 如果元素物件上不存在class="one",則新增

4. css():

3. crud操作:

2. prepend():父元素將子元素追加到開頭

* 物件1.prepend(物件2):將物件2新增到物件1元素內部,並且在開頭

4. prependto():

* 物件1.prependto(物件2):將物件1新增到物件2內部,並且在開頭

5. after():新增元素到元素後邊

* 物件1.after(物件2): 將物件2新增到物件1後邊。物件1和物件2是兄弟關係

6. before():新增元素到元素前邊

* 物件1.before(物件2): 將物件2新增到物件1前邊。物件1和物件2是兄弟關係

7. insertafter()

* 物件1.insertafter(物件2):將物件2新增到物件1後邊。物件1和物件2是兄弟關係

8. insertbefore()

* 物件1.insertbefore(物件2): 將物件2新增到物件1前邊。物件1和物件2是兄弟關係

9. remove():移除元素

* 物件.remove():將物件刪除掉

10. empty():清空元素的所有後代元素。

* 物件.empty():將物件的後代元素全部清空,但是保留當前物件以及其屬性節點

jquery 常用選擇器

myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用myclass類的css的所有元素 選擇文件中的所有的元素,可以運用多種的選擇方...

jQuery常用選擇器

1.所有的函式大體分為四組 1 dom操作函式 2 事件處理函式 3 動畫函式 4 ajax操作 2.jquery函式的特性 1 幾乎所有的函式都自帶迴圈功能,可以對選中的元素進行遍歷 2 幾乎所有的函式都返回jquery物件本身,可以實現方法的鏈式呼叫 3 jquery物件轉換為dom物件 div...

jquery 常用選擇器

層次選擇器 div p 選取div下的所有的p元素 div p css border 1px solid red 只選取div下的直接子元素 相鄰的元素 divp cs s b orde r 1pxs olid red 與 div nextall p 等價 表示div後面的 所有p兄弟元素 div ...