jQuery概述
jQuery是一套簡潔快速的JavaScript腳本庫(建議學習jQuery前先學習JavaScript DOM)，用於提高編程的效率。同時jQuery也擁有良好的兼容性，它兼容各大主流瀏覽器，支持的瀏覽器包括 IE6.0++、Firefox1.5、Safari2.0 、Opera9.0+。
jQuery的使用
可以在jquery官網下載所需的jQuery庫，下載到本地後通過調用便可使用。
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
src中寫入jQuery庫的相對路徑即可。
另外還有一種方法是遠程引用(這種方法需要電腦聯網，不推薦使用)
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
注：一般開發時使用jQuery的未壓縮版，便於查看源碼。
最後會修改爲.min的壓縮版，可以降低網站流量，提升訪問速度。
onload與 ready()
知道怎麼調用後，我們可以先讓瀏覽器彈出一個對話框，用JavaScript代碼爲：
window.onload = function () {
alert("hello world!");
}
jQuery的寫法爲：
$(document).ready(function(){
alert("hello world!");
});
也可以用 $ 代替 $(document).ready
$(function(){
alert("hello world!");
});
這兩種方法也有着一些區別：
- window.onload() 只能有一個監聽回調,而jQuery可以有多個監聽。
- $(document).ready()方法比window.onload()方法載入速度更快。
- window.onload() 是在頁面上有元素都載入完畢後纔開始執行(比如圖片)。而$(document).ready()方法則是DOM元素載入後執行。
在這裏做一個嘗試：在後臺輸出一張圖片的寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img id="logo" src="https://www.baidu.com/img/bd_logo1.png?qua=high">
/*因爲不知道用什麼圖片好，就找了百度一下的logo，希望不會介意。*/
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>//調用jQuery庫
<script type="text/javascript">
console.log('直接', $('#logo').width())
window.onload = function () {
console.log('onload', $('#logo').width())
}
$(function () {
console.log('ready', $('#logo').width())
})
</script>
</body>
</html>
最後結果爲
因爲jQuery只在DOM元素加載完成之後纔開始執行，這個時候並沒有加載到圖片，所以jQuery的ready()函數執行時無法得到圖片大小。
如果這個時候仍想使用jQuery得到寬，則需要jQuery的on()方法
$('#logo').on('load', function () {
console.log('img load', $(this).width())
})
多庫共存
在使用jQuery開發的時候，還有可能用到其他的JavaScript庫，如果有幾個庫都有 $ , 就會存在衝突。這個時候一般建議把 $ 的控制權讓給其他庫：
- jQuery庫在其他庫之前導入，可以直接使"jQuery"來代替" $ "符號
jQuery(function(){
...
})
- jQuery庫在其他庫之後導入(建議使用第一種)
(1)可以使用 jQuery.noConflict() 來釋放jQuery對" $ "符號的控制權。
jQuery.noConflict();
jQuery(function(){
...
})
(2)自定義快捷方式，例如$ j , $ m等
var $m = jQuery.noConflict(); //自定義一個快捷方式
$m(function(){ //使用
$m("#top").···
})
(3)如果不想給jQuery自定義名稱，又想使用 $
jQuery.noConflict(); //轉讓控制權
jQuery(function($){ //使用jQuery
$("#top").··· //內部可以使用$方法
})
jQuery對象與DOM對象
DOM對象的的獲取方法一般是getElementbyId()或者getElementByTagName(),而jQuery對象是包裝DOM對象後產生的，類似於$("#id")。
jQuery對象和DOM對象的互換：
1. jQuer對象轉爲DOM對象
jQuery有兩種方法將其轉爲DOM對象，即[index]和get(index)。例如：
var $top = $("#top"); //jQuery對象
var top = $top[0]; //DOM對象
或
var $top = $("#top"); //jQuery對象
var top = $top.get(0); //DOM對象
2.DOM對象轉爲jQuer對象
對於一個DOM對象，只需要$()將其包起來就是一個jQuery對象了。例如:
var top = document.getElementbyId("top");
var $top = $(top);