• 读jQuery官方文档:$(document).ready()与避免冲突


    $(document).ready()

    通常你想在DOM结构加载完毕之后才执行相关脚本。使用原生JavaScript,你可能调用window.onload = function() { ... }, 但是这个办法的你只能够调用一次,而且需要等DOM结构完全加载完毕,包括图片样式等静态文件所有夹在完毕才会开始执行onload函数里面的代码。

    jQuery中提供了一种更好的办法:

    $(document).ready(function() {
    	console.log('ready!');
    });
    

    与onload函数不同的是,这个办法可以被调用无限多次,而且不需要等待页面元素完全下载完毕才执行代码,即DOM结构渲染完毕后马上执行代码。

    你可能见过一些经验丰富的开发者使用下面的简写形式:

    
    $(function() {
    	console.log('ready!');
    });
    

    除了传递匿名函数,你也可以选择传递命名函数:

    function readyFn(jQuery) {
    	//do something...
    }
    
    $(document).ready(readyFn);
    //或者:
    $(window).load(readyFn);
    

    避免与其他库冲突

    1、No-Conflict模式
    jQuery库是被包含在jQuery全局变量中的,而$jQuery的快捷方式,也就是$默认也是全局变量。如果你在使用其他包含$全局变量的库(如prototype,YUI),你可能面临变量名冲突,不过jQuery提供了避免这种冲突的办法。

    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    
    <script>
    var $j = jQuery.noConflict();
    //现在$不再是jQuery的别名,$j替换了$成为了jQuery的新别名
    
    $j(document).ready(function() {
      $j('div').hide();
    });
    
    //现在$是prototype的别名
    window.onload = function() {
      var mainDiv = $('main');
    };
    </script>
    

    上面的代码中的$会回复到它本身的库的用途。你依然可以通过jQuery或者$j的方式使用jQuery库。你可以随意更改jQuery的别名, 比如`jq', '$J', 'awesomeQuery'等。

    另外,如果你不想给jQuery命名新的别名(你依然想要用$),你依然有办法可以避免冲突。

    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
    jQuery.noConflict();
    
    jQuery( document ).ready(function( $ ) {
       //这个作用域里的$都是jQuery的别名
      $('div').hide();
    });
    
    //全局作用域的$是prototype的
    window.onload = function() {
      var mainDiv = $('main');
    };
    </script>
    

    这些技巧基本上可以完成日常需求了。

    2、 引入其他库之前引入jQuery

    在其他库前引入jQuery,你需要使用jQuery来调用jQuery库,$别称属于其他库。

    <script src="jquery.js"></script>
    <script src="prototype.js"></script>
    
    //通过jQuery全称调用jQuery库
    jQuery(document).ready(function() {
      jQuery('div').hide();
    });
    
    //由于prototype在jQuery之后引入,$别名属于prototype
    window.onload = function() {
      var mainDiv = $('main');
    };
    

    3、 总结

    创建新别名

    jQuery.noConflict()方法做了两件事,一是返回了jQuery对象的引用,你可以用来赋值给自定义的变量,如($jq);二是,删除了默认的$别称,把$别名归还给其他库:

    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
      //将$别名归还prototype,创建一个新的别名$jq
      var $jq = jQuery.noConflict();
    </script>
    

    使用立即调用函数表达式:

    你可以创建一个立即调用函数表达式,然后在表达式里使用$作为jQuery的别名:

    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
      jQuery.noConflict();
      (function( $ ) {
        $('div').remove();
      })( jQuery );
    </script>
    

    注意,如果你使用这个技巧,你将不能够在立即调用函数表达式里面使用$作为prototype的别名。

    给jQuery(document).ready()传递参数

    <script src="jquery.js"></script>
    <script src="prototype.js"></script>
    <script>
      jQuery(document).ready(function( $ ) {
        //do something...
      });
    </script>
    

    或者

    <script src="jquery.js"></script>
    <script src="prototype.js"></script>
    <script>
      jQuery(function( $ ) {
        //do something...
      });
    </script>
    
  • 相关阅读:
    Waiting Processed Cancelable ShowDialog
    Microshaoft Cross-Domain + ASP.NET MVC 5 WebAPI 2 + Self-Host + JsonpMediaTypeFormatter + WCF + JsonP + PerformaceCounterFilter + Knockout.js + MVVM
    Microshaoft WinDbg cmdtree
    csc.rsp Invent by Microshaoft
    ASP.NET MVC 4 WebAPI Simple Sample
    并发异步处理队列 .NET 4.5+
    最近IOS10.2.1 iphone6 无法通过appStore 来更新 下载任何APP。好烦啊。
    vs2013修改书签(vs书签文件位置)
    MFC如何使用静态MFC库
    关于商业贷款的一些经验
  • 原文地址:https://www.cnblogs.com/lozio/p/4854081.html
Copyright © 2020-2023  润新知