初識jQuery重點總結
jQuery簡介：
jQuery由美國人John Resig於2006年建立；jQuery是目前最流行的JavaScript程式庫，它是對JavaScript物件和函式的封裝；它的設計思想是write less,do more
jQuery的應用：
1. jQuery與其他JavaScript庫：
jQuery；Bootstrap【也是一個比較好的框架，應用也比較廣泛】；Zepto【輕量級的，應用於現代高階瀏覽器的JavaScript庫，會用jQuery就會用它，並且它還加入了移動端的事件操作，如：觸控事件，長按事件，滑動事件】；Ext【用於在客戶端建立web介面】；YUI【用來建立駐客戶端的web應用】
2. jQuery能做什麼
①訪問和操作DOM元素【可以幫助我們對節點進行操作】
②控制頁面樣式
③對頁面事件進行處理【頁面處理方法是jQuery中特有的方法】
④擴充套件新的jQuery外掛【可以利用其他人寫的外掛】
⑤與Ajax技術完美結合【幫我們處理了瀏覽器的相容問題】
注：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高開發效率
3. jQuery的優勢
①體積小，壓縮後只有100KB左右
②強大的選擇器【選擇方便】
③出色的DOM封裝
④可靠的事件處理機制
⑤出色的瀏覽器相容性
⑥使用隱式迭代簡化程式設計
⑦豐富的外掛支援
4. 獲取jQuery
點選Download jQuery下載
5. jQuery庫檔案
jQuery庫分開發版和釋出版：
|
名稱 |
大小 |
說 明 |
|
jquery-1.版本號.js（開發版） |
約286KB |
完整無壓縮版本，主要用於測試、學習和開發 |
|
jquery-1.版本號.min.js（釋出版） |
約94.8KB |
經過工具壓縮或經過伺服器開啟Gzip壓縮，主要應用於釋出的產品和專案 |
6. 在頁面中引入jQuery：
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
7. jQuery基本語法：
使用jQuery彈出提示框：
<script>
$(document).ready(function() {
【為頁面載入事件繫結方法】
alert("我欲奔赴沙場征戰jQuery，勢必攻克之！");
});
</script>
$(document).ready()與window.onload的區別
|
window.onload |
$(document).ready() |
|
|
執行時機 |
必須等待網頁中所有的內容載入完畢後（包括圖片、flash、視訊等）才能執行 |
網頁中所有DOM文件結構繪製完畢後即刻執行，可能與DOM元素關聯的內容（圖片、flash、視訊等）並沒有載入完 |
|
編寫個數 |
同一頁面不能同時編寫多個 |
同一頁面能同時編寫多個 |
|
簡化寫法 |
無 |
$(function(){ //執行程式碼 }) ;簡寫形式 |
8. jQuery語法結構
語法：$(selector).action() ;
工廠函式$( )：將DOM物件轉化為jQuery物件
選擇器 selector：獲取需要操作的DOM 元素
方法action( )：jQuery中提供的方法，其中包括繫結事件處理的方法
9. jQuery操作頁面元素
①使用addClass( )方法為元素新增樣式
語法：jQuery 物件.addClass([樣式名]);
示例：$("#current").addClass("current");
②使用css( )方法設定元素樣式
語法：
css("屬性","屬性值") ; 【設定一個CSS屬性】
css({"屬性1":"屬性值1","屬性2":"屬性值2"...}) ; 【同時設定多個CSS屬性】
示例：
$("li").mouseover(function(){
$(this).css({"background":"orange"}); 【this是選擇當前的li】
}). mouseout(function(){
$(this).css({"background":"#c81623"});
})
③使用show( )、hide( ) 方法設定元素的顯示和隱藏
語法：
$(selector).show( );
$(selector).hide( );
示例：$(".nav-top").show( ); $("p").hide( );
jQuery程式碼風格：
1. “$”等同於“ jQuery ”
$(document).ready( )=jQuery(document).ready( )
$(function( ){...})=jQuery (function( ){...})
2. 鏈式操作
對一個物件進行多重操作，並將操作結果返回給該物件
示例：$("h2").css("background-color","#ccffff").next( ).css("display","block");
.next( ) 【取回該選擇器的下一個同胞元素；如：可以取到h2的下一個同胞元素p】
3. 隱式迭代
示例：
$(document).ready(function( ) {
$("li").css({"font-weight":"bold","color":"red"}); });
在jQuery中設定集合的屬性，不需要遍歷每一個元素，可以直接設定，這就是隱式迭代
4. jQuery中添加註釋
|
階段 |
說明 |
|
開發階段 |
為程式碼添加註釋，可以增加程式碼的可讀性，能夠讓別人很容易的讀懂你的程式碼，便於後期維護 |
|
維護階段 |
建議把關鍵的模組形成開發文件，便於後期維護，即便後期刪除程式碼註釋，也不影響後期維護 |
|
產品正式釋出 |
建議刪除註釋，減少檔案大小，加快下載速度，提高使用者體驗 |
DOM模型：
瀏覽器把HTML文件的元素轉換成節點物件，所有節點組成了一個樹狀結構
DOM物件和jQuery物件：
1. DOM物件：
直接使用JavaScript獲取的節點物件
var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;
2. jQuery物件：
使用jQuery包裝DOM物件後產生的物件，它能夠使用jQuery中的方法
$("#title").html( );
等同於
document.getElementById("title").innerHTML;
【DOM物件和jQuery物件分別擁有一套獨立的方法，不能混用】
3. DOM物件轉jQuery物件
使用$()函式進行轉化：$(DOM物件)
示例：
var txtName =document.getElementById("txtName");
var $txtName =$(txtName);
【jQuery物件命名一般約定以$開頭在事件中經常使用$(this)，this是觸發該事件的物件】
4. jQuery物件轉DOM物件
①jQuery物件是一個類似陣列的物件，可以通過[index]的方法得到相應的DOM物件
示例：
var $txtName =$ ("#txtName"); 【jQuery物件】
var txtName =$txtName[0]; 【DOM物件】
console.log(txtName.innerHTML);
②通過get(index)方法得到相應的DOM物件
示例：
var $txtName =$("#txtName"); 【jQuery物件】
var txtName =$txtName.get(0); 【DOM物件】
console.log(txtName.innerHTML);
【不建議頻繁的相互轉化】
