jQuery入口函式及選擇器

阿新 • • 發佈：2018-12-12

1.什麼是jQuery？

1.1 jQuery介紹

jQuery是一個輕型、快速的、小巧的功能豐富的JavaScript類庫。本質就是一堆js的函式的組合。對原生DOM操作做了一些非常有用的封裝，可以讓開發人員更簡單、更方便、更統一的對DOM進行操作，比如：封裝了事件相關統一操作api、DOM操作的API、Ajax、樣式操作、動畫的基礎類庫等。而且儘量遮蔽了瀏覽器的相容性，而且提供了強大的可擴充套件性，成為了目前非常流行的前端開發框架之一。

1.2 為什麼要學習jQuery

雖然前端的MVVM開發模式已經進入各個公司和各個開發人員的視野，而且也異常火爆。為什麼還要學習jQuery呢？

很多老的專案都是jQuery開發的，所以jQuery還會執行很長時間。

jQuery有助於剛入門的開發人員，更深入的理解原生DOM的開發方式
jQuery庫封裝的的確非常經典，做一下小專案和簡單的專案足夠支撐
第三方類庫太豐富！

jQuery的理念：write less，do more

1.3 jQuery相關資料

1.3 關於jQuery的版本說明

1.x：相容ie678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般專案來說，使用1.x版本就可以了，最好版本在1.7.2 以上。下載地址：http://code.jquery.com/jquery-1.11.3.min.js
2.x：不相容ie678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮相容低版本的瀏覽器可以使用2.x，一般不要用，直接要麼用3.x版本，相容低版本瀏覽器就用1.x就行了。下載地址：

http://code.jquery.com/jquery-2.1.4.min.js
3.x：不相容ie678，只支援最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery外掛不支援這個版本。目前該版本是官方主要更新維護的版本。下載地址：http://jquery.com/download/
同一版本分類 jQuery每一個版本又分為壓縮版和未壓縮版：
- jquery.js：未壓縮版本（開發版本），程式碼可讀性高，推薦在開發和學習階段使用，方便檢視原始碼。
- jquery.min.js：壓縮版本，去除了註釋、換行、空格、並且將一些變數替換成了a,b,c之類的簡單字元，基本沒有可讀性，推薦在專案生產環境使用，因為檔案較小，減少網路壓力。
jQuery3.0多出來一個精簡版(Slim) 精簡版就是剔除了ajax模組和effects模組，精簡版的檔案比為未精簡版要小很多，壓縮和未壓縮跟上面的區別一樣。
- jQuery.Slim.js：未壓縮精簡版
- jQuery.Slim.min.js：壓縮精簡版
  
  image.png

1.4 jQuery的安裝

npm方式安裝
```
npm install jquery
```
bower方式安裝
```
bower install jquery
```

2.入口函式介紹

2.1window.onload事件的問題

用window的onload事件作為JS程式碼的入口，時機並不好。因為window.onload事件是在頁面的圖片、第三方指令碼、樣式等都下載和載入完成後才會觸發。而我們希望是頁面的HTML的文件樹物件可進行互動就立即繫結DOM的事件和做一些初始化工作。所以之前的DOM時代的相容程式碼

/**
 * @description 當頁面的文件樹載入完成後，可以進行互動就立即觸發回撥函式執行
 * @param {function} callback -頁面載入完成後呼叫的回撥函式
 * @return {undefined} 返回undefined
 */
document.myReady = function(callback) {
  // jQuery實現文件載入完成後 事件的原理。
  // 封裝標準瀏覽器和ie瀏覽器
  if(document.addEventListener) {
    document.addEventListener('DOMContentLoaded', callback, false);
  } else if(document.attachEvent) {
    // 相容IE8及以下的瀏覽器。
    document.attachEvent('onreadystatechange', function(){
      // 當文件的狀態變為：interactive表示，文件dom物件可以進行訪問。
      if(document.readyState == "interactive") {
        callback(window.event);
      }
    });
  } else {  // 其他特殊情況
    window.onload = callback;
  }
};

2.2 jQuery型別引入HTML頁面中

引入jQuery檔案（注意路徑）

<script src="../code/lib/jquery.js"></script>

忘記引包或者引包在入口函式的後面

2.3 jQuery對於頁面載入完成入口函式的封裝

jQuery內部幫我們做好了頁面載入完成的封裝，而且時機正是頁面的文件載入完成，而不是window.onload. 而且對於頁面中的iframe等子頁面也做了相容處理。直接用如下的方法進行使用：

// 第一種方式： 給document繫結ready事件。
$(document).ready(function(){
    //  ....此處是頁面DOM載入完成的入口
});

// 第二種方式：直接給jQuery的全域性函式傳入一個回撥函式
$(function(){
   //  ....此處是頁面DOM載入完成的入口
});

參考程式碼：

  <script>
    // DOM
    // window.onload = function() {
    //   var btn = document.getElementById('btn');
    //   btn.onclick = function(e) {
    //     alert(this.value);
    //   }
    // };
    window.onload = function () {
      console.log('load')
    }

    // **** 推薦使用這種。！！
    // jQuery 佔用了兩個全域性變數， $ === jQuery // true
    $(function () {
      // 頁面載入完成後，自動執行
      console.log('ready1')

      var btn = document.getElementById('btn');
      btn.onclick = function (e) {
        alert(this.value);
      }
    }); // $是一個函式物件，jQuery建構函式。

    jQuery(function () {

    });

    // 文件載入完成後自動執行回撥函式。
    $(document).ready(function () {
      console.log('ready2')
    });
  </script>
  <input type="button" id="btn" value="123">

3.jQuery的選擇器

3.1 dom選擇的痛點

ie8以下的瀏覽器不支援標準DOM的querySelector方法。強大的CSS選擇器沒有用武之地。
ie8以下的瀏覽器僅僅支援以下搜尋的方法：
- document.getElementById(id)
- document.getElementsByTagName(tag)
- document.getElementsByName(name)
`chideNode、nextSibling等節點操作方法也很不靈活

我們迫切希望，能用querySelector()或者querySelectorAll()這樣的CSS選擇器選擇DOM元素節點的靈活方法。

jQuery的1.x版本支援ie6~8瀏覽器，而且還支援豐富的CSS選擇器選擇元素。

3.2 id選擇器

id選擇器就是根據標籤的id獲取dom的包裝物件。

var $div = $('#id');  // $div 不是dom物件是jQuery的包裝物件。

3.3 jQuery的包裝物件和DOM物件

通過jQuery的選擇器選擇出來的物件都是jQuery的包裝物件，裡面封裝了jQuery的很多API方法，後續我們會一一學習。

這裡簡單說一點： jQuery包裝物件本身是一個偽陣列，選擇器返回的所有的DOM元素都會存在jQuery的包裝物件中，並且還有很多其他的jQuery特有的api。

jQuery的包裝物件和DOM物件的相互轉換。

jQuery包裝物件 → DOM物件

var $div = $('#id'); 
var domDiv = $div[0];

DOM物件→jQuery包裝物件

var domDiv = document.getElmentById('divId');
var $div = $(domDiv); 
// 等同如下程式碼：
var $div = $('#divid');

上課原始碼：

<input type="button" value="按鈕" id="btn">
  <script>
  // dom
  // window.onload = function() {
  //   document.getElementById('btn');
  // }

  // jQuery
  $(function(){
    // 頁面的文件載入完成後
    var $btn = $('#btn'); // #代表id選擇器。
    //jQuery的建構函式：
    // 第一種用法：可以接受一個回撥函式，回撥就是在頁面載入完成後執行。
    // 第二種用法：還可以接受一個css的選擇器（string），返回選擇器對應dom節點的jQuery包裝物件。

    // 我們一般給jQuery的物件加一個$.

    console.dir($btn);
    // jQuery包裝物件（所有的選擇器選擇返回的物件都是jQuery的包裝物件。也就是一個偽陣列）
    // jQuery包裝物件 和dom物件相互轉換。
    var btn = $btn[0]; // jQuery → DOM

    // dom 物件轉換  jQuery
    var $btn2 = $(btn); // jQuery建構函式的第三種用法： 接受一個dom物件，轉成jQuery的包裝物件。
    console.dir($btn2)

    // 轉成jQuery的包裝物件之後 ，就擁有了jQuery.fn上的方法api
  });
  </script>

3.4 其他簡單選擇器

名稱	用法	描述
ID選擇器	`$("#id");`	獲取指定ID的元素
全選選擇器	`$('*');`	匹配所有元素
類選擇器	`$(".class");`	獲取同一類class的元素
標籤選擇器	`$("div");`	獲取同一類標籤的所有元素
並集選擇器	`$("div,p,li");`	使用逗號分隔，只要符合條件之一就可。獲取所有的div、p、li元素
交集選擇器標籤指定式選擇器）	`$("div.redClass");`	注意選擇器1和選擇器2之間沒有空格，class為redClass的div元素，注意區分後代選擇器。

3.5 層級選擇器

名稱	用法	描述
子代選擇器	`$("ul>li");`	使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素
後代選擇器	`$("ul li");`	使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等

3.6 過濾選擇器

過濾選擇器都帶冒號

語法	用法	描述
`:first`	`$('li:first');`	獲取第一個元素
`:last`	`$('li:last');`	獲取最後個元素
`:contains(text)`	`$("div:contains('John')")`	匹配包含給定文字的元素
`:not(selector)`	`$("input:not(:checked)")`	去除所有與給定選擇器匹配的元素
`:eq(index)`	`$("li:eq(2)").css("color", "red");`	獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始。
`:odd`	`$("li:odd").css("color", "red");`	獲取到的li元素中，選擇索引號為奇數的元素
`:even`	`$("li:even").css("color", "red");`	獲取到的li元素中，選擇索引號為偶數的元素

案例：隔行變色

  $(function(){
      $("tr:odd").css('backgroundColor', '#eee')
      $("tr:even").css('backgroundColor', '#ddd')
    });

  // 上課程式碼：
 $(function(){
      // 獲得奇數行的tr標籤
      var oddTrs = $('tr:odd');
      // console.dir(oddTrs);
      // // DOM原始的寫法，很麻煩，需要進行遍歷。
      // for(var i = 0; i < oddTrs.length; i++) {
      //   var domTr = oddTrs[i]; // 拿到dom的tr標籤物件。
      //   domTr.style.backgroundColor = "#eee";
      // }

      // jQuery提供隱式迭代的用法
      // jQuery設定dom的元素樣式，提供了方法css('styleName', 'value')
      // 如果傳一個引數，代表獲取，傳兩個引數代表設定。
      oddTrs.css('backgroundColor', '#aaa');
      // jQuery：如果包裝物件裡面元素是多個時候，做設定操作會影響包裝物件中的所有dom物件。
      // 但是獲取值，只會返回第一個元素的值。

      // 拿到所有的偶數行
      $('tr:even').css('backgroundColor', '#eee');

    });

上課程式碼：

<body>
  <p>我是一個短路</p>
  <div class="cd">
    我是的一個div1
  </div>
  <div class="cd">
      我是的一個div2
  </div>
  <div class="cd2">
      我是的一個div2
      laoma
  </div>
  <h3 tm="屬性">標題標籤</h3>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

  <script>
    $(function(){
      // 全部選擇器，選擇頁面中所有的標籤元素。
      var $all = $('*');
      console.dir($all);

      // 類選擇器
      var $cd = $(".cd");
      console.dir($cd);

      var div1 = $cd[0];
      console.log(div1.innerHTML);

      // 標籤選擇器和並集選擇器
      console.dir($('div, h3'));

      // 交集選擇器
      console.dir($('div.cd2'));

      // 過濾選擇器和後代選擇器
      console.dir($('.list li:first'));

      // 包含選擇器
      var $div = $('div:contains("laoma")');
      // 如果選擇器返回的是多個元素的時候，那麼返回第一個元素的內部文字
      console.log($div.text());// jQuery獲取選擇元素的內部文字。
      var domDiv = $div[0];
      // var str = domDiv.textContent ? domDiv.textContent : domDiv.innerText;
      console.log(domDiv.innerHTML);
    });
  </script>
</body>

3.7 屬性選擇器

用法	說明
`$("p[attr]")`	選取所有該p標籤且具有attr屬性的節點
`$("p[attr=a_value]")`	選取所有p標籤且具有attr屬性並滿足屬性值為a_value的節點
`$("p[attr^=a_value_head]")`	選取所有p標籤且attr屬性的屬性值是以a_value_head開頭的
`$("p[attr$=a_value_end]")`	選取所有p標籤且attr屬性的屬性值是以a_value_end結尾的
`$("p[attr*=a_value")`	選取所有p標籤且attr屬性的屬性值中包含a_value

3.8 篩選方法

語法	用法	說明
`parent()`	`$("#first").parent();`	查詢父親
`children(selector)`	`$("ul").children("li")`	相當於`$("ul>li")`，子類選擇器
`find(selector)`	`$("ul").find("li");`	相當於$("ul li"),後代選擇器
`siblings(selector)`	`$("#first").siblings("li");`	查詢兄弟節點，不包括自己本身。
`nextAll([expr])`	`$("div:first").nextAll()`	查詢當前元素之後所有的同輩元素。
`prevtAll([expr])`	`$("div:first").prevAll()`	查詢當前元素之前所有的同輩元素
`hasClass(class)`	`$('div').hasClass("protected")`	檢查當前的元素是否含有某個特定的類，如果有，則返回true。
`eq(index)`	`$("li").eq(2);`	相當於`$("li:eq(2)"),index`從0開始
`not(exp)`	`$("p").not("#selected")`	刪除與指定表示式匹配的元素

4. 互斥選擇案例

 <table>
    <tr>
      <td>使用者名稱</td>
      <td>年齡</td>
      <td>聯絡</td>
    </tr>
    <tr>
      <td>老馬1</td>
      <td>20</td>
      <td>qq:515154084</td>
    </tr>
    <tr>
      <td>弗蘭德</td>
      <td>23</td>
      <td>332</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
  <script>
    $(function(){
      // jQuery可以通過 原型上的click方法進行繫結點選事件。
      // $('tr');// 選擇到了所有的tr
      $('tr').click(function(e){  // 存在隱式迭代。
        // 點選了當前行， 那麼讓當前行 背景高亮，讓其他的兄弟節點背景不高亮。
        // jQuery的事件處理程式中。 this依然指向 繫結事件dom物件。
        $(this).css('backgroundColor', '#ccc');
        // 拿到多個兄弟節點，隱式迭代全部設定背景為白色。
        $(this).siblings().css('backgroundColor', '#fff');
      });
    });
  </script>

5. 綜合練習

有html程式碼如下：

<table>
  <tr>
    <th><span class="pl20">編號</span></th>
    <th><span class="pl120">課程名稱</span></th>
    <th><span>價格</span></th>
    <th><span>購買/試聽</span></th>
    <th><span>釋出時間</span></th>
    <th><span>狀態</span></th>
    <th><span>操作</span></th>
  </tr>
</table>
 <div class="finance-pt">
    <table cellpadding="0" class="finance-form">
      <thead>
        <tr>
          <th colspan="2">必讀資料</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a href="#">市場熱點</a>
          </td>
          <td>
            <a href="#">微博輿情</a>
          </td>
        </tr>
        <tr class="la">
          <td>
            <a href="#">A股熱圖</a>
          </td>
          <td>
            <a href="#">美股熱圖</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#zz">環球股指</a>
          </td>
          <td>
            <a id="md" href="#dd">實時大單</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

搜尋樣式類為：pl20的單元格。

$('.pl20');

搜尋具有colspan屬性的th標籤

$('th[colspan]');

搜尋id=md的標籤

$('#md');

搜尋.finance-form下面的所有的td標籤

$('.finance-form td');

搜尋tr.la的所有的兄弟標籤

$('tr.la').siblings();