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