1. 程式人生 > >jQuery入口函式及選擇器

jQuery入口函式及選擇器

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();