、概覽

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請求：

$(selector).append(content)

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
 <div>我是原來的內容</div>
 <div>飛鳥慕魚博客</div>
</div>
<script>
 $('#mochu').append('<p>我要是插入的內容</p>');
</script>
</body>
</html>

$(selector).prepend(content)

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
 <div>我是原來的內容</div>
 <div>飛鳥慕魚博客</div>
</div>
<script>
 $('#mochu').prepend('<p>我是利用prepend方法插入的內容</p>');
</script>
</body>
</html>

$(selector).before(content)

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
 <div>我是原來的內容</div>
 <div>飛鳥慕魚博客</div>
</div>
<script>
 $('#mochu').before('<p>我是利用before方法插入的內容</p>');
</script>
</body>
</html>