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 );
      }待续。。。
                










