jQuery之基礎核心（demo)

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與原生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源碼解析。