首页 > 编程语言 >jQuery源码系列(一)

jQuery源码系列(一)

时间:2022-10-27 20:37:33浏览次数:57  
标签:jQuery function 系列 DOM 对象 元素 selector 源码


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 );
}

待续。。。


标签:jQuery,function,系列,DOM,对象,元素,selector,源码
From: https://blog.51cto.com/u_12344418/5801923

相关文章

  • 【线性代数】 抽丝剥茧系列之向量空间和子空间
    1.向量空间和子空间简介Q1:什么是向量空间?设W为向量空间V的一个非空子集,若W在V的加法及标量乘法下是封闭的,就称W为V的线性子空间。简而言之,空间$R^n$由拥有$n......
  • 【线性代数】 抽丝剥茧系列之矩阵的秩与方程解的情况
    正文1.秩简介矩阵的秩是线性代数中非常重要的概念,本篇主要围绕矩阵的秩和方程解的情况展开,其余内容不做阐述。对于方程Ax=b:$$\begin{cases}x_1+x_2+x_3=12\x......
  • 【线性代数】抽丝剥茧系列之通过初等变换求逆的原理
    正文相信大家都懂得怎么用矩阵求逆,但是知道为什么通过初等行变换可以求逆吗?对于:$$\begin{bmatrix}A&E\end{bmatrix}\Longrightarrow\begin{bmatrix}E&A^{-1}\end{bma......
  • 手写 Java HashMap 核心源码
    手写JavaHashMap核心源码手写JavaHashMap核心源码上一章手写LinkedList核心源码,本章我们来手写JavaHashMap的核心源码。我们来先了解一下HashMap的原理。Ha......
  • 万物皆可集成系列:低代码对接阿里物流API实现快递跟踪
    随着各大电商网购平台的发展,快递业已形成一个规模庞大的产业,据统计,全球快递企业已超过千家,而快递查询对于电商平台而言是最基础的功能之一,通过输入快递单号,不用区分具体是哪......
  • 手写 Java HashMap 核心源码
    手写JavaHashMap核心源码手写JavaHashMap核心源码上一章手写LinkedList核心源码,本章我们来手写JavaHashMap的核心源码。我们来先了解一下HashMap的原理。H......
  • iptables系列教程
    2022-10-2014:47:32星期四iptables系列教程(一)|iptables入门篇iptables系列教程(二)|iptables语法规则......
  • 脱单盲盒源码(交友盲盒源码)程序开发
     交友盲盒程序是通过手机操作的约会应用程序。通过访问智能手机的GPS位置以及轻松访问数字照片库和移动钱包,它通常会升级约会的传统性质。它不仅简化了,而且还加快了选......
  • NFC刷卡芯片系列技术问题汇总
    继之前我们在《智能门锁》里有提到使用的几款13.56M刷卡芯片,本期我们先来讲讲13.56M标配版的几款芯片会遇到的一些常见问题解答。标配版有:SI522/SI522A/SI523;低配版有:CI5......
  • vue源码分析-事件机制
    这个系列讲到这里,Vue基本核心的东西已经分析完,但是Vue之所以强大,离不开它提供给用户的一些实用功能,开发者可以更偏向于业务逻辑而非基本功能的实现。例如,在日常开发中,我们......