JQuery基礎筆記

2021-09-24 21:45:35 字數 3211 閱讀 9495

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

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

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

3. 兩者相互轉換

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

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

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

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 獲得可用元素 enabled就是可以修改可以輸入的框

2. 不可用元素選擇器

* 語法: :disabled 獲得不可用元素 disabled就是不可以輸入的框

3. 選中選擇器

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

4. 選中選擇器

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

三. dom操作

1. 內容操作

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

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

3. 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():

四. 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基礎筆記

1 jquery 2 animate方法 animate animate 方法執行 css 屬性集的自定義動畫。該方法通過css樣式將元素從乙個狀態改變為另乙個狀態。css屬性 值是逐漸改變的,這樣就可以建立動畫效果。只有數字值可建立動畫 比如 margin 30px 字串值無法建立動畫 比如 ba...

Jquery基礎學習筆記 1

1 屬性 為所有匹配的元素設定乙個計算的屬性值 為所有的input新增屬性class btn input attr class btn 2 css 為每個匹配的元素新增指定的類名 對所有的提交按鈕新增樣式 input submit addclass btn 3 值 獲得第乙個匹配元素的當前值 取的某...

Jquery基礎學習筆記 1

此筆記只是作為本人學習 jquery 的隨手筆記 稍微做了一下整理 希望對新人有參考價值。1 屬性 為所有匹配的元素設定乙個計算的屬性值 為所有的 input 新增屬性 class btn input attr class btn 2 css 為每個匹配的元素新增指定的類名 對所有的提交按鈕新增樣式...