web前端三劍客之一jQuery

05-03

一、什麼是jQuery？

jQuery，是對JavaScript進行了進一步的封裝，為前端開發提供了相當大的便利，幫助我們簡便的操作頁面元素也是前端開發工作不可或缺的優秀框架。核心理念是：write less，do more。

本身是兩個單詞的組成，j和Query，本身提供大概幾百k(輕量級)的JS庫（或者叫JS文件，把所有的操作封裝在文件中，使用時只需將文件引入到頁面即可使用它的屬性和方法）。

兼容CSS3，及各種主流瀏覽器。

使用戶更方便地處理HTML、Events、實現動畫效果，並且方便地為網站提供AJAX交互

使用戶的HTML頁面保持行為和內容分離，將行為從頁面中分離出來，在javascript中以獨特的方式為元素添加行為。

比如之前我們不用這個框架也可以在標籤內部增加onclick行為，用來實現按鈕操作，但是如果這樣的操作較多時則使得頁面混亂，並且不方便修改和升級，所以還是有必要分離開。

二、jQuery編程步驟--利用選擇器定位

1.準備工作，將對應的.js文件引用到網頁（源文件）之中。

2.例如，一個頁面文件中有div元素，<div id="d1">Hello</div>

利用選擇器定位（某一個或某個個元素），可以通過標籤名或者id來獲取，$("div")或者$("#d1")

3.在定位後，可以通過調用jQuery提供的方法（css方向）來操作當前定位到的節點（元素），修改其顯示的效果，比如將div元素中字體修改為30像素的大小。

$("#d1").css("font-size","30px")

三、jQuery對象

每一個jQuery方法、屬性必須由jQuery對象進行調用。

如之前講到的$("div")和$("#d1")都是對象，引號中的內容為選擇器

jQuery提供的方法都是針對對象特有的，而且大部分方法返回值類型也是jQuery對象，所以方法可以連綴調用"jQuery對象.方法（）.方法（）.方法（）...."

css方法只有jQuery對象可以使用，DOM對象不能調用。

對象只能調用自己的方法和屬性

DOM對象的屬性和方法，比如document.getElementById()。

DOM對象可以轉換為jQuery對象，實現方法：

$(DOM對象) 這可以看做是一個工廠函數

示例：

function f(){

var obj=document.getElementById("d1");

//DOM->jQuery對象

var $obj=$(obj); 返回值$obj是jQuery對象

$obj.html("hello jQuery"); 調用html方法，修改html文本

}

jQuery對象轉換為DOM對象，實現方法：

$obj.get(0)或者$obj.get()[0] get方法將當前的jQuery元素（可能是1個也可能是多個元素封裝為一個對象）轉化為DOM數組，中括弧中不僅可以寫0，也可以寫其他索引。當

jQuery中只有一個元素時只能是get（0）。

示例：

function f(){

var $obj=$("#d1");

var obj=$obj.get(0);

obj.innerHTML="hello jQuery"; 調用DOM對象的方法innerHTML

}

應用案例

將頁面中a標籤進行轉換（標籤、元素和對象的區別）

網

</a>

$("#news").attr(" href="騰訊首頁"")

$("#news").html("騰訊")

點擊變這個按鈕，可以把跳轉頁面改為騰訊。

四、基本選擇器

上面講過了對象很重要，那麼如果要獲取jQuery對象的話，選擇器是一把利刃，即大多數對象的獲取都要依靠選擇器來完成。

CSS中有選擇器，jQuery中也有選擇器，CSS--定位元素，施加樣式；Query--定位元素，施加行為。

我們之前提到，使用jQuery選擇器能夠將頁面內容與行為分離。

選擇器種類：

基本選擇器：id，class，標籤....

層次選擇器：兄弟元素、子元素....

過濾選擇器：顯示、隱藏、第i個元素....

表單選擇器：快速獲取表單信息，更詳細的信息可以參考官方下載的jQuery文檔。

基礎選擇器能夠幫助我們簡單地去獲取界面上的元素，提供id，class，或者標籤的名字都可以獲取到界面的元素。

那麼面對比較複雜的標籤，則需要其他選擇器，如層次選擇器，根據標籤的層級關係（或者父子結構）來獲取相關的頁面元素。

在談選擇器之前，再認識一下工廠函數$()

因為無論你使用哪種類型的選擇器，都要從一個美元符號$和一對圓括弧開始：$(),括弧內是選擇符。

1.#id（實際應用是#id值）,定位符是#

特點：最快，盡量使用id選擇器。

$("#d1")得到id="d1"的這個對象

通常id在頁面中保持唯一，得到的元素就一個。

而class值可以相同，也就是通過類來獲取元素時，很可能會得到多個元素

2..class(類選擇器），定位符是.

特點：根據class屬性定位元素

<body>

<div class="s1">hello</div>

<div class="s1">jQuery</div>

</body>

function f(){

$(".s1").css("font-size","30px"); //分號;別忘記

}

3.element

標記選擇器或元素選擇器，依據HTML標記來區分

<body>

<div id="d1">hello</div>

<div class="s1">jQuery</div>

</body>

function f(){

$("div").css("font-size","30px");

}

4.selector1,selector2

合併選擇器，即所有選擇器的合集，之間用逗號隔開

<body>

<div id="d1">hello</div>

<div class="s1">jQuery</div>

</body>

function f(){

$("#d1,.s1,p").css("font-size","30px");

}

五、jQuery方法、事件

1.遍歷節點的方法：

children()只考慮所有子元素，而不考慮所有後代元素，即只考慮直接子元素，間接的不考慮）。

children（selector），在符合的節點中獲取滿足selector的直接子元素。