、概览

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>