JQuery的介紹與使用

基本語法和常用方法

• 基本語法結構
  • $(選擇器).jquery方法()；
• 常用方法
  • $(function(){}) 頁面載入結束後執行；
  • $(選擇器).css(“css屬性”,“css屬性值”)
  • $(選擇器).prop(“html屬性”,“html屬性值”)
  • $(選擇器).html() 雙標籤中的內容
  • $(選擇器).val() 表單元素的value
    • 以上幾個方法較常用，且用法類似
    • 如果有引數是設定屬性，如果沒引數是讀取屬性。

jQuery物件與原生js物件

• Jquery物件與原生js物件不可通用
  • Jquery物件只能呼叫jquery的方法， 不能呼叫原生物件的屬性
  • 原生物件只能呼叫原生的方法和屬性， 不能呼叫jquery的方法
• 原生物件與jquery物件可以轉換
  
  • 注意：this是原生物件 在jquery中使用this時 需要$(this)

jQuery選擇器

• 常見選擇器（同css）

  1. id選擇器 #id名 只選到一個元素
  2. class選擇器 .class名
  3. 標籤(元素)選擇器 標籤名 選擇範圍較大 經常和其他選擇器一起使用
  4. 全域性選擇器 * 選擇全部元素
  5. 交集選擇器 選擇器選擇器 先元素 再其他
  6. 並集選擇器 選擇器，選擇器 同時選擇多個選擇器
  7. 後代選擇器 選擇器 選擇器 找元素中的元素
  8. 子代選擇器 選擇器>選擇器 找直接包含的元素
  9. 屬性選擇器 [屬性] [屬性=‘屬性值’] 通過屬性選擇元素
  10. 相鄰元素選擇器 選擇器+選擇器 同級相鄰 一個
  11. 相鄰同級選擇器 選擇器~選擇器 同級相鄰 多個

• 集合中篩選元素

  1. :first 第一個
  2. :last 最後一個
  3. :even 奇數
  4. :odd 偶數
  5. :eq(idx) 指定索引
  6. :lt(idx) 小於指定
  7. :gt(idx) 大於指定
     
     

• 表單元素選擇器

  1. :input
  2. :text
  3. :password
  4. :radio
  5. :checkbox
  6. :button
  7. :submit
  8. :image
  9. :checked 選中的項
  10. :selected 下拉選單中 選中的option
      

• 輔助篩選元素的方法（可以鏈式呼叫）

  1. jquery元素.find(選擇器) 子元素
  2. jquery元素.eq(idx) 集合中根據索引查詢
  3. jquery元素.not(選擇器) 排除某個特徵
  4. jquery元素.next() 同級元素向後查詢
  5. jquery元素.prev() 同級元素向前查詢

jQuery事件繫結等相關機制

• jQuery事件繫結有四種：bing（）、live（）、delegate（）、on（），其中live（），已經被淘汰了，其存在很多的問題，不適合使用，而delegate能夠在繫結事件後，依然可以新增動態元素事件。on（）可以說是前三種方法的結合體（推薦使用on）。
  

• jquery中選擇元素，有隱式迴圈機制

  • 多個元素 統一賦值時 可以利用隱式迴圈 節省程式碼；取值時沒有此特性 需要迴圈取值。
    

• 繫結事件，.click等，同js時事件去掉on

  • .事件 給元素繫結事件 必須保證頁面元素已存在
  • $(this) 發生對應事件的元素
  • 表單提交
    
    
  • 動態繫結事件
    

• 元素集合遍歷.each(function(i){})

  • i表示遍歷時的索引
  • $(this) 當前遍歷到的元素
    

jQuery的DOM操作

元素節點操作

• 子節點
  A.append(B) A裡新增節點B
  B.appendTo(A) 把B新增到A的內部
  A.prepend(B) A裡新增節點B 頭部插入
  B.prependTo(A) 把B新增到A的內部 頭部插入
• 同輩節點
  A.after(B) A後邊新增同輩節點B
  B.insertAfter(A) 把同輩節點B新增到A後邊
  A.before(B) A前邊新增同輩節點B
  B.insertBefore(A) 把同輩節點B新增到A前邊
• 替換節點
  A.replaceWith(B) B替換A
  B.replaceAll(A) B替換A
• 複製節點
  A.clone(true) 複製A節點
  引數決定是否複製元素上繫結的事件
• 刪除節點
  A.remove() 刪除A節點及其子孫
  A.empty() 刪除A的子孫節點
  根據層次獲取
• 獲取子節點
  A.children() 獲取A的子節點
• 獲取同輩節點
  A.next() 獲取A的緊鄰下個節點
  A.prev() 獲取A的緊鄰上個節點
  A.siblings() 獲取A的所有同輩節點
• 獲取父節點
  A.parent() 獲取父節點
  A.parents() 獲取所有父節點

屬性節點操作

• attr() 可以獲取自定義屬性 對disabled checked等屬性返回undefined或者字串值
• prop() 不可以獲取自定義屬性 對disabled checked等屬性直接返回bol值
• removeAttr() 刪除屬性
• removeProd() 刪除屬性
• 注意：
  • 屬性節點操作在普通屬性上 選擇兩個方法都可以
  • 在有bol值的屬性上 適合使用prop
  • attr可以通過自定義屬性進行傳值