jQuery源码
liangklfang
https://github.com/liangklfangl
展开
-
jQuery动画模块源码分析之queue,dequeue,clearQueue方法源码分析
问题1:当我们回调队列中的函数的时候会传给他什么参数,他的上下文是什么/*通过_queueHooks我们知道,他其中封装了Callbacks对象,他可以提前使得我们清除元素上面的队列集合,同时once和memory告诉我们调用fire以后,就会使得Callbacks中封装的集合变成[],所以多次调用fire是没有意义的*/_queueHooks: function( elem, type )原创 2015-12-08 10:58:02 · 984 阅读 · 0 评论 -
jQuery源码分析之jQuery.makeArray函数
makeArray函数/*首先弄清楚什么是类数组!http://www.365mini.com/page/jquery_makearray.htmfunction w( html ){ document.body.innerHTML += "" + html;}var obj = { 0:"CodePlayer", 1: "Hello", 2: 18, 3: tr原创 2015-09-28 09:23:05 · 918 阅读 · 1 评论 -
源码分析之jQuery.merge函数
merge函数merge: function( first, second ) {//如果second.length是一个字符串,那么+second.length就是数字了,通过typeof +"123"将返回number//如果是+ "xx"那么就会返回0,typeof还是会返回numbervar len = +second.length,j = 0,i = first.原创 2015-09-28 09:06:10 · 2130 阅读 · 0 评论 -
$.type源码分析
$.type工具函数var class2type = {};var toString = class2type.toString;//保存tostring,调用{}.tostring.call(obj);或者Object.prototype.tostring.call(obj);获取内置类型var hasOwn = class2type.hasOwnProperty;//所以c原创 2015-09-22 19:20:20 · 792 阅读 · 0 评论 -
jQuery源码分析之jQuery.Event,$.stopImmediatePropagation,$.preventDefault,$.stopPropagation
//jQuery.event函数几种调用方式!//new jQuery.Event( type, typeof event === "object" && event );//其中type有可能是click字符串,在trigger函数里面调用了该方法,调用代码是://type = hasOwn.call( event, "type" ) ? event.type : event也就是t原创 2015-09-27 09:54:13 · 1277 阅读 · 1 评论 -
$.each工具函数
$.each工具函数/*each函数的几种用法提前回顾$.each([1,2,3], function(key, value){ alert("[" + key + "]=" + value); return false;});}); 如果传入第三个参数,那么this指向前面那个object第n个属性,n表示迭代次原创 2015-09-22 19:46:28 · 679 阅读 · 0 评论 -
jQuery源码分析之parseHTML方法
请首先阅读buildFrament以及正则表达式相关源码源码如下://将字符串转化为节点数组!通过log可以知道var rsingleTag = (/^(?:|)$/);jQuery.parseHTML1 = function( data, context, keepScripts ) { if ( !data || typeof data !== "string" ) { re原创 2015-10-28 15:14:51 · 3547 阅读 · 0 评论 -
jQuery源码分析之parseJSON方法
源码如下:var rvalidtokens = /(,)|(\[|{)|(}|])|"(?:[^"\\\r\n]|\\["\\\/bfnrt]|\\u[\da-fA-F]{4})*"\s*:?|true|false|null|-?(?!0\d)\d+(?:\.\d+|)(?:[eE][+-]?\d+|)/g;jQuery.parseJSON1 = function( data ) {原创 2015-10-28 16:27:48 · 3089 阅读 · 2 评论 -
jquery的trigger和triggerHandler区别
jquery的trigger和triggerHandler区别原创 2015-07-06 10:44:47 · 6885 阅读 · 1 评论 -
jQuery中的isArrayLike函数
//isArrayLike函数,该函数是在jquery内部调用的function isArraylike( obj ) {// Support: iOS 8.2 (not reproducible in simulator)// `in` check used to prevent JIT error (gh-2145)// hasOwn isn't used here d原创 2015-09-22 18:41:57 · 2844 阅读 · 0 评论 -
jQuery源码分析之closest,has,addBack,addSelf,add方法
closest源码分析: //调用方式:jQueryObject.closest( expr [, context ] )closest: function( selectors, context ) {var cur,i = 0,//选择器选择对象的个数l = this.length,//保存结果集合matched = [],//var rneed原创 2015-10-07 19:42:11 · 1385 阅读 · 0 评论 -
jQuery源码分析之$.inArray()函数
//var deletedIds = [];//保存indexOf函数句柄//var indexOf = deletedIds.indexOf;//inArray函数inArray: function( elem, arr, i ) {var len;//表示有数组对象if ( arr ) {//如果有indexOf原生方法就用原生方法if ( indexOf原创 2015-10-06 14:41:31 · 2185 阅读 · 1 评论 -
jQuery源码分析之wrap,wrapInner,wrapAll,unwrap方法
首先我们回忆一下each实例方法的用法:$(document).ready(function(){ $("button").click(function(){ $("li").each(function(i,elem){ //首先这个each实例函数中,第一个参数是调用对象下标,第二个参数是调用对象DOM元素 //this指的是调用对象的DOM元素!原创 2015-10-12 13:51:48 · 1269 阅读 · 0 评论 -
jQuery源码分析之jQuery(selector,context)详解
首先我们给出下面的HTML代码: child1 child2 child1 child2 调用方式1:第二个参数context是DOM元素var doms=$(".child",$("#parent")[0]);console.log(doms);这时候第二个参数是DOM对象,打印[div.child, div.child,原创 2015-12-19 10:25:22 · 4453 阅读 · 0 评论 -
jQuery源码分析之offset,position,offsetParent方法以及源码中常见的cssHooks,swap代码
offset方法源码分析://获取当前元素相对于文档的偏移量 offset: function( options ) { //如果有参数表示设置调用对象的相应属性! if ( arguments.length ) { return options === undefined ? this : this.each(function( i ) { jQue原创 2015-10-18 17:36:58 · 2788 阅读 · 0 评论 -
jQuery源码分析之contains函数
//contains函数//调用方式:jQuery.contains( container, contained )//jQuery,.contains底层调用的方法来自于JS的contains方法和compareDocumentPosition方法Sizzle.contains = function( context, elem ) {// Set document vars i原创 2015-10-07 07:52:43 · 2059 阅读 · 0 评论 -
jQuery源码分析之parents,parentsUntil,next,prev,nextAll,prevAll,nextUntil,prevUntil,siblings,children
jQuery源码分析之arents,parentsUntil,next,prev,nextAll,prevAll,nextUntil,prevUntil,siblings,children,conte原创 2015-10-07 15:18:52 · 2673 阅读 · 1 评论 -
jQuery源码分析之addClass,removeClass,toggleClass,hasClass详解四问
//addClass函数//调用方式$(selector).addClass(class)或者$(selector).addClass(function(index,oldclass))addClass: function( value ) {var classes, elem, cur, clazz, j, finalValue,i = 0,//选择器选择的元素的个数le原创 2015-09-28 19:23:42 · 1954 阅读 · 0 评论 -
jQuery源码分析之jQuery.eq()和jQuery.get()方法比较
jQuery源码分析之jQuery.eq()和jQuery.get()方法比较原创 2015-10-06 11:20:41 · 1439 阅读 · 0 评论 -
jQuery源码分析之$.index函数
index: function( elem ) {// No argument, return index in parent//调用方式: $("li").index( )//如果没有传入参数,那么if ( !elem ) {//首先,获取满足选择器的第一个元素,然后获取第一个元素前面的所有的同级元素的个数/*HTML部分:item1item2原创 2015-10-06 15:23:51 · 1652 阅读 · 0 评论 -
jQuery源码分析之ajaxConverter与ajaxHandleResponse函数
ajaxSetup源码分析:ajaxSetup: function( target, settings ) { return settings ? // Building a settings object ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) : // Extending aj原创 2015-11-02 14:32:06 · 2593 阅读 · 1 评论 -
jQuery源码分析之ajaxPrefilters方法
prefilters源码分析: ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),可以看到内部直接调用了addToPrefiltersOrTransports方法var rnotwhite = (/\S+/g);function addToPrefiltersOrTransports( structure ) {原创 2015-11-01 15:42:58 · 1876 阅读 · 0 评论 -
jQuery源码分析之jQuery.event.add和jQuery.event.dispatch十一问
dispatch方法源码:var rnotwhite = (/\S+/g);var rtypenamespace = /^([^.]*)(?:\.(.+)|)$/;var strundefined=undefined;var slice=[].slice;//当点击对象时候就会调用下面的eventHandle对象,传入的参数是Event对象!jQuery.event.dispatc原创 2015-10-14 17:00:54 · 3325 阅读 · 0 评论 -
jQuery源码分析之jQuery.even.handlers八问
首先给出测试用例:HTML部分: 给出JS部分代码:var handlers1=function( event, handlers ) { var sel, handleObj, matches, i, handlerQueue = [], //获取这个数组的delegateCount表示delegate了几个对象 delegateC原创 2015-10-14 15:20:43 · 932 阅读 · 0 评论 -
jQuery源码分析之empty和remove方法四问
测试代码1:把id为first下面所有的子元素移除 $(document).ready(function(){ var ps=document.getElementById("first"); while(ps.firstChild) { ps.removeChild(ps.原创 2015-10-12 09:59:24 · 1865 阅读 · 1 评论 -
jQuery源码分析之jQuery.cleanData和jQuery.removeData以及jQuery._removeData十五问
internalRemoveData函数详解function internalRemoveData( elem, name, pvt ) {if ( !jQuery.acceptData( elem ) ) {return;}var thisCache, i,isNode = elem.nodeType,// See jQuery.data for more原创 2015-09-28 19:12:37 · 3209 阅读 · 0 评论 -
jQuery源码分析之remove和detach方法的区别
请提前阅读:点击打开链接detach源码分析:detach: function( selector ) { return this.remove( selector, true ); }可见detach内部调用的是remove函数,同时把selector传入remove方法,但是第二个参数是true,所以remove方法中的keepData是true表示不会调用里面的cleanDa原创 2015-10-12 10:56:49 · 1113 阅读 · 0 评论 -
jQuery源码分析之深入理解jQuery.data,jQuery._data以及data实例函数十八问
jQuery源码分析之内置函数internalData原创 2015-09-28 10:38:02 · 2979 阅读 · 0 评论 -
细数jQuery源码中那些解决内存泄漏问题
问题1:解决IE6-8中移除自定义事件导致的内存泄漏问题jQuery.removeEvent = document.removeEventListener ? function( elem, type, handle ) { if ( elem.removeEventListener ) { elem.removeEventListener( type, handle, false原创 2015-12-11 09:13:46 · 2052 阅读 · 0 评论 -
jquery源码中ajax方法理解之十五问
问题1:回调函数的上下文是什么?s = jQuery.ajaxSetup( {}, options ), // Callbacks context //回调函数上下文,默认是自己指定的context,如果没有自己指定context那么就是总的options对象! //在ajaxSetup中的逻辑分为: //第一步url,context直接封装到target上面(因为URL和con原创 2015-12-10 10:03:30 · 11217 阅读 · 1 评论 -
jQuery源码分析之jQuery.event.fix方法五问
源码如下: var rformElems = /^(?:input|select|textarea)$/i, rkeyEvent = /^key/, rmouseEvent = /^(?:mouse|pointer|contextmenu)|click/, rfocusMorph = /^(?:focusinfocus|focusoutblur)$/, rtypenam原创 2015-10-17 16:28:46 · 1309 阅读 · 1 评论 -
jQuery源码分析之jQuery.event.special八问
参见博客:点击打开链接jQuery.event.special源码如下:special: { load: { // Prevent triggered image.load events from bubbling to window.load //防止img元素的load事件冒泡到window的onload事件上面 noBubble: true }, foc原创 2015-10-17 16:45:28 · 2657 阅读 · 0 评论 -
jQuery源码分析之jQuery.event.trigger及jQuery.Event十问
首先我们给出一个例子:HTML部分: JS部分:$("#n1").on("click",function(){alert("n1 ")});$("#n2").on("click",function(){alert("n2 ")});$("#n3")[0].onclick=function(){ alert("click1 invoked!"); retur原创 2015-10-15 15:59:29 · 3421 阅读 · 1 评论 -
jQuery源码分析之ajaxTransport和ajaxPrefilters执行函数之inspectPrefiltersOrTransports
源码分析:(用于真正处理执行ajaxPrefilters和ajaxTransport的逻辑代码,参考)function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR ) { var inspected = {}, seekingTransport = ( structure === tr原创 2015-11-02 14:49:07 · 2393 阅读 · 0 评论 -
jQuery源码分析之$.grep()函数四问
/*grep函数,第三个参数表示是否根据fn的结果取反!*/grep: function( elems, callback, invert ) {var callbackInverse,matches = [],i = 0,//保存数组个数length = elems.length,//对传入的第二个参数取反,true变成false,false变成true//如果i原创 2015-10-06 17:20:33 · 1165 阅读 · 0 评论 -
jQuery源码分析之jQuery中常用正则表达式分析
jQuery源码中正则表达式分析原创 2015-10-11 15:50:13 · 2320 阅读 · 0 评论 -
jQuery源码分析之实例find和filter方法的区别七问
首先我们要介绍一个winnow函数,它用于filter函数 function winnow( elements, qualifier, not ) {//如果qualifier是函数,那么给每一个对象调用if ( jQuery.isFunction( qualifier ) ) {return jQuery.grep( elements, functi原创 2015-10-07 09:52:11 · 1779 阅读 · 0 评论 -
jQuery源码分析之$.ajax方法
请阅读我其它的关于inspectPrefiltersOrTransport以及ajaxTransport等相关博文,请了解readyState状态码针对获取到location.href的兼容代码: try { ajaxLocation = location.href; } catch( e ) { // Use the href attribute of an A element原创 2015-11-04 15:05:53 · 7669 阅读 · 0 评论 -
jQuery源码分析之$.get/$.post/serialize/serializeArray方法详解
get/post源码如下:jQuery.each( [ "get", "post" ], function( i, method ) { //如果第二个参数就是函数,那么表示没有传入数据! jQuery[ method ] = function( url, data, callback, type ) { // shift arguments if data argument was原创 2015-11-05 12:12:20 · 4503 阅读 · 3 评论 -
jQuery源码分析之从on方法看bind,delegate,live,one方法一问
请提前阅读on方法源码分析:点击打开链接bind方法源码: bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }delegate方法:delegate: function( selector, types, data, fn ) { return this.on( type原创 2015-10-17 12:31:35 · 1350 阅读 · 0 评论