讀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>