jquery源码分析 | 易学教程

jQuery 源码分析(十八) ready事件详解

阅读更多关于 jQuery 源码分析(十八) ready事件详解

ready事件是当DOM文档树加载完成后执行一个函数(不包含图片，css等)，因此它的触发要早于load事件。用法: $(document).ready(fun)　　　　;fun是一个函数，这样当DOM树加载完毕后就会执行该匿名函数了 ready有一个简写，可以直接传入$(fun)即可，这是因为在jQuey内部也定义了一个$(document)的jQuery对象，和我们在上面的写法是一样的 ready事件和window的onload区别: ready事件　　;等dom树载完毕后就可以执行 onload事件　 ;等网页中所有的资源加载完毕后(包括图片，flash,音频，视频)才能执行　　 onload事件还可以绑定在某个图片上面，举个例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> </head> <body> <img src="https://www.cnblogs.com/images/logo_small.gif" alt=""> <script> $(()=>console.log(

React 源码分析

阅读更多关于 React 源码分析

本文转载于: 猿2048 网站▷ https://www.mk2048.com/blog/blog.php?id=kiaa0aiib 写在前面 React 开发一年多，最近仔细研究了 React 源码，在这里总结一下原理。React 源码比较复杂不适合初学者去学习。所以本文通过实现一套简易版的 React，使得理解原理更加容易（本文基于 React v15）。包括： React 的几种组件以及首次渲染实现 React 更新机制的实现以及 React diff 算法 React 的代码还是非常复杂的，虽然这里是一个简化版本。但是还是需要有不错的面向对象思维的。React 的核心主要有一下几点。虚拟 dom 对象（Virtual DOM）虚拟 dom 差异化算法（diff algorithm）单向数据流组件声明周期事件处理本文代码仓库直接在游览器中打开 main.html 中查看效果更改代码请先执行执行 npm i 安装依赖(使用了部分 es6 代码) 修改代码后请执行 npm run dev 重新编译代码实现一个 hello React！的渲染看如下代码： // js React.render('hello React！',document.getElementById("root")) // html <div id="root"></div> // 生成代码

jQuery源码分析(九) 异步队列模块 Deferred 详解

阅读更多关于 jQuery源码分析(九) 异步队列模块 Deferred 详解

deferred对象就是jQuery的回调函数解决方案，它解决了如何处理耗时操作的问题,比如一些Ajax操作，动画操作等。(P.s:紧跟上一节:https://www.cnblogs.com/greatdesert/p/11433365.html的内容) 异步队列有三种状态:待定(pending)、成功(resolved)和失败(rejected),初始时处于pending状态我们可以使用jQuery.Deferred创建一个异步队列，返回一个对象，该对象含有如下操作: 　　done(fn/arr) 　　　　　　　　;添加成功回调函数，当异步队列处于成功状态时被调用,参数同:jQuery.Callbacks(flags).add(fn/arr) 　　fail(fn/arr) 　　　　　　　 ;添加失败回调函数，参数同上　　progress(fn/arr) 　　　　 ;添加消息回调函数，参数同上　　then(donefn/arr,failfn/arr,profn/arr) ;同时添加成功回调函数、失败回调函数和消息回调函数　　always(fn/arr) 　　　　　　 ;添加回调函数到doneList和failList中，即保存两份引用，当异步队列处于成功或失败状态时被调用 ;参数可以是函数、函数列表　　state() 　　　　　　 ;返回异步队列的当前状态

初识jQuery源码

阅读更多关于初识jQuery源码

为了深入学习下jQuery，最近打算看看源码，刚开始看这个我内心其实是拒绝的。。。第一印象就是好难理解，没办法硬骨头总是要去啃得，看了好多分析源码的文章博客，第一篇当然是 Aaron 的jQuery源码解读系列的开篇之整体架构。介绍的还是比较详细的，推荐~当然要抱着怀疑的眼光去看，不一定人家写的就是对的，敲出来验证下才是王道，这篇文章后的评论也可以看看，是大家对于该文章某些地方的质疑。看完这篇文章其实我是半懂的状态，后来又看到一篇总结的博文，大概是在此基础上总结的。点这里我并不想重复的记录下相同的文字，只是想说一下我理解的时候觉得困难的地方。先附上源码： 123456789101112 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery );},jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { ... return this; } ...}jQuery.fn.init.prototype = jQuery.fn; 1. jQuery 中为什么要返回 new jQuery.fn

jQuery-1.9.1源码分析系列（十一） DOM操作

阅读更多关于 jQuery-1.9.1源码分析系列（十一） DOM操作

　　DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。　　DOM操作函数中后五种方法使用的依然是前面五种方法，源码 jQuery.each({ appendTo: "append", prependTo: "prepend", insertBefore: "before", insertAfter: "after", replaceAll: "replaceWith" }, function( name, original ) { jQuery.fn[ name ] = function( selector ) { var elems, i = 0, ret = [], insert = jQuery( selector ), last = insert.length - 1; for ( ; i <= last; i++ ) { elems = i === last ? this : this.clone(true); jQuery( insert[i] )[ original ]( elems ); //现代浏览器调用apply会把jQuery对象当如数组，但是老版本ie需要使用.get()

jQuery源码解读-事件分析

阅读更多关于 jQuery源码解读-事件分析

最原始的事件注册 addEventListener方法大家应该都很熟悉，它是Html元素注册事件最原始的方法。先看下addEventListener方法签名： element.addEventListener(event, function, useCapture) event:事件名，例如“click”，这里要提醒的一点是不要加前缀“on”; function:事件触发时执行的函数; userCapture:默认为false，表示event事件在冒泡阶段触发。如果设置为true，则事件将会在捕获阶段触发。如果不清楚什么是捕获和冒泡，请自觉了解事件的冒泡机制（友情链接：勤能补挫-简单But易错的JS&CSS问题总结）。虽然addEventListener包含了三个参数，但一般我们都只使用了前两个参数，下面的代码只使用了两个参数： document.getElementById("myBtn").addEventListener("click", function() { alert(“我是在冒泡阶段触发的哦！”); }); 上面代码注册的函数会在冒泡阶段触发，如果想在捕获阶段触发,直接把第三个参数传递进去就ok了。在实现DOM元素拖拽功能时，会使用到捕获方式。另外，IE8以及之前的版本不支持事件按捕获形式传播，并且注册方法也没有addEventListener函数

jQuery 源码分析(五) map函数 $.map和$.fn.map函数详解

阅读更多关于 jQuery 源码分析(五) map函数 $.map和$.fn.map函数详解

$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回,该函数有三个参数，如下: 　　elems　　　Array/Object类型指定的需要处理的数组或对象。　　callback　　遍历时执行的回调函数　　arg　　　　参数，执行回调函数时传入的参数 callback函数执行时可以带两个参数，分别是遍历时对应的值和它的索引(对象来说则是键名)，如果有返回值，则将返回值拼凑为一个数组 $.fn.map()返回值是一个jQuery对象，它也是调用$.map()来实现的，返回的数组最后又调用pushStack创建一个jQuery对象而已，如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <p id="p1">文本1</p> <p id="p2">文本2</p> <h1 id="h1">标题1</h1> <h1 id="h2">标题2</h1> <script> var arr=[11,12,13,14]; var a =$

jQuery 源码分析(四) each函数 $.each和$.fn.each方法详解

阅读更多关于 jQuery 源码分析(四) each函数 $.each和$.fn.each方法详解

$.each一般用来遍历一个数组或对象，$.fn.each()就是指jQuery实例可以执行的操作(因为$.fn是jQuery对象的原型) $.each用来遍历一个数组或对象，并依次执行回掉函数，最后返回传递的数组或对象，以支持链式操作，可以传递三个参数，如下: 　　object　　　待遍历的对象或数组　　callback　　要执行的函数，该函数可以带两个参数,分别表示该元素的索引(如果遍历对象则为键名)和值 writer by:大沙漠 QQ:22969969 　　args　　　一个数组，如果设置了该值，则参数2对应的函数里的参数就是该值，一般可以忽略 $.fn.each就是调用调用$.each来实现的，它传入的参数1就是当前对象this 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <p>1</p> <p>2</p> <script> var A = [11,12,13,14,15] $.each(A,function(index,elem){console.log

jQuery 源码分析(二) 入口模块

阅读更多关于 jQuery 源码分析(二) 入口模块

jQuery返回的对象本质上是一个JavaScript对象，而入口模块则可以保存对应的节点的引用，然后供其它模块操作我们创建jQuery对象时可以给jQuery传递各种不同的选择器，如下: 　　false　　　　　　　　;返回一个空jQuery对象　　DOM节点　　　　　　;返回包含该DOM元素引用的jQuery对象。　　body　　　　　　　　;字符串'body',返回包含body元素引用的jQuery对象　　单独标签　　　　　　;调用document.createElement创建标签对应的DOM元素　　较复杂的html代码　　;调用jQuery.buildFragment创建元素　　函数　　　　　　　　;是$(document).ready(function)的简写，等到DOM加载完毕后再执行，后面有几篇专门介绍例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <p id="p">123</p> <script> console.log( $(false) )

jQuery 2.0.3 源码分析样式操作

阅读更多关于 jQuery 2.0.3 源码分析样式操作

根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操作,底层的实现就是修改元素的className值实现的功能：增加一条样式规则： .addClass(‘myClass’) 增加多条样式规则： .addClass(‘myClass yourClass’) 传递回调遍历样式规则： $("ul li:last").addClass(function(index) { return "item-" + index; }); 从接口传参去分析这个实现手法：源码： addClass源码 // 为匹配的每个元素增加指定的class(es) addClass: function( value ) { var classes, elem, cur, clazz, j, i = 0, len = this.length, proceed = typeof value === "string" && value; //如果传递的是回调函数，递归调用 ⑴ if ( jQuery.isFunction( value ) ) { return this.each(function( j ) { jQuery( this ).addClass( value

订阅 jquery源码分析