jQuery之基礎核心

作者的熱門手記

• jQuery之基礎核心（demo)

本文主要簡單的介紹下jQuery一些基礎核心，大致了解jQuery使用模式。適用於有HTML、CSS、javascript基礎，又剛剛接觸jQuery的初學者。（如有錯誤，請指正）
咱們從基礎語法說起,
基礎語法是：$(selector).action()

• 美元符號$定義jQuery
• 選擇符（selector）“查詢”和“查找” HTML 元素

• jQuery 的 action() 執行對元素的操作

  $是什麽？

  在jQuery程序中，基本上都是以“$”開頭的，那麽這個$到底是什麽呢？調試一下就知道

  console.log(typeof $); //function

  實際上來說，一般後面帶()都是函數，如

  test();

  是不是應該之前就有定義過這個函數

  function test(){
  //...
  }

  現在是不是就知道$是一個函數，那麽也就是說$就是jQuery封裝的一個函數。
  由於$本身就是jQuery的縮寫，也就是說$和jQuery是等價的。如：

  console.log($===jQuery);    //true

  那麽其實也可以用jQuery開頭。

  強大的jQuery選擇器

  接下來我們來了解一下selector，一直以來，jQuery強大的選擇器使其廣受青睞。jQuery選擇器大致分為基本選擇器、屬性選擇器、表單選擇器、位置選擇器、過濾選擇器、用於結果集的選擇器。
• 基本選擇器（仿CSS選擇器，基本上能寫CSS選擇器，jQuery的基本選擇器也掌握差不多）

$(*)    //獲取所有元素
$(‘#div1‘)  //獲取ID名為div1的元素
...

• 屬性選擇器（根據頁面元素屬性來獲取）

  $("[href]") //獲取所有帶有 href 屬性的元素
  $("[href=‘#‘]") //所有 href 屬性的值等於 "#" 的元素
  ...

  • 表單選擇器(根據表單type值來獲取）

    $(":password")   // 獲取type="password" 的 <input> 元素
    $(":button")    //獲取type="button" 的 <input> 元素
    ...
     
    

  • 位置選擇器（根據頁面元素在頁面的位置來獲取）

    $("ul li:first-child") //獲取所以ul中第一個子元素li
    $("ul li:last-child")   // 獲取所以ul中最後一個子元素li
    ...

  • 過濾選擇器（通過特定的過濾規則來篩選出所需的 元素）

    $(":empty") //獲取無子（元素）節點的所有元素
    $("p:hidden")   //獲取所有隱藏的 <p> 元素
    ...

  • 用於結果集的選擇器（通過jQuery方法傳參來篩選所需的元素）

    $(‘div‘).has(‘span‘); // 獲取包含span元素的div元素
    $(‘div‘).first(); //獲取第1個div元素
    ...

    想了解更多jQuery選擇器請查閱jQuery API，這裏就不一一列舉。

上文提到$是jQuery封裝的函數，那麽$()是什麽呢？

console.log($());  //Object

顯而易見，$()是一個對象。$是jQuery封裝的函數，那麽$()也應該是jQuery對象。

console.log($() instanceof jQuery); //true

那麽通過jQuery獲取一個頁面元素，也應該是jQuery對象。如獲取頁面上id名為p1的元素。

console.log($(‘#p1‘) instanceof jQuery); //true

在獲取到頁面元素以後，就可以對其進行某種操作了，也是action。在原生的JS中，我們要對元素進行操作是這樣寫的：

document.getElementById(‘p2‘).innerHTML="Perona";

那麽在jQuery裏面是不是可以這樣寫的：

$(‘#p3‘).html="Perona";//沒任何效果

沒有任何反應，這顯然是不對。實際上，在jQuery裏，執行操作很少用=，而是通過()傳參來執行，前面提到凡是帶()基本上就是一個函數，那麽也就是說jQuery源碼中應該有html()這個函數。那麽現在我們試著傳參來看看:

$(‘#p3‘).html(‘佩羅娜‘);

程序運行成功。這就是方法函數化。

操作網頁元素，最常見的需求是取值和賦值。
有趣的是，jQuery使用同一個函數，來完成取值（getter）和賦值（setter）。到底是取值還是賦值，由函數的參數決定。
如：

alert($(‘#div1‘).html());   //html()沒有參數，表示取值
$(‘#div2‘).html("愛慕課");//html()有參數，表示賦值

需要註意的是，如果結果包含多個元素，那麽賦值的時候，將對其中所有的元素賦值；取值的時候，則是只取出第一個元素的值（text()例外，它將取出所有元素的text內容）。

alert($(‘li‘).html());//當一組元素的時候，取值是一組中的第一個
$(‘li‘).html(‘佩羅娜‘);//當一組元素的時候,賦值是一組中的所有元素
alert($(‘li‘).text());

前面提到$(selector)是jQuery對象，那麽$(selector).action()執行完返回的又是什麽呢？咱們調試一下：

console.log($(‘#div3‘).css(‘color‘, ‘red‘));//object
console.log($(‘#div3‘).css(‘color‘, ‘red‘) instanceof jQuery);//true

返回的是object，還是一個對象。這是為什麽呢？其實在執行action()操作的時候，我們得先獲取元素對象後才可以調用action()。如果缺乏元素對象，代碼就會報錯，也就是說$().css(‘color‘, ‘red‘);這種寫法是錯誤的。我們得先獲取元素對象，返回對象才可以調用action()。那麽，也就是說，這個對象還是個jQuery對象。既然還是jQuery對象，那麽是不是還可以接著調用action()，答案是肯定的。

console.log($(‘#div3‘).css(‘color‘, ‘red‘).html(‘imooc‘));//object
console.log($(‘#div3‘).css(‘color‘, ‘red‘).html(‘imooc‘)instanceof jQuery);//true

這也正是jQuery的魅力之一，采用了鏈式寫法，可以連續調用action()，大大簡化代碼。根據基本的語法采用鏈式寫法，便衍生出這樣的$(selector).action()…action()
如下面代碼：

$(‘#div3‘).css(‘color‘, ‘gold‘);
$(‘#div3‘).html(‘麽麽噠‘);

采用鏈式寫法

$(‘#div4‘).css(‘color‘, ‘gold‘).html(‘麽麽噠‘);

接下來咱們說說jQuery與原生JS的關系，首先知道jQuery 是一個 JavaScript 庫，它在語法上是遵循原生JS的語法，也就是說jQuery與原生JS是可以共存的。但是兩者之間並不能混用，不能在jQuery對象裏調用JS的事件或方法，同樣也不能在JS對象裏調用jQuery的事件或方法。
js的寫法

document.getElementById(‘btn1‘).onclick=(function(){
            alert(‘麽麽噠‘);
        });

jq的寫法

$(‘#btn2‘).click(function(){
            alert(‘慕女神‘);
        });

錯誤的寫法如：
在原生JS裏調用jQuery的事件

document.getElementById(‘btn3‘).click(function(){
            alert(‘慕女神‘);
        });

在jQuery裏調用原生JS的事件

 $(‘#btn4‘).onclick=(function(){
            alert(‘麽麽噠‘);
        });

正所謂“知其然知其所以然”，想要更好的學習掌握jQuery,不妨去看看源碼。推薦去看看Aaron艾倫的jQuery源碼解析。

jQuery之基礎核心（demo)