Jquery第二篇【選擇器、DOM相關API、事件API】

前言

前面已經介紹過了Jquery這門語言，其實就是一個javaScript的庫…可以簡化咱們書寫的代碼….本博文主要講解使用Jquery定位HTML控件【定位控件就是獲取HTML的標籤】，使用Jquery操做DOM的API

選擇器

Jquery提供了九個選擇器給咱們用來定位HTML控件..

• 目的：經過九類選擇器，能定位web頁面（HTML/JSP/XML）中的任何標籤
  
  • （1）基本選擇器
    
    • 直接定位id、類修修飾器、標籤
  • （2）層次選擇器
    
    • 有父子，兄弟關係的標籤
  • （3）加強基本選擇器
    
    • 大於、小於、等於、奇偶數的標籤
  • （4）內容選擇器
    
    • 定義內容爲XXX、內容中是否有標籤器、含有子元素或者文本的標籤
  • （5）可見性選擇器
    
    • 可見或不可見的標籤
  • （6）屬性選擇器
    
    • 與屬性的值相關
  • （7）子元素選擇器
    
    • 匹配父標籤下的子標籤
  • （8）表單選擇器
    
    • 匹配表單對應的控件屬性
  • （9）表單對象屬性選擇器
    
    • 匹配表單屬性具體的值

經過這九種的選擇器，咱們基本能夠能獲取HTML中任何位置的標籤。

---

Jquery關於DOM的API

前面使用Jquery的選擇器來獲取到了HTML標籤，單純獲得標籤是沒有用的。咱們要對其進行增刪改，這樣在網頁上才能作出「動態」的效果…

JavaScript的DOM可以操做CSS,HTML從而在網頁上作出動態的效果..

Jquery是對JavaScript的封裝，那麼Jquery在獲得HTML標籤後，也有對應的方法來獲取標籤的內容，動態建立、刪除、修改標籤。從而在網頁上作出動態的效果

追加

• append()：追加到父元素以後
• prepend()：追加到父元素以前
• after()：追加到兄弟元素以後
• before()：追加到兄弟元素以前

查詢層次關係

咱們發如今選擇器上就有層次關係的選擇器，在API上也有層次關係的方法。通常地，咱們用方法來定位到對應的控件比較多。

• children()：只查詢子節點，不含後代節點
• next()：下一下兄弟節點
• prev()：上一下兄弟節點
• siblings()：上下兄弟節點

css樣式

• addClass()：增長已存在的樣式
• removeClass()：刪除已存在的樣式
• hasClass()：判斷標籤是否有指定的樣式，true表示有樣式，false表示無樣式
• toggleClass()：若是標籤有樣式就刪除，不然增長樣式

動畫效果

往這些方法下設置參數，那麼就能夠控制它的隱藏、顯示時間

• show()：顯示對象
• hide()：隱藏對象
• fadeIn()：淡入顯示對象
• fadeOut()：淡出隱藏對象
• slideUp()：向上滑動
• slideDown()：向下滑動
• slideToggle()：上下切換滑動，速度快點

CSS尺寸屬性

直接調用無參就是獲取，給指定的參數就是修改

• offset()：獲取對象的left和top座標
• offset({top:100,left:200})：將對象直接定位到指定的left和top座標
• width()：獲取對象的寬
  
  • width(300)：設置對象的寬
• height()：獲取對象的高
  
  • height(500)：設置對象的高

標籤內容和屬性

• val()：獲取value屬性的值
  
  • val(「」)：設置value屬性值爲」「空串，至關於清空
• text()：獲取HTML或XML標籤之間的值
  
  • text(「」)：設置HTML或XML標籤之間的值爲」「空串
• html()：獲得標籤下HTML的值
• attr(name,value)：給符合條件的標籤添加key-value屬性對
• removeAttr()：刪除已存在的屬性

增刪改標籤

• $("<div id='xxID'>HTML代碼</div>")：建立元素，屬性，文本
• remove()：刪除自已及其後代節點
• clone()：只複製樣式，不復制行爲
• clone(true)：既複製樣式，又複製行爲
• replaceWith()：替代原來的節點

迭代

因爲Jquery對象都是被當作是一個數組，each()方法就是專門用來操做數組的。

• each()：是jQuery中專用於迭代數組的方法，參數爲一個處理函數，this表示當前須要迭代的js對象

---

Jquery事件API

JavaScript一大特性就是事件驅動，當用戶用了執行了某些動做之後，JavaScript就會響應事件，在事件的方法上，咱們就能夠對用戶的動做「回饋」一些信息給用戶！

Jquery也對JavaScript事件進行了封裝，咱們看一下如下的API：

• window.onload：在瀏覽器加載web頁面時觸發，能夠寫屢次onload事件，但後者覆蓋前者
• ready：在瀏覽器加載web頁面時觸發，能夠寫屢次ready事件，不會後者覆蓋前者，依次從上向下執行，咱們經常使用$(函數)簡化
  
  • ready和onload同時存在時，兩者都會觸發執行，ready快於onload
• change：當內容改變時觸發
• focus：焦點獲取
• select：選中全部的文本值
• keyup/keydown/keypress：演示在IE和Firefox中獲取event對象的不一樣
• mousemove：在指定區域中不斷移動觸發
• mouseover：鼠標移入時觸發
• mouseout：鼠標移出時觸發
• submit：在提交表單時觸發，true表示提交到後臺，false表示不提交到後臺
• click：單擊觸發
• dblclick：雙擊觸發
• blur：焦點失去

值得注意的是：當用戶執行動做的時候，瀏覽器會自動建立事件對象，傳遞進去給響應事件的方法【相似與監聽器的原理】，那麼咱們在響應方法上就能夠獲取一些屬性：