jQuery选择这样返回对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context );//从jQuery.fn里调用的方法 }; jQuery.fn = jQuery.prototype = { //这里jQuery.prototype,目前在这段代码中没用 . init: function(){ console.log("初始化完成"); return th…
要学习一个库首先的理清它整体架构: 1.jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)(21,94)                定义了一些变量和函数jQuery=function(){}(96,280)        给jQuery添加一些方法和属性,jQuery.fn=jQuery.prototype(285,347)        extend:        jQuery的一些继承方法        更容易进行后续的扩展           …
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用的东西,为开发者提供了优美短小而精悍的类库.其使用简单,文档丰富,而且性能高效,能极大地提高 web 系统的开发效率.因此可以说是 web 应用开发中最佳的 Js 辅助类库之一.大部分开发者正在抛弃 Prototype,而选择Jquery 做为他们进行 web 开发的 JS 库. 如是开发人员仅仅只…
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 jQuery 源码整体大致架构,主要分为以下几个点:   A 通过自执行函数,在内部将 jQuery (jQuery 为一个函数,同时,在 JS 中,函数也为对象)以 window.jQuery=window.$ 引入,供用户直接便可使用 $.jQuery 调用.       B 以 C#.Jav…
前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边.说jQuery博大精深,还要我静下心来研究, 别净整些没用的.弄的我一脸懵逼,WTF?我从头到尾都没有说我讲的多高端,我连标题都写的"浅谈".就完全不能让我等菜鸟慢慢先从的简单的入手吗? 但是有位名为"萌新"三好童鞋,就做的非常好."啪"!,反手就…
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, dataAndEvents, deepDataAndEvents)    ;jQuery底层方法,返回DOM引用    ;elem是要复制的DOM元素,dataAndEvents和deepDataAndEvents分别表示是否复制克隆元素的数据和事件 和 是否复制深度复制数据和事件 $.fn.clo…
TOMCAT源码调试入口是Bootstrap类的main方法,我的启动参数VM: -Dcatalina.home=E:/Tomcat_Source_Code/apache-tomcat-8.0.53-src/catalina-home -Dcatalina.base=E:/Tomcat_Source_Code/apache-tomcat-8.0.53-src/catalina-home -Djava.endorsed.dirs=E:/Tomcat_Source_Code/apache-tomca…
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offsetParent获取最近的定位祖先元素,position用于获取获取第一个匹配元素相对于最近定位祖先元素的坐标,如下: offset(options)              ;返回匹配元素集合中的一个元素的文档坐标,或者设置每个元素的文档坐标,;不能带单位,默认是px,有两种使用方法: offse…
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数1是一个对象时,表示一次性设置多个css样式 css(name,func)       ;参数2是函数时,设置的是函数返回值 css(name,'')            ;参数2是空字符串时,表示删除该样式(删除style属性上的) css(name)              ;如果忽略第二个…
jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为5个子模块来实现:插入元素.删除元素.复制元素.替换元素和包裹元素,本节讲解第一个子模块:插入元素 插入元素模块可用于新增DOM节点,修改文本节点等,API如下: append(content)      ;在被选元素子节点的末尾插入指定内容,内部调用appendChild(elem)方法    ;…
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.border. margin等,主要有六个API,如下: heihgt(size).width(size)   ;获取第一个匹配元素的高度.宽度,或者通过调用.css(name,value)方法来设置高度.宽度. size可以是字符串或者数值 innerHeight().innerWidth() ;获…
html和text都可以获取和修改DOM节点里的内容,方法如下: html(value)     ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容,                ;value可选,可以是html代码或返回html代码的函数,如果没有参数则获取匹配元素集合中第一个元素的innerHTML内容 text(text)         ;获取匹配元素集合中所有元素合并后的文本内容,或者设置每个元素的文本内容,封装了createTextNo…
scrollLeft和scrollTop用于获取/设置滚动条的,如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚动条距离 如果没有传入val值则获取滚动条距离,如果有设置val则标识设置滚动条距离,还是举个栗子,以scrollTop为例,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu…
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素                                ;该方法会遍历匹配元素集合,在每个元素上调用.wrapAll()方法        ;不同于wrapAll()的是该方法会在每个匹配元素外面都套一层html元素. wrapAll(html)            ;会将html转化为一个DO…
本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value)     ;使用提供的新内容来替换匹配元素集合中的每个元素.value是新内容,可以是html字符串.DOM元素.jQuery对象或返回新内容的函数. replaceAll(value)        ;使用匹配元素集合中的元素替换目标元素.内部执行.replaceWith(value)方法,只是语法顺序上不同.类似于append()和appendTo(…
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: empty()                                   ;移除匹配元素的所有子元素.        ;先移除所有后代元素关联的数据和事件,以避免内存泄漏.然后移除子元素. remove(selector,keepData)    ;从匹配元素中移除selector元素.  …
jQuery返回的对象本质上是一个JavaScript对象,而入口模块则可以保存对应的节点的引用,然后供其它模块操作 我们创建jQuery对象时可以给jQuery传递各种不同的选择器,如下: false ;返回一个空jQuery对象 DOM节点 ;返回包含该DOM元素引用的jQuery对象. body ;字符串'body',返回包含body元素引用的jQuery对象 单独标签 ;调用document.createElement创建标签对应的DOM元素 较复杂的html代码 ;调用jQuery.b…
将变量局部化 作为一个库首要解决的问题就是防止影响全局的变量.自执行匿名函数可以很好的实现这一点. 传入window,undefiend是将全局变量改为局部变量,根据作用域链访问原理,访问更快一些,.undefined不传值实际就是传入undefined: (function(window, undefined) { var jQuery = function() {} // ... window.jQuery = window.$ = jQuery; })(window); 无new实例化 f…
将类数组对象转化为数组对象 javascript中有许多类数组对象,比如HTMLCollection,NodeList,arguments.她们的特点是和数组一样有length属性,并且有0,1,2这样的位置属性.在代码编写中我们经常需要将他们转化为数组对象. //mini类数组对象 var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 } console.log(Array.prototype.…
2.1.bug通过索引查询 这里的#13335是bug的索引,如何查询呢? 第一步,浏览器地址栏输入"https://bugs.jquery.com/". 第二步,在网页的搜索框里输入索引值,那么就可以查询bug的更改历史(changelogs)了. 2.2 "use strict",不使用严格模式(20行) 代码不规范就会报错.IE的低版本并不支持,火狐可能假死.所以,这一行是一条注释,并不提倡使用. "use strict"; a=10; /…
异步队列用于实现异步任务和回调函数的解耦,为ajax模块.队列模块.ready事件提供基础功能,包含三个部分:Query.Callbacks(flags).jQuery.Deferred(funct)和jQuery.when().本节讲解Callbacks,也就是回调函数列表 回调函数用于管理一组回调函数,支持添加.移除.触发.锁定和禁用回调函数,为jQuery.ajax.jQuery.Deferred()和ready()事件提供基础功能,我们也可以基于它编写新的组件. 使用方法:$.Callb…
数据缓存是为了解决内存泄露,他的原理是,当我们将数据存储到一个对象上面,实际上是将所有的数据存到一个单独的数据对象里,而这个对象只提供一个接口,这个接口可以访问自己存在数据对象里自己的数据. 这是一个简单的数据缓存 var cache= {}; function set(obj,name,value){ //在对象上存储一个属性,用作访问数据的接口 obj.expando = 1; //初始化对象,并在我们接口所提供的位置存放数据 cache[obj.expando] = {} cache[ob…
回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表. 最简单的缓存对象 function Callbacks(){ var list = [], self = { add: function(fn){ list.push(fn); }, remove: function(fn){ var index; if((index = list.indexOf(fn)) > -1){ list.splice( index, 1 ); } }, fire: function(value…
提供一种方法来执行一个或多个对象的回调函数, Deferred对象通常表示异步事件. 它是回调对象的拓展运用,在jQuery当中非常依赖回调对象. 一个简单的,只解决成功状态下的缓存实例 function myDeferred(){ var arr = []; return { done: function(a){ arr.push(a); }, solve : function(){ arr.shift()(); } } } var a = myDeferred(); a.done(funct…
each()实现 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; jQuery.fn = jQuery.prototype = { selector: "", init: function(selector){ //仍然是mini的选择器. var result = document.querySelectorAll(selector); fo…
一.apply方法和call方法的用法: apply方法: 语法:apply(thisObj,[,argArray]) 定义:应用某一对象的一个方法,用另一个对象替换当前对象. 说明:如果argArray不是一个有效的数组或者不是arguments对象,那么将导致一个TypeError:如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数. call方法: 语法:call(thisObj[,arg1[,arg2[,...[,…
$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } 下面是init方法代码: init: function( selector, context, rootjQuery ) { var match, elem; if ( !selector ) { return this; } if ( typ…
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaron/jQuery 正在编写的书 - jQuery架构设计与实现 本人在慕课网的教程(完结) jQuery源码解析(架构与依赖模块) 64课时 jQuery源码解析(DOM与核心模块)64课时 jQuery源码分析目录(完结) jQuery源码分析系列(01) : 整体架构…
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaron/jQuery 正在编写的书 - jQuery架构设计与实现 本人在慕课网的教程(完结) jQuery源码解析(架构与依赖模块) 64课时 jQuery源码解析(DOM与核心模块)64课时 jQuery源码分析目录(完结) jQuery源码分析系列(01) : 整体架构 jQuery源码分析系列(…
BS