01-老馬jQuery教程-jQuery入口函數及選擇器

前言

這套jQuery教程是老馬專門為寒門子弟而錄制，希望大家看到后能轉發給更多的寒門子弟。視頻都是免費，請參考課程地址：https://chuanke.baidu.com/s5508922.html

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相關資料

• 參考書:《鋒利的jQuery》
• jQuery官網: http://jquery.com
• jQuery 在線API: http://api.jquery.com
• jQuery UI: http://jqueryui.com
• jQuery的github地址： https://github.com/jquery/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的安裝

• 官網下載地址：http://jquery.com/download/
• npm方式安裝

  npm install jquery
  

• bower方式安裝

  bower install jquery
  

2.入口函數介紹

2.1window.onload事件的問題

在之前DOM課 中咱們已經說過用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();

---

聯系老馬

對應視頻地址：https://chuanke.baidu.com/s5508922.html
老馬qq： 515154084
老馬微信：請掃碼

 

掃碼加老馬微信