jQuery知識一覽

、概覽

jQuery官網：https://jquery.com/
jQuery是一個高效、輕量并且功能豐富的js庫。
核心在于查詢query。
jQuery是一個優秀的js函數庫，是React/Vue/Angular框架之外中大型項目的首選。
jQuery的主旨是write less, do more。

1.1 jQuery的功能

html元素的選取
操作html元素
css操作
html事件處理
實現js動畫效果
能夠鏈式調用
容易擴展插件
封裝了ajax

1.2 引入jQuery庫

引入jQuery的方式有2種，一種是項目中直接引入jQuery的min.js文件，一種是使用服務器端jQuery文件（使用cdn）腳本標簽方式引入。

1.2.1 本地項目引入

在官網的：https://jquery.com/download/ 鏈接下可以下載到完整的代碼，放到項目文件的js文件夾下。

<script src="static/js/jquery-3.7.1.min.js"></script>

1.2.2 cdn方式引入

在網站：https://www.bootcdn.cn/ 可以獲得穩定、快速、免費的cdn加速服務。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

1.2.3 版本兼容

1.x 版本兼容老版本的IE，文件比較大
2.x 版本文件比較小，支持IE8+
3.x 版本引入部分新API，提供多個分包的版本，支持IE9+

1.2.4 開發的正確姿勢

開發過程中一般使用非min.js文件方便調試，生產環境部署上線時才使用min.js這種壓縮文件。

二、jQuery源碼淺析

2.1 匿名函數調用

從源碼中可以看出，jQuery的整體邏輯可以用以下簡單的結構進行描述：

( function( global, factory ) {
    // 判斷有無window環境的一堆邏輯代碼
})( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
    // 構造jQuery的一些邏輯代碼
    return jQuery
});

2.2 jQuery是一個函數

從源碼中可以看出，jQuery被定義為一個函數，函數中返回了一個實例對象（看new關鍵字）。

繼續跟蹤源碼 new jQuery.fn.init( selector, context)，這個函數中調用了makeArray，當然在其他if判斷語句中也有返回偽數組對象（比如，定義了length字段，還有[0]的操作），這里拿makeArray作為演示。

查看makeArray函數：

所以這個返回實例對象，是一個偽數組。

$('#menu-trigger') instanceof Array // false
$('#menu-trigger') instanceof Object // true

2.3 jQuery掛載在window上

從源碼中可以看出，將jQuery函數和window.$ 以及window.jQuery綁定賦值，所以使用jQuery和$ 標識符就可以直接使用jQuery。通常在項目中直接使用$標識符，快捷簡省。

2.4 jQuery驗證

所以在引入jQuery的項目中：

console.log(typeof $); // function
console.log($ === jQuery); // true
console.log($() instanceof Object); // true

三、jQuery常見用法

3.1 函數形式調用

通常形式為：$(param)

param為函數：dom加載完成后，執行該回調函數
param為選擇器字符串：查找與該選擇器匹配的所有標簽，并封裝成jQuery對象
param為dom對象：將該dom對象封裝成jQuery對象
param為標簽字符串：創建標簽對象并封裝成jQuery對象

$(function() {
    console.log("dom finished and execute this");
})

$('#btn').click(function () {
    // 這里的this是id為#btn的dom元素
    console.log(this.innerHTML)
    
    console.log($(this).html())
})

$('<input type="number"></input>').appendTo('div')

3.2 點語法調用函數

let list = [1, 2, 3]
$.each(list, function(i, ele) {
    console.log(i, ele)
})

$.trim(' hello world ')

3.3 用法淺析

jQuery函數返回的是一個偽數組（Object對象），可以使用length和下標。

// class中名為btn的dom元素有多少
$('.btn').length

$('.btn')[0]

$('.btn').get(0)

$('.btn').index()

// 設置名為btn的class對應的dom標簽的文本內容
$('.btn').text('自定義文本內容')

通過$(param)傳入的是selector、element、標簽情況下，返回的是包含1個或者多個dom元素對象的偽數組。

3.4 獲取一組dom元素的常見用法

// 基礎標簽和class
// 選擇了所有的div和span標簽
$('div, span')

// 選擇所有具有某個class的標簽
$('div.container')

// 層次選擇器
$('ul span') // ul標簽下的所有span元素
$('ul>span') // ul標簽下的所有子span元素
$('.container+li') // class為container的元素后的下一個li元素
$('ul .item~*') // class為item的元素后面所有兄弟元素

// 過濾選擇器
$('div:first') // 選擇第一個div
$('div:last') // 最后一個div
$('div:not(.container)') // class不為container的所有div
$('div:lt(3):gt(0)') // 所有div元素中的大于0小于3的div元素，表示1和2索引處的dom元素
$('div:containers("hello world")') // 內容為hellow world的div元素
$('div:hidden') // style中display: none的div元素
$('div[data]') // 有data屬性的div元素, example: <div data=""></div>
$('div[data="123"]') // 有data屬性且值為123的div元素, example: <div data="123"></div>

// 示例，使table表格的奇數行背景樣式設置
$('table>tbody>tr:odd')

// form表單中
$(':text') // 所有單行輸入框
$(':text:disabled') // 所有disabled的input輸入框
$(':checkbox') // 所有checkbox
$(':checkbox:checked') // 所有選中的checkbox
$('select').val() // select標簽選中的option的value值

3.5 修改css

直接修改css屬性（如果其dom標簽存在這個css屬性）

$('#container').css('background', 'red');

$('#container').css({ 'background' : 'red', 'color': 'blue' }) // 一組屬性

清空某標簽下的所有dom：

$('.carousel-inner').empty();

給某標簽下添加dom標簽：

$('.carousel-inner').append(domStr);

移除、添加class：

$('.carousel-indicators li').removeClass('active');
$('.carousel-indicators li:first').addClass('active');

3.6 獲取屬性

獲取dom標簽上的屬性：

 $('.about-img-1>img').attr('src');

設置標簽的屬性：

 $('.about-img-1>img').attr('src', (data && data['image']) ? data['image'] : '');

3.7 一些dom事件

點擊：

$('.category-product-page-ul>li').click(function(e) {
    e.preventDefault();
    console.log('this is:', this); // 打印對應的dom標簽
});

hover：

$('#container').hover(  
    function() {  
        // 當鼠標進入元素時執行的函數
    },
    function() {  
        // 當鼠標離開元素時執行的函數
    }  
  );

監聽事件：

$('.bigImage').on("mousemove", function( e ) {
    // do something
});

3.8 發起ajax請求

const json = '/static/js/data/xxx.json';
 $.ajax({
    url: json,  
    dataType: 'json',  
    success: function(data) {
      // do something
    },
    error: function(jqXHR, textStatus, errorThrown) {  
      console.error('Fail to read json:', textStatus, errorThrown, json);
    }  
  });

post請求：

介：

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

關于jQuery開發教程的詳細內容：（點擊下方“了解更多”，記得收藏哦~）

（本課程可以幫助學員掌握jQuery開發技術，適合人群前端開發者學習）

jQuery 選擇器：

允許您對元素組或單個元素進行操作。

3.1 元素選擇器

使用 CSS 選擇器來選取 HTML 元素。

3.2 屬性選擇器 [ ]

帶有給定屬性的元素。

$('[title]').hide();

改變 HTML 元素的 CSS 屬性。

3.3 CSS 選擇器

$('p').css('background-color', 'red');

語言特點：

快速獲取文檔元素

jQuery的選擇機制構建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。

提供漂亮的頁面動態效果

jQuery中內置了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內置的效果，比如淡入淡出、元素移除等動態特效。

創建AJAX無刷新網頁

AJAX是異步的JavaScript和ML的簡稱，可以開發出非常靈敏無刷新的網頁，特別是開發服務器端網頁時，比如PHP網站，需要往返地與服務器通信，如果不使用AJAX，每次數據更新不得不重新刷新網頁，而使用AJAX特效后，可以對頁面進行局部刷新，提供動態的效果。

提供對JavaScript語言的增強

jQuery提供了對基本JavaScript結構的增強，比如元素迭代和數組處理等操作。

增強的事件處理

jQuery提供了各種頁面事件，它可以避免程序員在HTML中添加太事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問題。

更改網頁內容

jQuery可以修改網頁中的內容，比如更改網頁的文本、插入或者翻轉網頁圖像，jQuery簡化了原本使用JavaScript代碼需要處理的方式。

語言評價：

jQuery 是繼prototype 之后又一個優秀的輕量級JavaScript 框架。其宗旨是———“Write Less, Do More”,寫更少的代碼,做更多的事情。它是一個快速和簡潔的JavaScript 庫，可以簡化HTML 文檔元素的遍歷，事件處理，動畫和Ajax 交互以實現快速Web 開發，它被設計用來改變編寫JavaScript 腳本的方式。

jQuery 的文檔非常豐富，因為其輕量級的特性，文檔并不復雜，隨著新版本的發布，可以很快被翻譯成多種語言，這也為jQuery 的流行提供了條件。jQuery 被包在語法上，jQuery 支持CSS1-3 的選擇器，兼容IE 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome 等瀏覽器。同時，jQuery 有約幾千種豐富多彩的插件，大量有趣的擴展和出色的社區支持，這彌補了jQuery功能較少的不足并為jQuery 提供了眾多非常有用的功能擴展。加之其簡單易學，jQuery 很快成為當今最為流行的JavaScript 庫，成為開發網站等復雜度較低的Web 應用程序的首選JavaScript 庫，并得到了大公司如微軟，Google 的支持。

jQuery 最有特色的語法特點就是與CSS 語法相似的選擇器，并且它支持CSS1 到CSS3 的幾乎所有選擇器，并兼容所有主流瀏覽器，這為快速訪問DOM 提供了方便。

阿里云開發者社區全面升級，一站式體驗，用得更爽：https://developer.aliyun.com?spm=a2c41.12958151.0.0（復制網址鏈接到瀏覽器，記得收藏）

讀本文約需要10分鐘，您可以先關注我們，避免下次無法找到。

本篇文章成哥繼續帶大家來學習前端教程之jQuery，它將DOM的操作進行了封裝，可以大大降低我們前端開發時操作DOM的復雜度。下面我們就一起來學習內容吧！

01 jQuery簡介

jQuery 是開源軟件，使用 MIT 許可證授權。jQuery 的語法設計使得許多操作變得容易，如操作文檔對象（document）、選擇文檔對象模型（DOM）元素、創建動畫效果、處理事件、以及開發 Ajax 程序。jQuery核心理念是write less,do more（寫得更少,做得更多），他內部幫我們把幾乎所有功能都做了封裝。

02 jQuery使用

在使用jQuery時，需要提前下載并應用jQuery之后，才能在代碼中使用，也可以通過CDN引用來使用。下面我們到jQuery官方網站下載jQuery文件，然后在HTML頁面應用具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   
9.   <!-- 通過使用jquery文件來使用jquery -->  
10.   <script src="jQuery/jquery-3.5.1.js"></script>  
11.   
12.   <!-- 通過微軟cdn來使用jquery -->  
13.   <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>  
14. </body>  
15. </html>

03 jQuery選擇器

我們先創建一個HTML頁面，然后在其內引用jquery，通過該HTML我們來演示各種jquery選擇器查詢的內容，其HTML頁面內容如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標簽</p>  
10.   <p><span>內嵌span的p標簽</span></p>  
11.   <p id="bar">帶id的p標簽 <span class="foo">內嵌class的span標簽</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標簽</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標簽在內嵌span標簽</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20. </body>  
21. </html>

（1）HTML elements選擇器

HTML elements選擇器可以將HTML頁面的div、p、span、table等標簽通過在其上加引號進行篩選，具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標簽</p>  
10.   <p><span>內嵌span的p標簽</span></p>  
11.   <p id="bar">帶id的p標簽 <span class="foo">內嵌class的span標簽</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標簽</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標簽在內嵌span標簽</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 元素選擇器，查詢html頁面中所有p標簽  
25.         var a = $("p");  
26.         // 我們將查詢到的內容打印出來  
27.         console.log(a)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>

（2）class選擇器

class選擇器就是通過class名稱找到對應的標簽對象，具體示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標簽</p>  
10.   <p><span>內嵌span的p標簽</span></p>  
11.   <p id="bar">帶id的p標簽 <span class="foo">內嵌class的span標簽</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標簽</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標簽在內嵌span標簽</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // class選擇器語法格式是'.+class名稱'如下所示  
25.         var a = $(".foo");  
26.         // 我們將查詢class名稱為foo的所有標簽對象  
27.         console.log(a)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>

（3）id選擇器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標簽</p>  
10.   <p><span>內嵌span的p標簽</span></p>  
11.   <p id="bar">帶id的p標簽 <span class="foo">內嵌class的span標簽</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標簽</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標簽在內嵌span標簽</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // id選擇器語法格式是'#+class名稱'如下所示  
25.         var bar = $("#bar");  
26.         // 將查詢到id名稱為bar的所有標簽進行打印  
27.         console.log(bar)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>

（4）組合選擇器

jquery允許在指定選擇標簽元素同時，指定其class名稱或者id來進行篩選，這種篩選方式稱其為組合選擇器，具體示例如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標簽</p>  
10.   <p><span id="boo">內嵌span的p標簽</span></p>  
11.   <p id="bar">帶id的p標簽 <span class="foo">內嵌class的span標簽</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標簽</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標簽在內嵌span標簽</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 組合選擇器語法格式"元素標簽+class名稱/id名稱"  
25.         var span_class = $("span.foo");  
26.         var span_id = $("span#boo")  
27.         // 將查詢的標簽對象打印出來  
28.         console.log(span_class)  
29.         console.log(span_id)  
30.      })  
31.   </script>  
32.   
33. </body>  
34. </html>

（5）多選擇器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標簽</p>  
10.   <p><span id="boo">內嵌span的p標簽</span></p>  
11.   <p id="bar">帶id的p標簽 <span class="foo">內嵌class的span標簽</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標簽</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標簽在內嵌span標簽</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 多選擇器,可以將多種選擇器進行組合，之間用逗號隔開  
25.         var a = $("p#bar, .foo");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>

（6）層級選擇器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標簽</p>  
10.   <p><span id="boo">內嵌span的p標簽</span></p>  
11.   <p id="bar">帶id的p標簽 <span class="foo">內嵌class的span標簽</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標簽</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標簽在內嵌span標簽</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 層級選擇器,選擇p標簽中含有span標簽的對象元素  
25.         var a = $("p span");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>

（7）屬性選擇器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標簽</p>  
10.   <p><span id="boo">內嵌span的p標簽</span></p>  
11.   <p id="bar">帶id的p標簽 <span class="foo">內嵌class的span標簽</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標簽</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標簽在內嵌span標簽</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 屬性選擇器,語法格式"標簽元素[屬性名稱=屬性值]",查詢含有my-id屬性值為my_para的p標簽  
25.         var a = $("p[my-id=my_para]");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>

04 總結

至此我們《jQuery基礎教程上篇》就講完了，下篇內容主要講解jQuery的過濾器及常用操作方法等相關知識，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

文章推薦：

程序員也需了解的主流云計算網絡架構

在線咨詢

上一篇：在吳中，哪里有學網頁設計的培訓班？
下一篇：用HTML怎么制作網頁呢？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商