//源码剖析都基于jQuery-2.0.3版本,主要考虑到兼容IE 一.关于jQuery对象实例化的逻辑: 整个jQuery程序被包裹在一个匿名自执行行数内: (function(window,undefined){ //...... })(window); 外部程序不能直接调用jQuery对象的属性和方法,jQuery所有方法和属性被变成局部私有的.例如: (function(window,undefined){ var a = "我是a"; var b = function(a){…

终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 jQuery 源码整体大致架构,主要分为以下几个点:   A 通过自执行函数,在内部将 jQuery (jQuery 为一个函数,同时,在 JS 中,函数也为对象)以 window.jQuery=window.$ 引入,供用户直接便可使用 $.jQuery 调用.       B 以 C#.Jav…

本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94)     定义了一些变量和函数,   jQuery = function(){}; (96,283)   给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用) (285,347)   extend : jQuery的继承方法 (349,817)   jQuery.extend():扩展一些工具方法(静态方法,直接通…

写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.js文档,下载地址:http://jquery.com/download/ 注意选择其中的development版本进行下载,如下图所示 开发版本的JQ.js属于非压缩的源文件,方便我们阅读和分析其代码. 下载完用Dreamweaver或其它代码编辑器打开查阅即可.我们今后分析的代码也是基于1.11.0版本的J…

jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ) { var jQuery = function( selector, context ) {//首先定义一个内部jQuery.注意,此jQuery只是一个工厂内部的变量,并非我们在外面引用的那个jQuery或$ return new jQuery.fn.init( selector, cont…

jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑的童鞋能有一点点的帮助(我是从一个小白的角度出发,感觉挺容易理解的,顺带说下视频中jquery源码选取的是2.0.3版本). 我们都知道,使用$和jQuery效果是一样的,比如: <button id="btn">点我</button> $("#btn&q…

这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含的所有js代码都会被执行. 二.在22行中声明的jQuery变量最终接受的是内部创建的jQuery构造器函数. 这个变量在9284行中被赋值给了window.jQuery属性.此时的jQuery可以被外界访问到了,并且也有了别名$. 三.97~319行,对jQuery的原型进行了重写.因为重新原型必…

上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解析: data_user = new Data();    //对外使用的数据缓存对象data_priv = new Data();    //内部的数据缓存对象,内部使用 jQuery.extend({      //在jQuery中添加静态方法 acceptData: Data.accepts,…

静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = { each:function(callback,args){ return jQuery.each(this,callback,args); } } 实例方法取与静态方法,换句话来说静态与实例方法共享设计,静态方法挂在jquery构造器上面 方法链式调用的实现 $("li").eq(0…

如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.getElementsByName...官方提供超长方法 api . jQuery 整体源码,本人也还在阅读中,暂时记录一下.(为什么要看源码,原因很简单---- 一 好好了解一下 jQuery 原理  二 为了装逼显摆).   一  使用 jQuery 时候,首先需引入 jQuery 文件,而之后,大家…

最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代码,在前端行业算什么水平 jQuery source viewer jQuery 2.0.3 源码分析系列 jQuery 2.0.3 源码分析Sizzle引擎 jQuery 的原型关系图 妙味课堂:一起学习jQuery源码[逐行分析jQuery源码的奥秘] 浅谈 jQuery 事件源码定位问题 慕课…

这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2");     //给元素div的class属性添加box1和box2 $("#div1").removeClass("box1");     //删除元素div的class属性值box1 $("#div1").toggleClass("…

jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等.对于json这种数据量大的,就适合用data方法来添加,而data方法就是jQuery缓存机制最重要的方法. jQuery中为什么要用缓存机制系统呢?因为DOM元素与js对象之间互相引用,在大部分浏览器下会引起内存泄漏.为了解决这个问题,jQuery就写了一个缓存机制系统.举个例子: var di…

我们首先来讲下Callbacks是如何使用的:第一个例子 function a(){} function b(){} var cb = $.Callbacks(); cb.add(a); cb.add(b); cb.fire();      //就会先执行a方法,再执行b方法 上面大概的意思是:add方法,就是把方法添加到数组list中,每执行一次,就添加一个方法.而fire方法,就是把list数组中的方法按顺序执行. 使用场景:第二个例子 function a(n){ } (function(…

我们先来看when方法是如何使用的: var cb = $.when();   //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状态 $.Deferred()也是返回一个延迟对象,那么它们的区别是什么呢?$.Deferred()只能针对一个延迟对象做成功,失败,进行中的操作,而$.when()可以针对多个延迟对象做以上操作.举个例子: function a(){ var cb = $.Deferred(); cb.resolv…

(function (window, undefined) { //构建jQuery对象 var document = window.document, navigator = window.navigator, location = window.location; var jQuery = (function () { var jQuery = function (selector, context) { return new jQuery.fn.init(selector, context…

scrollLeft和scrollTop用于获取/设置滚动条的,如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚动条距离 如果没有传入val值则获取滚动条距离,如果有设置val则标识设置滚动条距离,还是举个栗子,以scrollTop为例,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu…

(function (global, factory) { factory(global); })(this, function (window, noGlobal) { var rootjQuery; var class2type = {}; var toString = class2type.toString; var arr = []; var indexOf = arr.indexOf; var myJQuery = function (selector, context) { retu…

笔记一里记录,jQuery的总体结构如下: (function( global, factory ) { //调用factory(工厂)生成jQuery实例 factory( global ); }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { //factory实现,jquery源码主体部分 })); 那么这个生成jQuery的工厂是咋样的? 酱紫的: function( w…

jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jquery-2.0.3的代码结构如下 首先最外层为一个闭包, 代码执行的最后一句为window.$ = window.jquery = jquery 让闭包中的变量暴露倒全局中. 传参传入window是为了便于压缩 传入undefined是为了undifined被修改,他是window的属性,可以被修…

神奇的jQuery可以这样玩jQuery("#id").css()或 jQuery("#id").html() 这么玩jQuery("#id")这个对象是怎么创建出来的 所以打算来扒一扒 //jquery源码部分var jQuery = function(){ return new jQuery.fn.init();} //构造函数的原型给了fnjQuery.fn = jQuery.prototype = { } jQuery.fn.init =…

一.前言 ReentrantLock 是基于 AQS 实现的同步框架,关于 AQS 的源码在 这篇文章 已经讲解过,ReentrantLock 的主要实现都依赖AQS,因此在阅读本文前应该先了解 AQS 机制.本文并不关注 ReentrantLock 如何使用,只叙述其具体实现. 二.ReentrantLock 的继承体系以及特点 AQS 是基于模板方法模式设计的,理解该设计模式可以帮助阅读 ReentrantLock 源码,当然不熟悉该设计模式并不影响下文的阅读. 首先我们来看 Reentra…

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 这两个属性都是用于合并两个或多个对象的属性到target对象. deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并. 通过这种方式可以在jQuery或jQuer…

html和text都可以获取和修改DOM节点里的内容,方法如下: html(value)     ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容,                ;value可选,可以是html代码或返回html代码的函数,如果没有参数则获取匹配元素集合中第一个元素的innerHTML内容 text(text)         ;获取匹配元素集合中所有元素合并后的文本内容,或者设置每个元素的文本内容,封装了createTextNo…

jQuery中要扩展方法或者属性都是通过extend方法实现的.所谓的jQuery插件也是通过extend方法实现的. jQuery.extend扩展的是工具方法,也就是静态方法.jQuery.fn.extend扩展的是实例方法. 当只传入一个对象的时候,里面的方法和属性是扩展到this上的.比如: $.extend( { aaa:function(){}, bbb:function(){} } ) ,这里的this是$,所以用这种形式$.aaa()调用. $.fn.extend( { aaa:…

前言:最近想重写一个dropdown插件,于是想到了使用jquey实现插件,于是重温了一波$.extend()的知识,然后总结了这篇笔记 正文: $.extend(src)  jQuery.extend(  target, object1 [, objectN ] ) 该方法将src合并到jquery的实例对象中去 下面是一个例子: var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dtarget 目标参数 这样就可以将src1,…

内存泄露 什么是内存泄露? 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.在C++中,因为是手动管理内存,内存泄露是经常出现的事情.而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使用的情况下几乎不会发生内存泄露.浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露 常见内存泄露的几种情况 1.循环引用 2.Javascript闭包 3.DOM插入一个DOM对象被一个Javascript对象引用,与此同时又引用同…

jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的. jQuery.extend({ ...... type: function( obj ) {    //$.type(),判断类型 if ( obj == null ) {   //null,undefined return String( obj );    //返回null,undefined字符串 }     //core_toString = {}.toString …

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offsetParent获取最近的定位祖先元素,position用于获取获取第一个匹配元素相对于最近定位祖先元素的坐标,如下: offset(options)              ;返回匹配元素集合中的一个元素的文档坐标,或者设置每个元素的文档坐标,;不能带单位,默认是px,有两种使用方法: offse…

jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如下:animate(prop,speed,easing,callback),参数如下: prop ;对象,               ;包含将要动画的样式 speed ;字符串或数字    ;动画运行持续时间,单位毫秒,可以设置为"slow"."normal".&qu…