初識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);
【不建議頻繁的相互轉化】