读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);

避免与其余库冲突

一、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>

这些技巧基本上能够完成平常需求了。

二、 引入其余库以前引入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');
};

三、 总结

建立新别名：

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>