1、JAVASCRIPT類庫，簡稱為JS庫

     作用 - 為了簡化javascript的開發

     目的 - 預定義了很多物件(屬性和方法)和函式

     特點 - 相容各大瀏覽器

2、JQUERY

     概述： jQuery其實就是一個JS檔案

     分類

         jQuery - Web版本(最主要)

         jQuery UI(User Interface) - 整合UI內容

         jQuery Mobile - 移動版本(WebApp)

         QUnit - 用於測試

     使用jQuery的三個步驟

       ①在HTML頁面中引入jQuery檔案

       ②使用jQuery的選擇器定位(獲取)頁面元素

       ③利用jQuery的API方法完成需求

3、$(selector) - jQuery的工廠函式，該函式返回jQuery物件

       jQuery的約定 - jQuery物件前增加"$"符號

// DOM物件

         var username = document.getElementById("username");

      // jQuery物件

         var $username = $("#id");

4、DOM物件與jQuery物件

         DOM物件 - 通過DOM獲取的元素,稱之為DOM物件

         jQuery物件 - 通過jQuery包裝DOM後產生的物件

           jQuery物件的底層還是DOM物件

  DOM物件與jQuery物件的轉換

     DOM物件轉換為jQuery物件：$(DOM物件)

     jQuery物件轉換為DOM物件：jQuery物件是陣列物件

①$jQuery物件[角標]      ②$jQuery物件.get(角標)

 jQuery物件提供get(index)方法

     注意 - DOM物件與jQuery物件之間不能相互呼叫

 

例：獲得DOM物件

  var username = document.getElementById("username"); console.log(username.value);

DOM物件轉換成jQuery物件

  var $username = $(username); console.log($username.val());

 

獲得jQuery物件

  var $username = $("#username");   console.log($username.val());

jQuery物件轉換成DOM物件（jQuery物件是陣列物件）

  var username1 = $username[0];   console.log(username1.value);

 jQuery物件提供get(index)方法

var username2 = $username.get(0); console.log(username2.value);

       

5、jQuery程式語句基本語法

   $(選擇器字串)  .   method   (引數行); 

      選擇器          動作(API)   引數

4、選擇器  jQuery的根基

①基本選擇器

$("div")標籤屬性

$("#btn")  id 屬性：

$(".item")class屬性：

$("*")全部選擇器：

$("#d1,.mini")多個選擇器並列使用：

$(".d1.mini")需要同時具有.d1類和.mini類

②層級選擇器

$("body div")祖先與後代

$("body>div")父元素與子元素

$("#one+div")選擇id為one後的第一個兄弟元素，且必須為div

$("#one~div")選擇id為one後面所有div元素

 

③基本過濾選擇器(過濾選擇器在選擇器前,具有":"符號)

$("div:first")獲取div元素中的第一個

$("div:last")獲取div元素中的最後一個

$("div:even")獲取索引值為偶數的div元素，索引值從0開始！！

$("div:odd")獲取索引值為奇數的div元素

$("div:gt(1)")獲取索引值大於1的div元素 great than

$("div:lt(1)")獲取索引值小於1的div元素 less than

$("div:eq(1)") 獲取索引值等於1的div元素 less than

$("div:not('.mini')")獲取class不為mini的div元素(包含沒有class屬性的div元素)

$(":header")獲取所有標題元素(h1 - h6) - 不常用

$(":animated")獲取當前正在執行動畫的元素

 

④子元素過濾選擇器

$("div:nth-child(2)")獲取div元素的子元素是第二個

$("div:first-child")獲取div元素的第一個子元素      

$("div:last-child")獲取div元素的最後一個子元素

$("div:only-child")如果哪個div元素只有一個子元素,那麼選中

 

 

⑤內容過濾選擇器

$("div:contains('div11')")文字包含"div11"的div元素

$("div:empty")不包含任何文字內容或子元素的div元素

$("div:parent")包含任何文字內容或子元素的div元素  

$("div:has('.mini')") 包含class為mini的div元素的父div元素

 

 

⑥可見性過濾選擇器

$("div:visible")可見的div元素

$("div:hidden")不可見的div元素

 

⑦屬性過濾選擇器

$("div[title]")包含屬性title的div元素

$("div[title=text1]")包含屬性title=text1的div元素

$("div[title!=text1]")包含屬性title!=text1的div元素(包含沒有該屬性的div元素)

$("div[title^=text]")包含屬性title值是以text開始的div元素

$("div[title$=t1]")// 包含屬性title值是以t1結束的div元素

$("div[title*=t1]")包含屬性title值包含t1的div元素

$("div[title$=t1][id]")多個屬性過濾選擇器並列使用包含屬性title值是以t1結束的,包含id屬性的div元素

 

⑧表單物件屬性過濾選擇器

$("input:enabled") 改變頁面中可用元素的value屬性值

$("input:disabled")改變頁面中不可用元素的value屬性值

$("input[name=love]:checked")被選中的單選框

 

 

⑤選擇器的建議

         不用記 - 會查jQuery的幫助文件即可

         多練 - 9個頁面