jQuery学习使用和源码解读

最新推荐文章于 2021-09-27 16:34:23 发布

原创最新推荐文章于 2021-09-27 16:34:23 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了jQuery的使用方法、源码解析及方法应用等内容，适合前端开发者深入学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近更新时间：2018年5月22日10:32:39

《我的博客地图》

最近思想沦陷，成为抖音重度用户，自娱自乐，悠哉乐哉。对于前端同学而言，JavaScript函数库jQuery并不陌生，但有多少人能达到熟知和精通？可能大部分人知而不精，因为我目前就是这个层次，因此，花费大量时间来重新学习。本文主要讨论以下几个方面的问题，关键字：使用，版本，源码，函数。

1、使用

a.静态文件

常规使用方法，在项目中使用静态文件，点击进入官网下载页面（右键另存为即可下载），分为：compressed(压缩版)和uncompressed(非压缩版)，还有一个map文件，关于JavaScript Source Map相关知识点，请参考阮一峰老师的这篇文章《JavaScript Source Map 详解》。

上述三个文件对应的文件名如下：

jquery-3.3.1.min.js

jquery-3.3.1.js

jquery-3.3.1.min.map

b.外部引用

CDN使用方法，使用script标签引入

查看jQuery官方CDN，请点击这里。

jQuery官方CDN：<script src="https://code.jquery.com/jquery-3.3.1.min.js">

查看CDN官方CDN，请点击这里。

CDN官方CDN：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

菜鸟教程的CDN：<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

c.安装包

项目带有包管理工具可以使用npm或yarn

npm install jquery

yarn add jquery

2、源码

本次解读源码版本为3.3.1，总行数：10365，以下源代码由浅入深：

a.level 1

最简化的jQuery源码，一个匿名自执行函数。

(function(global,factory){
	factory( global );
})(a,b);

b.level 2

自执行函数传入了两个实参，一个window对象，一个返回jQuery对象的函数。此时，清晰可见自执行函数对外暴露了jQuery对象。

(function(global,factory){
	factory( global );
})(window,function(window){
	window.jQuery = window.$ = jQuery;// 挂载全局变量
	return jQuery;
});

c.level 3

丰富了函数体，加入严格模式，模块化方案，window对象判断。

(function(global,factory){
	"use strict";
	if(typeof module === "object" && typeof module.exports === "object"){
		module.exports = factory( global, true );//CMD 模块化方案
	}else{
		factory( global );
	}
})(typeof window !== 'undefined' ? window : this,function(window,noGlobal){
	"use strict";
	window.jQuery = window.$ = jQuery;
	return jQuery;
});

b.level 4

加入了document对象判断，加入了jQuery定义。

(function(global,factory){
	"use strict";
	if(typeof module === "object" && typeof module.exports === "object"){
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	}else{
		factory( global );
	}
})(typeof window !== 'undefined' ? window : this,function(window,noGlobal){
	"use strict";
	var version = "3.3.1",
		jQuery = function( selector, context ) {
			return new jQuery.fn.init( selector, context );
		};
	window.jQuery = window.$ = jQuery;
	return jQuery;
});

3、源码片段解析

待续...

4、方法使用——工具类

jQuery.extend();

将两个或更多对象的内容合并到第一个对象，示例：

var object = $.extend({}, object1, object2);

var object = $.extend( true,object1, object2);//递归合并，深拷贝

var object = $.extend( object1, object2);//非递归合并，直接相同的key覆盖

如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

var object = $.extend({checkAllDiv:function(){}});//此时目标对象默认是jQuery对象

jQuery.fn.extend();//一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

5、为元素绑定事件处理程序

jQuery 1.4之前的版本，.live()附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。version deprecated: 1.7, removed: 1.9

jQuery 1.4之前的版本，.bind()方法用于直接附加一个事件处理程序到存在的元素上。缺点，这些元素必须已经存在。

从jQuery 1.7开始，.on() 方法是将事件处理程序绑定到文档（document）的首选方法，在选定的元素上绑定一个或多个事件处理函数。

.click(function(){})是.on('click',function(){})的快捷方式

.click()是.trigger('click')的快捷方式，触发某元素绑定的click事件

从jQuery 1.7开始，.delegate()已经被.on()方法取代。

解除绑定

.unbind()

.off()移除一个事件处理函数。

事件类型：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。

$("div.test").bind({click: function(){},mouseenter: function(){},mouseleave: function(){}});

$("div.test").on({click: function(){},mouseenter: function(){},mouseleave: function(){}});

6、DOM操作

.append() 在每个匹配元素里面的末尾处插入参数内容。

.appendTo() 将匹配的元素插入到目标元素的最后面（译者注：内部插入）

.before() 根据参数设定，在匹配元素的前面插入内容（译者注：外部插入）

.clone()创建一个匹配的元素集合的深度拷贝副本，注意避免元素id重名

7、DOM属性

.attr() 获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。

$("img").attr("src");

$('#photo').attr('alt', 'Beijing Brush Seller');

$('#photo').attr({alt: 'Beijing Brush Seller',title: 'photo by Kelly Clark'});