$(document).ready()

通常你想在DOM結(jié)構(gòu)加載完畢之后才執(zhí)行相關(guān)腳本。使用原生JavaScript，你可能調(diào)用window.onload = function() { ... }, 但是這個(gè)辦法的你只能夠調(diào)用一次，而且需要等DOM結(jié)構(gòu)完全加載完畢，包括圖片樣式等靜態(tài)文件所有夾在完畢才會(huì)開(kāi)始執(zhí)行onload函數(shù)里面的代碼。

jQuery中提供了一種更好的辦法：

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

與onload函數(shù)不同的是，這個(gè)辦法可以被調(diào)用無(wú)限多次，而且不需要等待頁(yè)面元素完全下載完畢才執(zhí)行代碼，即DOM結(jié)構(gòu)渲染完畢后馬上執(zhí)行代碼。

你可能見(jiàn)過(guò)一些經(jīng)驗(yàn)豐富的開(kāi)發(fā)者使用下面的簡(jiǎn)寫(xiě)形式：

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

除了傳遞匿名函數(shù)，你也可以選擇傳遞命名函數(shù):

function readyFn(jQuery) {
    //do something...
}

$(document).ready(readyFn);
//或者：
$(window).load(readyFn);

避免與其他庫(kù)沖突

1、No-Conflict模式
jQuery庫(kù)是被包含在jQuery全局變量中的，而$是jQuery的快捷方式，也就是$默認(rèn)也是全局變量。如果你在使用其他包含$全局變量的庫(kù)（如prototype，YUI），你可能面臨變量名沖突，不過(guò)jQuery提供了避免這種沖突的辦法。

<script src="prototype.js"></script>
<script src="jquery.js"></script>

<script>
var $j = jQuery.noConflict();
//現(xiàn)在$不再是jQuery的別名，$j替換了$成為了jQuery的新別名

$j(document).ready(function() {
  $j('div').hide();
});

//現(xiàn)在$是prototype的別名
window.onload = function() {
  var mainDiv = $('main');
};
</script>

上面的代碼中的$會(huì)回復(fù)到它本身的庫(kù)的用途。你依然可以通過(guò)jQuery或者$j的方式使用jQuery庫(kù)。你可以隨意更改jQuery的別名， 比如`jq', '$J', 'awesomeQuery'等。

另外，如果你不想給jQuery命名新的別名（你依然想要用$），你依然有辦法可以避免沖突。

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

jQuery( document ).ready(function( $ ) {
   //這個(gè)作用域里的$都是jQuery的別名
  $('div').hide();
});

//全局作用域的$是prototype的
window.onload = function() {
  var mainDiv = $('main');
};
</script>

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

2、 引入其他庫(kù)之前引入jQuery

在其他庫(kù)前引入jQuery，你需要使用jQuery來(lái)調(diào)用jQuery庫(kù)，$別稱屬于其他庫(kù)。

<script src="jquery.js"></script>
<script src="prototype.js"></script>

//通過(guò)jQuery全稱調(diào)用jQuery庫(kù)
jQuery(document).ready(function() {
  jQuery('div').hide();
});

//由于prototype在jQuery之后引入，$別名屬于prototype
window.onload = function() {
  var mainDiv = $('main');
};

3、 總結(jié)

創(chuàng)建新別名：

jQuery.noConflict()方法做了兩件事，一是返回了jQuery對(duì)象的引用，你可以用來(lái)賦值給自定義的變量，如（$jq）；二是，刪除了默認(rèn)的$別稱，把$別名歸還給其他庫(kù)：

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
  //將$別名歸還prototype，創(chuàng)建一個(gè)新的別名$jq
  var $jq = jQuery.noConflict();
</script>

使用立即調(diào)用函數(shù)表達(dá)式:

你可以創(chuàng)建一個(gè)立即調(diào)用函數(shù)表達(dá)式，然后在表達(dá)式里使用$作為jQuery的別名：

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

注意，如果你使用這個(gè)技巧，你將不能夠在立即調(diào)用函數(shù)表達(dá)式里面使用$作為prototype的別名。

給jQuery(document).ready()傳遞參數(shù)：

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