老生常谈的问题,大部分人也不一定可以系统的理解。Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧。 1. 直接使用原型链 这是最简粗暴的一种方式,基本没法用于具体的项目中。一个简单的demo如下: function SuperType(){this.property = true; } SuperType.prototype.getSuperValue = function(){return this.property; } function SubType(){t...
a.动画兼容Tween.propHooksTween.propHooks提供特殊情况下设置、获取css特征值的方法,结构如下Tween.propHooks = {_default: {get: function(){...},set: function(){...}},scrollTop: {set: function(){...}}scrollLeft: {set: function(){...}} } Tween.propHooks.scrollTop 和Tween.propHooks.scrollLeft两个主要是在ie8离线状态下会出现混乱而把css特征值保存到节点上set: function( tween ) {if ( tween.elem.nodeType && tw...
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为:可以看到上面的缓动动画组有四个原子动画组成。每一个原子动画的信息都包含在里面了。仔细查看createTweens函数,实际上就是遍历调用了tweeners ["*"]的数组中的函数(实际上就只有一个元素)。function createTweens( animation, props ) {jQuery.each( props, function( prop, value ) {var collection = ( tweeners[ prop ] || [] )...
首先需要有队列(queue)的基本知识。见上一章。 相关教程:jQuery下的动画处理总结: //www.gxlcms.com/article/42000.htm jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween ://www.gxlcms.com/article/75821.htma.动画入口jQuery.fn.animate函数执行流程详解--------------------------------------------------------------------------------先根据参数调用jQuery.speed获取动画相关参数,得到一个类似如下的对...
什么情况下使用到克隆节点?我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况。比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位置上的节点被移除了。有的时候需要保留原来位置上的节点,仅仅是需要一个副本添加到对应位置,这个时候克隆就有了使用场景。jQuery.fn.clone克隆当前匹配元素集合的一个副本,并以jQuery对象的形式返回。你还可以指定是否复制这些匹配元素(甚至它...
先给大家展示谢 jQuery.fn.css (propertyName [, value ]| object )(函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。如果需要删除指定的css属性,请使用该函数将其值设为空字符串("")注意:1、如果省略了value参数,则表示获取属性值;如果指定了该参数,则表示设置属性值。2、css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素;所有"读取"操作只针对第一个匹配的元素。) jQuery.fn.offset([...
为了给下一章分析动画处理做准备,先来看一下一些工具。其中队列工具在动画处理中被经常使用。 jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(获取或设置当前匹配元素上待执行的函数队列. 如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列;设置队列(替换队列、追加函数)时,则为每个匹配元素都分别进行设置。如果需要移除并执行队列中的第一个函数,请使用dequeue()...
废话不多说了直接奔入主题了。 jQuery.fn.find( selector ) find接受一个参数表达式selector:选择器(字符串)、DOM元素(Element)、jQuery对象。分两种情况处理:第一种,如果传入的参数是非字符串,则先通过jQuery选择器将selector查找出来,然后过滤出包含于当前jQuery对象所匹配的元素的节点。 if ( typeof selector !== "string" ) {self = this;return this.pushStack( jQuery( selector ).filter(function() {for ( i = 0; ...
还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFunction( selector ) ) {return rootjQuery.ready( selector ); }所以$(fn)===$(document).ready(fn)。来看一下jQuery.fn.ready的源码 ready: function( fn ) {// Add the callbackjQuery.ready.promise().done( fn );return this; } 很明显在jQuery.ready.promise函数中设置了延时,当延时对象解...
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...
在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧。 首先需要明白,浏览器的原生事件是只读的,限制了jQuery对他的操作。举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象。在委托处理中,a节点委托b节点在a被click的时候执行fn函数。当事件冒泡到b节点,执行fn的时候上下文环境需要保证正确,是a节点执行了fn而...
事件绑定的方法有很多种,使用了jquery那么原理那种绑定方式(elem.click = function(){...}))就不太想推荐给大家了。最主要的原因是elem.click=fn这种方式只能绑定一个事件处理,多次绑定的只会保留最后一次绑定的结果。 下面给大家介绍jquery绑定事件的方式有哪些吧。代码如下: jQuery.fn.eventType([[data,] fn])比如eventType指的是事件类型,比如click: $("#chua").click(fn); data这个参数一般都不会使用。这种方式事件绑定在...
又是一个重磅功能点。在分析源码之前分析一下体系结构,有助于源码理解。实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了;而且jQuery事件系统的设计思想也是基于该思想的,所以我们先分析一下Dean Edwards前辈的事件绑定。 a. jQuery事件原型——Dean Edwards的跨浏览器AddEvent()设计源码解读 //事件添加方法 function addEvent(element, type, handler) {//保证每个不同的事件响应函数只有唯一...
本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法。分享给大家供大家参考。具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类代码如下:$(div).each(function(index, elem){ $(this).addClass(red); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的代码如下:jQuery.fn.each 先贴一下类官方API说明,非常简单,只有两点需要注意 上文例子里的...
最近在使用jQuery的$.each方法时很,突然想到$.each($(‘div),function(index,entity){});中的这个index和entity是哪冒出来的,而且可有可无的,而且这么高大上的能告诉我们当前遍历的下标和实例。所以看了一下jQuery源代码,是这么写的:调试的时候走的是标红的这段代码,然后用到了callback.call这个函数,于是翻看了一下《js高级程序设计》,其中有比较深的解释。 首先,function是一个指向Function对象,函数名是一个指向函数的...