jQuery知识一览

大家好，欢迎来到IT知识分享网。

一、概览

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

$.post("url", data, function (data, textStatus, jqXHR) { }, "dataType" );