新普京网站-澳门新普京 > 新普京网站 > 10事件管理澳门新普京:

10事件管理澳门新普京:

2020/01/05 01:39

以下是在实例中使用的完整代码:

                    }  

上面的图片可以将图片等比例缩小显示在文章中,同时使用的jQuery的Dialog UI组件单击图片时,以一个层显示完整大小的图片。

.ready() 指定一个事件句柄,当DOM完全加载完成时执行  

要改变图片的大小并不难,可以用jQuery操作css改变。但是前提是要判断图片是否加载完成。主要是通过jQuery的load事件和onreadystatechange来判断其状态。

                    window.addEventListener( "load", jQuery.ready, false );   

希望本文所述对大家jQuery程序设计有所帮助。

                }  

本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法。分享给大家供大家参考,具体如下:

          

对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态。而对于FF和Chrome刚可以直接用load事件来判断。

          

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

    // 重要的是异步  

$.ready{ function changeSize{ //本函数用于在图片加载时对图片大小等进行设置 w=obj.width; t=obj.attr; src=obj.attr; obj.width; obj.height*h:h); obj.css; obj.click{ $.html("<img src="+src+" border=0/>").fadeIn.dialog({ width:"auto", height:"auto", title:t, modal:true, draggable:false, resizable:false }) }) } if{ //IE 6.0 if($.browser.version==6.0){ $.each{ // ele.onreadystatechange =function(){ if(ele.readyState == "complete"||ele.readyState=="loaded"){ changeSize } //IE 6.0以上 else{ $.each{ tempTimer=window.setInterval{ if(ele.readyState=="complete"){ window.clearInterval; changeSize; } else{ return; } },200); }) } } //FF,Chrome else{ $.each{ alert; if{ changeSize

          

特别强调两点:  

对IE浏览器绑定:document.attachEvent( "onreadystatechange", DOMContentLoaded );  

          

                if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {  

    // continually check to see if the document is ready  

        // 在IE里,每隔1ms检测IE浏览器的ready状态  

jQuery完结之后计划写Java开源框架的源码解析,从Spring、Hibernate开始,有兴趣的同学可以一起研究。Js代码 

                    // 再在window上绑定load事件句柄,这个句柄总是会执行  

                    jQuery.ready();  

            // 绑定DOM ready监听器,跨浏览器,兼容标准浏览器和IE浏览器  

 

 

$(document).ready(handler)  

    // A fallback to window.onload, that will always work  

// 绑定DOM ready监听器,跨浏览器,兼容标准浏览器和IE浏览器  

                    // 检查document.body是否存在,这是特定于IE的检测,保证在IE中DOM ready事件能正确判断  

                    // 如果这个条件成立,那么一定是哪里出问题了!  

      

                    window.attachEvent( "onload", jQuery.ready ); // 同样的安全起见,防御性编码!及时前边的所以hack技巧失败了,onload是最后的保障  

JavaScript同其他语言一样,基础非常重要,仅仅会用框架和工具写一些WebApp是不能成为一名合格的JS工程师的,建议多读几次JavaScript权威指南,以我的经验与Java相比,JavaScript需要花费与Java相当的时间才能达到与Java相当的水平。

对标准浏览器绑定:document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );  

            DOMContentLoaded = function() {  

QQ:47214707 EMail:[email protected] 后文预告:封装事件对象 便捷接口解析 前记: JavaScript同其他语言一样,基础非...

 

            DOMContentLoaded = function() {  

                  

            },  

前记:  

                    // If there are functions bound, to execute  

          

    var jQuery = (function() {  

 // Handler for .ready() called.  

            bindReady: function() { // jQuery.bindReady  

                    document.detachEvent( "onreadystatechange", DOMContentLoaded );  

2.  .ready()的触发要早于.load(),但是不要完全迷信依赖,如果要获取或操作样式,或依赖于像图片这样的必须加载完成才能获取和操作的元素,就用<body onload="">或.load()  

                    // 做doScroll检测,如果在iframe中就不检测了,onreadystatechange对于ifame很可靠  

                readyList.done( fn ); // 将ready句柄添加到ready异步句柄队列  

        doScrollCheck();   

                    // Use the handy event callback  

            // Is the DOM ready to be used? Set to true once it occurs.  

    // ensure firing before onload,  

            }  

                // If IE event model is used  

    return setTimeout( jQuery.ready, 1 );  

            }  

                        doScrollCheck();   

JavaScript同其他语言一样,基础非常重要,仅仅会用框架和工具写一些WebApp是不能成为一名合格的JS工程师的,建议多读几次JavaScript权威指南,以我的经验与Java相比,JavaScript需要花费与Java相当的时间才能达到与Java相当的水平。  

                    // 在条件2中,如果jQuery.isReady为true,那么说明readyList的状态已经确定,添加到readyList中的函数会被立即执行  

        trigger: function( event, data, elem, onlyHandlers ) {},  

            // DOM加载完毕之前的等待次数  

                    }  

          

    var toplevel = false;  

(function( window, undefined ) {  

                // Mozilla, Opera and webkit nightlies currently support this event  

          

                    return setTimeout( jQuery.ready, 1 );  

10.8.1  如何使用.ready()  

                if ( document.readyState === "complete" ) {  

        jQuery.fn.init.prototype = jQuery.fn;  

    // 再在window上绑定load事件句柄,这个句柄总是会执行  

 

    // If IE and not a frame  

                if ( hold ) { // 继续等待  

 

                if ( document.readyState === "complete" ) {  

          

        rootjQuery = jQuery(document);  

                    if ( document.documentElement.doScroll && toplevel ) {  

 

1.  之所以花费篇幅来阐述.ready()如何使用(翻译的官网文档),是因为网络上的一些文章和中文API不准确甚至是错误的(应该是工具翻译的),所以需谨慎参考  

    } catch(e) {}  

        var jQuery = function( selector, context ) {  

    if ( document.documentElement.doScroll && toplevel ) {  

 

},  

// browser event has already occurred.  

 

 

            constructor: jQuery,  

        }  

                    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );  

                // 确保body是存在的,IE会有一些延迟  

                    // 使用快速事件句柄  

                if ( readyList ) {  

                // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).  

        // Create a simple deferred (one callbacks list)  

            // DOM是否加载完毕  

            },  

                if ( document.addEventListener ) {  

                return;  

以下三个语法全部是等价的:  

            init: function( selector, context, rootjQuery ) {  

 

            rootjQuery, // 包含了document的jQuery对象  

            ready: function( wait ) { // jQuery.ready  

 

                // browser event has already occurred.  

                    // 看看DOMContentLoaded的实现,是检测document.readyState的状态是否为complete,这里有些像ajax中的检测   

后文预告:封装事件对象 便捷接口解析  

          

 

        when: function( firstParam ) {}  

 

          

    // 同样onreadystatechange会在onload之前触发,但是对于iframe会有延迟但安全一定会触发  

 

                    // 重要的是异步  

 

                    // [ jQuery ]指定了ready事件句柄的第一个参数,这样即使调用$.noConflict()交出了$的控制权,我们依然可以将句柄的第一个参数命名为$,继续在句柄内部使用$符号  

        jQuery.extend = jQuery.fn.extend = function() {};  

                    // 如果jQuery.isReady为是false,那么接下来readyList中函数将被执行  

        // Full fledged deferred (two callbacks list)  

                var ret = new jQuery.fn.init( selector, context, rootjQuery );  

                    return;  

                    } catch(e) {}  

                    jQuery.ready( true ); //   

                readyList = jQuery._Deferred(); // 初始化ready异步事件句柄队列  

                    return rootjQuery.ready( selector );  

 

                    jQuery.isReady = true;  

            // 执行其他的等待函数  

        jQuery.extend({  

        _Deferred: function() {},  

                    }  

            readyList, // ready事件处理函数队列  

                    // maybe late but safe also for iframes  

        // Expose jQuery to the global object  

                return;  

                    if ( wait !== true && --jQuery.readyWait > 0 ) {  

            // Hold (or release) the ready event  

if ( document.readyState === "complete" ) {  

                        // 在doScrollCheck中,不断的(每隔1ms)执行document.documentElement.doScroll("left"),直到不抛出异常为止  

        Deferred: function( func ) {},  

                    // 调用DOM ready事件异步队列readyList,注意整理的参数亮了!  

                return this;  

                }  

            // 是否延迟触发DOM ready?在jQuery中没有任何地方有调用到holdReady,这是个遗留方法还是预留方法,有待继续研究。  

                    // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).  

                    var toplevel = false;  

 

          

        // 这是IE下检测DOM ready的技巧  

                // 如果是IE,则使用该技巧来检测浏览器加载状态  

                    // 同样onreadystatechange会在onload之前触发,但是对于iframe会有延迟但安全一定会触发  

    jQuery.event = {  

                // Catch cases where $(document).ready() is called after the  

                    // 虽然上边的条件2的意思是,别管其他情况,调用方认为ready了,但是这里仍然做了防御性检测,如果等待计数器仍然大于1,结束ready调用  

                    // continually check to see if the document is ready  

 

            };  

                        toplevel = window.frameElement == null; // 检查window的frameElement属性,看是否是顶层窗口  

                    readyList.resolveWith( document, [ jQuery ] );  

            if ( jQuery.isReady ) {  

                    }  

    try {  

}  

        };  

            ready: function( fn ) {  

 

 

                    document.attachEvent( "onreadystatechange", DOMContentLoaded );  

// DOM 2级事件模型,Mozilla, Opera, webkit等   

            // The deferred used on DOM ready  

    // 使用快速事件句柄  

 

    window.attachEvent( "onload", jQuery.ready ); // 同样的安全起见,防御性编码!及时前边的所以hack技巧失败了,onload是最后的保障  

    jQuery.extend({  

                setup: jQuery.bindReady,  

  // Handler for .ready() called.  

if ( readyList ) {  

    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );  

 

    // 见系列文章中关于异步队列的解析  

                }  

        // All jQuery objects should point back to these  

if ( document.addEventListener ) {  

上一篇:jQuery实现锚点scoll效果实例分析_jquery_脚本之家 下一篇:bower一个强大的前端依赖包管理工具,Web前端开发工具