ess,do more”的理念,极大的提升了JavaScript开发体验。
主要核心特点:
1、兼容主流浏览器
2、具有独特的链式语法和短小清晰的功能接口
3、具有高效灵活的CSS选择器,而且可以对CSS选择器进行扩展
4、拥有便捷的插件扩展机制和丰富的插件
Jquery模块分为三个部分:入口模块、底层支持和功能模块。
jQuery-3.4.0.js源码的总体结构如下:
(function(global,factory){
})( typeof window !== "undefined" ? window : this, function(window,noGlobal){})
jQuery代码被包含在一个立即执行的匿名函数里面。当加载完jQuery代码后,就立即执行匿名函数。通过这样的匿名函数来构建一个函数作用域,在作用域中的代码不会和已有的同名函数、方法和变量以及第三方库起冲突。
这种匿名函数有如下三种写法:
1、常见的写法
(function(){})()
2、
(function(){}());
3、
!function(){}
构造jQuery对象
jQuery对象是一个类数组对象,包含了连续的整形属性、length属性和大量的jQuery方法。$()是jQuery()的缩写。jQuery()有如下几种用法:(jQuery构造函数.png)
jQuery(selector[,context])
接受一个字符串参数,首先判断该字符串是选择器还是HTML代码;若是选择器表达式,那就遍历文档,查询与之匹配的DOM元素,创建一个包含这些DOM元素的jQuery对象。要是没有与之匹配的元素,就创建一个空的jQuery对象。
参数context是可选的,表示选择器的上下文,限定查找的范围;如下代码中,
<body>
<div class="box">
<span id="span">span</span>
</div>
<span>655698</span>
<script>
$("div.box").click(function(){
$('span',this).addClass("bar");
})
</script>
</body>
this指定查找范围为class是box的div内查找span元素。若是没有添加选择器的上下文,则在整个文档中查找span元素进行相关的操作。(this).find(“span”),比较常用后者的写法。
jQuery(html[,ownerDocument])、jQuery(html,props)
传入的参数是一段HTML代码,jQuery则使用这段HTML代码创建新的DOM元素,并且创建一个包含这些DOM元素的jQuery对象,是使用了innerHTML机制创建。
传入的参数是单独的HTML标签元素,则是使用document.createElement()创建DOM元素。
ownerDocument用于指定创建DOM元素的文档对象,若不传入,则是默认为当前文档对象。
传入的参数是单独的HTML标签元素,props参数包含了属性、事件的对象,使用document.createElement()创建DOM元素,props被传入.attr()方法,.attr()方法将参数中的属性和事件设置配置到刚创建的DOM元素中。
jQuery(element)、jQuery(elementArray)
传入一个DOM元素或者DOM数组,则把DOM元素封装在jQuery对象中并且返回。如下:
<body>
<div class="box">
<span id="span">span</span>
</div>
<span class="span">655698</span>
<script>
$("div.box").click(function(){
$(this).css("color","red")
});
</script>
</body>
jQuery(object)
传入的是普通JavaScript对象,则把对象封装到jQuery对象中并返回。
jQuery(callback)
绑定ready事件监听函数,在DOM结构加载完成后执行
jQuery(jQuery object)
传入的是一个jQuery对象,则创建该jQuery对象的一个副本并返回,副本和传入的jQuery对象完全相同。
jQuery()
不传入任何的参数,就返回一个空jQuery对象。
构造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) {
// 定义jQuery的本地副本
jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context);
},
//局部变量(原型属性和方法)的声明
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,
constructor: jQuery,
// The default length of a jQuery object is 0
length: 0,
toArray: function () {
return slice.call(this);
},
},
jQuery.extend = jQuery.fn.extend = function () {}
jQuery.extend({/**静态属性和方法 */});
return jQuery;
})
jQuery.fn.init(selector,context)
相关代码如下:
init = jQuery.fn.init = function( selector, context, root ) {
var match, elem;
}
定义的构造函数jQuery.fn.init,接受三个参数:
selector:可以是undefined、DOM元素、字符串、函数、jQuery对象、普通JavaScript对象。
context:传入DOM元素、jQuery对象、普通JavaScript对象或者不传入。
root:包含了document对象的jQuery对象,用于document.getElementById()查找失败、selector是选择器表达式且未指定context、selector是函数的情况。
参数selector可以转换为false
当selector是undefined、空字符串‘null时,直接返回this(空jQuery对象)
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
参数selector是DOM元素
若参数selector有属性nodeType,则认定是DOM元素,手动设置第一个元素和属性指向该DOM元素,length为1,再返回包含了该DOM元素引用的jQuery对象,源码如下:
// HANDLE: $(DOMElement)
if ( selector.nodeType ) {
this[ 0 ] = selector;
this.length = 1;
return this;
}
参数selector是字符串
先检测selector是HTML代码还是#id。如下:
if ( typeof selector === "string" ) {
if ( selector[ 0 ] === "<" &&
selector[ selector.length - 1 ] === ">" &&
selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
待续。。。