- 浏览: 319661 次
- 性别:
- 来自: 南昌
文章分类
最新评论
-
j_bird:
你好,想探讨下滑动窗口是怎么计算的,一条群发短信发出去,滑动窗 ...
协议研发 中移动CMPP2.0协议API -
andyliulin:
楼主,现在的magicode 生成器工具的 官网,http: ...
Mgicode 生成器正式发布 -
huazai_wow:
楼主 你只是分析了 在jquery 中 有使用到 jQu ...
jquery event trigger 分析 -
dengkanghua:
CMPP2.0中出现流量控制错误是什么引起的。有什么解决办法吗 ...
协议研发 中移动CMPP2.0协议API -
JohnHust:
[flash=200,200][/flash][url][/u ...
Jquery源码分析(一)
/* * author:prk date:2008-08-07 comment:analyse the fx of jQuery. * */ jQuery.fn.extend({ // show(speed,[callback]) // 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。 // 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。 // 显示隐藏的匹配元素 show() show: function(speed,callback){ return speed ? this.animate({ height: "show", width: "show", opacity: "show" }, speed, callback) : this.filter(":hidden").each(function(){ this.style.display = this.oldblock || ""; if ( jQuery.css(this,"display") == "none" ) { var elem = jQuery("<" + this.tagName + " />").appendTo("body"); this.style.display = elem.css("display");// 默认的显示的display // handle an edge condition where css is - div { // display:none; } or similar if (this.style.display == "none")// 处理显式地设定了该tag不显示,只好采用b this.style.display = "block"; elem.remove();// 上面这些的处理有没有必要呢? } }).end();// 回到前一个jQuery对象 }, // 与show相反 hide: function(speed,callback){ return speed ? this.animate({ height: "hide", width: "hide", opacity: "hide" }, speed, callback) : this.filter(":visible").each(function(){ this.oldblock = this.oldblock || jQuery.css(this,"display"); this.style.display = "none"; }).end(); }, // Save the old toggle function _toggle: jQuery.fn.toggle, // 切换元素的可见状态。 // 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 // 每次点击后依次调用函数。 // 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数, // 如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。 // 可以使用unbind("click")来删除。 toggle: function( fn, fn2 ){ return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ? this._toggle.apply( this, arguments ) :// 原来的toggle (fn ? this.animate({height: "toggle", width: "toggle", opacity: "toggle"}, fn, fn2) : this.each(function(){jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();} // 对每个元素都调用show,或hide函数。 ) ); }, // 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。 // 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 fadeTo: function(speed,to,callback){ return this.animate({opacity: to}, speed, callback); }, /** * 用于创建自定义动画的函数。 * 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。 * 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. * 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。 * 在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 * "-=" 来让元素做相对运动。 * * params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合 。 duration (String,Number) * :(可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) * easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing". * callback (Function) : (可选) 在动画完成时执行的函数 */ animate: function( prop, speed, easing, callback ) { var optall = jQuery.speed(speed, easing, callback); return this[ optall.queue === false ? "each" : "queue" ](function(){// 执行each或queue方法 var opt = jQuery.extend({}, optall), p, hidden = this.nodeType == 1 && jQuery(this).is(":hidden"),// 是元素节点且是隐藏的 self = this;// 当前的元素 for ( p in prop ) { if ( prop[p] == "hide" && hidden || prop[p] == "show" && !hidden )// 已经是完成的状态 return opt.complete.call(this);// 调用complate函数,在用户的callback加上队列的处理 if ( ( p == "height" || p == "width" ) && this.style ) {// style中高度,宽度 opt.display = jQuery.css(this, "display");// 保存当前元素的display opt.overflow = this.style.overflow;// 保证没有暗中进行的 } } if ( opt.overflow != null )// 超出部分不见 this.style.overflow = "hidden"; opt.curAnim = jQuery.extend({}, prop); jQuery.each( prop, function(name, val){// 对当前元素的给定的属性进行变化的操作 var e = new jQuery.fx( self, opt, name ); if ( /toggle|show|hide/.test(val) )// 传参的属性可以用toggle,show,hide,其它 // 调用当前e.show,e.hide,e.val的方法,jQuery.fx.prototype e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop ); else {// 支持"+=" 或 "-=" 来让元素做相对运动。 var parts = val.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/), start = e.cur(true) || 0;// 当前的大小或0 if ( parts ) { var end = parseFloat(parts[2]),// 值 unit = parts[3] || "px";// 单位 if ( unit != "px" ) {// 计算开始的值=(end/cur)*start self.style[ name ] = (end || 1) + unit; start = ((end || 1) / e.cur(true)) * start; self.style[ name ] = start + unit; } if ( parts[1] )// +=/-=,做相对运行 end = ((parts[1] == "-=" ? -1 : 1) * end) + start; e.custom( start, end, unit );// 动画 } else e.custom( start, val, "" );// 动画 } }); // For JS strict compliance return true; }); }, // 实现队列操作,为jQuery对象中的每个元素都加type的属性,值为fn. queue: function(type, fn){ // 可能看出支持一个fn的参数的形式,支持fn的array集形式 if ( jQuery.isFunction(type) || ( type && type.constructor == Array )) { fn = type; type = "fx"; } // type不存在,空字符等,无参数,type:string,fn不存在。肯定不是函数,也不是数组 if ( !type || (typeof type == "string" && !fn) ) return queue( this[0], type ); return this.each(function(){ if ( fn.constructor == Array )// 数组的形式 queue(this, type, fn);// 存储在元素的type属性中 else { queue(this, type).push( fn );// 加上一个 if ( queue(this, type).length == 1 ) fn.call(this); } }); }, stop: function(clearQueue, gotoEnd){ var timers = jQuery.timers; if (clearQueue) this.queue([]);// 清除 this.each(function(){ // go in reverse order so anything added to the queue during the // loop is ignored for ( var i = timers.length - 1; i >= 0; i-- ) if ( timers[i].elem == this ) { if (gotoEnd) // force the next step to be the last timers[i](true); timers.splice(i, 1); } }); // start the next in the queue if the last step wasn't forced if (!gotoEnd) this.dequeue(); return this; } }); // Generate shortcuts for custom animations jQuery.each({ slideDown: { height:"show" }, slideUp: { height: "hide" }, slideToggle: { height: "toggle" }, fadeIn: { opacity: "show" }, fadeOut: { opacity: "hide" } }, function( name, props ){ jQuery.fn[ name ] = function( speed, callback ){ return this.animate( props, speed, callback ); }; }); // 为元素加上type的array的属性,或返回取到elem上type的值 var queue = function( elem, type, array ) { if ( elem ){ type = type || "fx"; var q = jQuery.data( elem, type + "queue" ); if ( !q || array ) q = jQuery.data( elem, type + "queue", jQuery.makeArray(array) ); } return q; }; // 出列,根据type jQuery.fn.dequeue = function(type){ type = type || "fx"; return this.each(function(){ var q = queue(this, type);// 得取type的的值 q.shift();// 移出一个 if ( q.length ) q[0].call( this ); }); }; jQuery.extend({ // 主要用于辅助性的工作 speed: function(speed, easing, fn) { var opt = speed && speed.constructor == Object ? speed : {// 采用紧凑型方式 complete: fn || !fn && easing || jQuery.isFunction( speed ) && speed,// coplete是至多三个参数的最后一个,当然是Fn. duration: speed,// 持继的时间 easing: fn && easing || easing && easing.constructor != Function && easing// 不是Fn }; opt.duration = (opt.duration && (opt.duration.constructor == Number ? opt.duration : jQuery.fx.speeds[opt.duration])) // 存在,不是数值,转找 || jQuery.fx.speeds._default;// 默认的 // Queueing opt.old = opt.complete; opt.complete = function(){// 排队的处理 if ( opt.queue !== false ) jQuery(this).dequeue(); if ( jQuery.isFunction( opt.old ) ) opt.old.call( this ); }; return opt; }, // 擦除效果 easing: { linear: function( p, n, firstNum, diff ) { return firstNum + diff * p; }, swing: function( p, n, firstNum, diff ) { return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum; } }, timers: [],// jQuery.timers timerId: null, // 根据参数构成一个对象 fx: function( elem, options, prop ){ this.options = options; this.elem = elem; this.prop = prop; if ( !options.orig ) options.orig = {}; } }); jQuery.fx.prototype = { // 为元素设值,更新显示 update: function(){ if ( this.options.step ) this.options.step.call( this.elem, this.now, this ); (jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );// 为元素的设值,fx.prop // 对于高度和宽度,采用display=block的形式。 if ( ( this.prop == "height" || this.prop == "width" ) && this.elem.style ) this.elem.style.display = "block"; }, // 当前元素当前属性的值 cur: function(force){ if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) return this.elem[ this.prop ]; var r = parseFloat(jQuery.css(this.elem, this.prop, force)); return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, this.prop)) || 0; }, // 开动一个动画 custom: function(from, to, unit){ this.startTime = now(); this.start = from; this.end = to; this.unit = unit || this.unit || "px"; this.now = this.start; this.pos = this.state = 0; this.update(); var self = this; function t(gotoEnd){ return self.step(gotoEnd);// 调用step(gotoEnd)//本对象的 } t.elem = this.elem; jQuery.timers.push(t); // 第一次,或上一次已经把jQuery.timers全部执行完了。 if ( jQuery.timerId == null ) { jQuery.timerId = setInterval(function(){ var timers = jQuery.timers; for ( var i = 0; i < timers.length; i++ )// 执行timers中所有 if ( !timers[i]() )// 执行了一次,就从timers中除去 timers.splice(i--, 1); if ( !timers.length ) {// length==0,取消Interval clearInterval( jQuery.timerId ); jQuery.timerId = null; } }, 13); } }, // Simple 'show' function show: function(){ // 保存当前的,以被修改之后能得到初始的值 this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop ); this.options.show = true; this.custom(0, this.cur()); // Make sure that we start at a small width/height to avoid any // flash of content if ( this.prop == "width" || this.prop == "height" ) this.elem.style[this.prop] = "1px"; // 开始显示元素 jQuery(this.elem).show(); }, // 隐藏 hide: function(){ // 保存当前的,以被修改之后能得到初始的值 this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop ); this.options.hide = true; this.custom(this.cur(), 0); }, // 动画的每一个步骤 step: function(gotoEnd){ var t = now(); // 结束或当前时间大于startTime+duration if ( gotoEnd || t > this.options.duration + this.startTime ) { this.now = this.end; this.pos = this.state = 1; this.update(); this.options.curAnim[ this.prop ] = true; var done = true; for ( var i in this.options.curAnim ) if ( this.options.curAnim[i] !== true ) done = false; if ( done ) {// 重置所有的设定 if ( this.options.display != null ) {// Reset the overflow this.elem.style.overflow = this.options.overflow; // Reset the display this.elem.style.display = this.options.display; if ( jQuery.css(this.elem, "display") == "none" ) this.elem.style.display = "block"; } // Hide the element if the "hide" operation was done if ( this.options.hide ) this.elem.style.display = "none"; // Reset the properties, if the item has been hidden or shown if ( this.options.hide || this.options.show ) for ( var p in this.options.curAnim ) jQuery.attr(this.elem.style, p, this.options.orig[p]); } if ( done )// 运行complete的回调函数 this.options.complete.call( this.elem ); return false; } else { var n = t - this.startTime; this.state = n / this.options.duration; // Perform the easing function, defaults to swing this.pos = jQuery.easing[this.options.easing || (jQuery.easing.swing ? "swing" : "linear")](this.state, n, 0, 1, this.options.duration); this.now = this.start + ((this.end - this.start) * this.pos); // Perform the next step of the animation this.update(); } return true; } }; jQuery.extend( jQuery.fx, { // 动画的速度 speeds:{ slow: 600, fast: 200, // Default speed _default: 400 }, // 为元素设值 step: { opacity: function(fx){// 为元素CSS设opacity为fx jQuery.attr(fx.elem.style, "opacity", fx.now); }, _default: function(fx){ if( fx.prop in fx.elem ) // 对于元素 fx.elem[ fx.prop ] = fx.now; else if( fx.elem.style )// 对于style fx.elem.style[ fx.prop ] = fx.now + fx.unit; } } });
发表评论
-
[转载]jquery.validate.js的基本用法入门
2011-03-10 22:35 2848[转载]jquery.validate.js的基本用法入门 j ... -
使用javascript动态创建SVG对象的问题
2011-01-11 17:18 4700无沙备忘录系列 -平时的一些研究,有时也会颇费功夫,然 ... -
evaluate mxGraph
2010-06-10 16:09 1681To evaluate mxGraph: - Navigate ... -
js中的prototype与constructor
2010-06-09 10:53 2862并且每个函数都有一个默认的prototype属性。 如果这个函 ... -
Jquery1.2.6 源码分析
2008-08-29 00:13 14075jQuery是一个非常优秀的J ... -
jquery fx分析
2008-08-28 19:37 62288 FX分析 prk/彭仁夔 ... -
jqueyr fx源码(修改)
2008-08-28 19:33 2626/* * author:prk date:2008-08-0 ... -
jquery.ajax
2008-08-27 16:50 80597.2 jquery.ajax ... -
jquery event domready
2008-08-26 17:39 40966.3 domReady的处理 ... -
jquery event trigger 分析
2008-08-26 17:37 113006.2.2 trigger ... -
jquery event addEvent 分析
2008-08-26 17:36 111486.2 事件的处理 ... -
jquery event 封装的源源分析
2008-08-26 17:35 45596.Event分析 ... -
jquery position
2008-08-25 16:34 87135.2.3 position ... -
jquery wrap
2008-08-25 08:12 44405.3.5 wrap ... -
jquery element content
2008-08-25 08:11 43085.4dom元素的内容 ... -
jquery class
2008-08-22 23:18 53315.1.2 Class prk/彭仁夔 2008- ... -
jquery attr
2008-08-22 23:16 75775 DOM元素 prk/彭仁夔 ... -
jquery Selector (修改)
2008-08-21 17:10 3061/** * author:prk * date:2008- ... -
CSS selector (jquery的源码分析,修改)
2008-08-21 17:09 43343.3、采用CSS方式查找Dom节点 ... -
如何找到Dom元素
2008-08-20 22:10 27703、如何找到Dom元素 ...
相关推荐
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
JQUERY博客源码 JQUERY博客源码
2023年最新整理优质源码之圣诞节雪花飘落jQuery特效源码 2023年最新整理优质源码之圣诞节雪花飘落jQuery特效源码 2023年最新整理优质源码之圣诞节雪花飘落jQuery特效源码 2023年最新整理优质源码之圣诞节雪花飘落...
Jquery源码分析 清晰 Jquery源码分析 清晰 Jquery源码分析 清晰 Jquery源码分析 清晰
jQuery Popup 源码示例
jquery最新源码jquery最新源码jquery最新源码
jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释
50个jquery例子源码,附有比较详细的代码,更快的帮助您网页设计。
Jquery1.2.6源码分析及源码文件 博文链接:https://jljlpch.iteye.com/blog/234218
jQuery,源码jQuery,源码jQuery,源码jQuery,源码jQuery,源码jQuery,源码
jquery1.2.6源码分析,其中里面含有源码详细的中文注释
Jquery1.2.6源码分析文档,并附上分析的源代码。
从github下载下来的最新jquery1.11源码,github地址:https://github.com/jquery/jquery
简单不能再简单的jQuery分页源码 简单不能再简单的jQuery分页源码
Day09【JQuery】源码及综合案例
Jquery1.2.6源码分析 Jquery1.2.6源码分析
jQuery最新源码库
锋利的jQuery 源码锋利的jQuery 源码锋利的jQuery 源码锋利的jQuery 源码锋利的jQuery 源码锋利的jQuery 源码
Jquery1.26版本的源码分析,pdf格式文档,相当清淅的书籍,前端开发者必看的类库书籍,虽然网上有很多jQuery的实例,但真正深入分析介绍jQuery源码细节的文档太少了,所以本篇文稿希望是你期待的,文档内容包括:...