一. 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 為每個匹配的元素新增指定的類名 對所有的提交按鈕新增樣式...