读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之后引入，$别名属于prototypewindow.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>