jQuery入門PPT課件

1、1,講師:趙君,jQuery入門,2,流行的JavaScript庫,為了簡化 JavaScript 的開發(fā), 一些 JavsScript 庫誕生了. JavaScript 庫封裝了很多預(yù)定義的對象和實用函數(shù)。能幫助使用者建立有高難度交互的 Web2.0 特性的富客戶端頁面, 并且兼容各大瀏覽器 當前流行的 JavaScript 庫有400種左右,jQueryJS標準, MooTools, Prototype, Dojo, YUI, EXT_JS, DWR,3,流行的JavaScript庫,4,jQuery是什么,為什么要使用jQuery,jQuery由美國人John Resig創(chuàng)建，至今已吸引

2、了來自世界各地的眾多 JavaScript高手加入其team。 jQuery是繼prototype之后又一個優(yōu)秀的JavaScript框架。其宗旨是WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。 它是輕量級的js庫(壓縮后只有20k左右) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML/CSS DOM、事件、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。 jQuery還有一個比較大的優(yōu)

3、勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細，同時還有許多成熟的插件可供選擇。 jQuery能夠使用戶的html頁保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可,5,jQuery:簡單例子,6,什么是jQuery對象,jQuery 對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。 jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html(); 比如： $(#test).html() 意思是指：獲取ID為test的元素內(nèi)的html代碼

4、。其中html()是jQuery里的方法 這段代碼等同于用DOM實現(xiàn)代碼： document.getElementById( test ).innerHTML; 雖然jQuery對象是包裝DOM對象后產(chǎn)生的，但是jQuery對象無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法.亂使用會報錯 約定：如果獲取的是 jQuery 對象, 那么要在變量前面加上 $. var $div = jQuery 對象 var divElement = DOM 對象 var divText = “文本值”，即是一個字符串,7,DOM對象轉(zhuǎn)成jQuery對象,對于已經(jīng)是一個DOM對象，只需

5、要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。$(DOM對象) 轉(zhuǎn)換后就可以使用 jQuery 中的方法了,8,jQuery對象轉(zhuǎn)成DOM對象,兩種轉(zhuǎn)換方式將一個jQuery對象轉(zhuǎn)換成DOM對象：index和.get(index); (1) jQuery對象是一個數(shù)組對象，可以通過index的方法，來得到相應(yīng)的DOM對象 (2) jQuery本身提供，通過.get(index)方法，得到相應(yīng)的DOM對象,9,jQuery 選擇器,選擇器是 jQuery 的根基, 在 jQuery 中, 對事件處理, 遍歷 DOM 和 Ajax 操作都依賴于選擇器 jQuery 選擇器的優(yōu)點

6、: 簡潔的寫法,(“#id”) 等價于 document.getElementById(id) $(“tagName”) 等價于 document.getElementsByTagName(tagName) $(“.class”,10,DOM與jQuery對錯誤的處理方式比較,若網(wǎng)頁中沒有id=value的元素,瀏覽器會報錯 document.getElementById(username).value; /需要判斷document.getElementById(username)是否存在 if(document.getElementById(username) var username=document.getElementById(username); alert(username.value); else alert(沒有該id元素); /使用jQuery處理即使不存在也不會報錯 var $username=$(#usernamee); alert($username.val(); 注意:在Java