`
xiaomiya
  • 浏览: 131854 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

逐行分析jQuery源码奥秘-1

阅读更多

                 逐行分析jQuery源码奥秘-1

 

我们要把jquery先从整个大局的分析,在从大的模块分析,最后在逐行分析。


()()把匿名函数放到小括号里,,
匿名函数自执行,好处(就是在这个匿名函数里面写的都是局部,防止冲突)。
全部 是局部的那也不行,我们也要在外面找到一些方法  如:$(),
所以要对外提供接口。(8826)
window下挂载$()与JQuery();

(function(){

(21,94)定义了一些变量和函数
比较重要的一个函数 JQuery = function(){};就是我们通过$或者jquery找到这个方法。8826行提供对外的接口就可以找到。

(96,283)给JQ对象添加一些方法和属性。jquery是一个基于面向对象的程序。
$(“#div1”).css();
$(“#div2”).html();
如63行 是一个new 构造函数的过程,所以返回的是 一个jquery对象。。这个对象就可以调用这个方法 。。。

(285,347)extend   JQ的继承的方法。
希望后续添加的代码可以通过extend方法挂载到JQ对象上,后续的扩展和插件的扩展。

(349,817)JQuery.extend()  扩展一些工具方法。
$().css();$().html();前面是一个对象,所以是实例方法。。原生的js不能用的。
$.trim (), $.proxy();前面是$,函数来扩展方法,所以是扩展静态方法。就叫做工具方法,可以给juery对象来用也可以给原生的js来用。
关系:静态方法,是最底层的方法,,,实例方法是高级的一些方法,
所以在实例方法里面中有调用静态方法。

(877,2856) Sizzle  复杂选择器的实现。
如$("ul li + p input.class").css();查找非常麻烦。

(2880,3042) callbacks  回调对象,作用,对函数的统一管理(函数比较多的时候,)
Function fn1(){alert(1)}
Function fn2(){alert(2)}
Var cd = $.callbacks();
Cb.add(fn1);cb.add(fn2); cd.fire();统一弹出来1,2
cd.remove(fn2)把函数2统一删掉了。

(3043,3183) deferred  延迟对象 ,作用,对异步的统一管理(ajax,定时器,创建标签)
setIimeout(function(){
alert(1);
},1000);
alert(2);
怎么来先弹出1,再弹出2.就要用到延迟对象。
Var dfd=$.deferred();
setIimeout(function(){
alert(1);
dfd.resolve();
},1000);
dfd.done(function(){
alert(2);
});

(3184,3295)support  功能检测 ,如通过功能来检测不同浏览器版本等。
(3198)看注释就可以看到不同版本的浏览器

(3308,3652) data()   数据缓存。
(避免大数据量的元素挂载,预防内存泄漏)
$(“#div1”).data(“name”,”hello”);
$(“#div1”).data();通过name来找到hello

(3653,3797) queue()入队,dequeue()出对   队列管理,
$(“#div1”).animate({left:100});
$(“#div1”).animate({top:100});
$(“#div1”).animate({width:100});
运动

(3803,4299) attr()  prop() val() addClass()等等   对元素属性的操作。
未完待续

(8826)  window.jQuery = window.$=jQuery; 提供对外的接口。

})()

 

分享到:
评论

相关推荐

    jQuery源码分析-插件

    jQuery源码分析-插件

    jQuery源码分析-事件(1).

    jQuery源码分析-事件(1).

    jQuery源码分析-初步

    jQuery源码分析-初步

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    JQuery源码的奥秘逐行分析视频教程

    ### JQuery源码的奥秘逐行分析视频教程 #### JQuery简介 JQuery 是一款轻量级的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。JQuery 提供了一个简洁且强大的 API 接口,...

    jQuery源码分析-魔术方法

    jQuery源码分析-魔术方法

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...

    jQuery源码分析-事件(2).

    jQuery源码分析-事件(2).

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    jquery.datepicker-zh-CN.js

    <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...

    插件jquery-ui-timepicker-addon.js

    jquery插件jquery-ui-timepicker-addon.j

    jquery-migrate-3.0.0.min.js 含源码

    jquery-migrate-3.0.0.min.js 含源码 包含以下文件: jquery-migrate-3.0.0.min.js jquery-migrate-3.0.0.js // 这个是源码哦 截至2017.11.21, jQuery3.x 最新最稳定版本

    jquery-ui-datepicker中文版

    jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...

    jquery.mobile-1.4.5.min.js 含sources源码

    jquery.mobile-1.4.5.min.js A Touch-Optimized Web Framework jQuery Mobile is a ...jquery.mobile-1.4.5.js // 这个是源码哦 jquery.mobile-1.4.5.min.css jquery.mobile.structure-1.4.5.min.css

    jQuery-, jQuery源码解读 -- jQuery v1.10.2.zip

    源码分析可以让我们理解jQuery如何使用CSS属性和时间函数实现平滑的动画效果。 7. **插件扩展机制** jQuery的插件系统是其灵活性的关键。通过研究`$.fn.extend()`和`$.extend()`,我们可以学习如何编写自己的...

    jquery-ui-1.9.2.custom.min.js

    在我们讨论的文件 "jquery-ui-1.9.2.custom.min.js" 中,我们可以看到这是该库的一个特定版本——1.9.2的自定义最小化版本。这个文件的核心在于“定制”和“最小化”,这两个特点使得它在实际项目中更具灵活性和效率...

    jQuery源码分析-03构造jQuery对象

    ### jQuery源码分析—构造jQuery对象 #### 一、源码结构概览 根据所提供的文件内容,本节将深入分析如何构建jQuery对象及其核心构造逻辑。首先,让我们从整体上理解jQuery构造函数的设计思路。 ##### 总体结构 ...

    jquery-ui-1.10.3.min.js

    jquery-ui-1.10.3.min.js

    jQuery摄像头插件jquery-webcam-plugin

    **jQuery摄像头插件jquery-webcam-plugin** 在网页开发中,集成摄像头功能可以帮助用户实时捕捉图像,广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库,它...

Global site tag (gtag.js) - Google Analytics