1、jQuery什么是jQuery?jQuery是一個優(yōu)秀的JavaScript框架，一個輕量級的JavaScript類庫。jQuery的核心理念是Writeless，Domore。使用jQuery可以兼容各種瀏覽器，方便的處理HTML、Events、動畫效果等，并且方便的為網(wǎng)站提供AJAX交互。jQuery的特點：利用選擇器來查找要操作的節(jié)點,然后將這些節(jié)點封裝成一個jQuery對象，通過調(diào)用jQuery對象的方法或者屬性來實現(xiàn)對底層被封裝的節(jié)點的操作。好處：a、兼容性更好；b、代碼更簡潔編程步驟：step1、使用選擇器查找節(jié)點step2、調(diào)用jQuery的屬性和方法4.jQuery對象與DOM

2、對象之間的轉(zhuǎn)換什么是jQuery對象？jQuery對象是jQuery對底層對象的一個封裝，只有創(chuàng)建了這個對象，才能使用類庫中提供的方法。DOM對象jQuery對象DOM對象向jQuery對象的轉(zhuǎn)變很容易，外面追加$和圓括號即可。functionf()varobj=document.getElementById(d1);/DOM-jQuery對象var$obj=$(obj);$obj.html(hellojQuery);jQuery對象DOM對象jQuery對象向DOM對象轉(zhuǎn)化，通過調(diào)用get方法加參數(shù)值0即可$obj.get(0)。functionf()var$obj=$(#d1);/jQue

3、ry對象-DOMvarobj=$(obj).get(0);obj.innerHTML=hellojQuery;jQuery選擇器什么是jQuery選擇器？jQuery選擇器是一種類似CSS選擇器的特殊說明符號，能夠幫助jQuery定位到要操作的元素上，吏用了選擇器可以幫助HTML實現(xiàn)內(nèi)容與行為的分離。只需要在元素上加上Id屬性。選擇器的種類a、基本選擇器#id根據(jù)指定的ID匹配一個元素.class根據(jù)指定的類匹配一個元素element根據(jù)的指定的元素名匹配所有的元素select1,select2,將每一個選擇器匹配到的元素合并后一起返回*匹配所有元素b、層級選擇器1.select1空格sele

4、ct2查找指定元素的所有的后代select1select2查找子節(jié)點select1+select2下一個兄弟select1select2下面所有的兄弟c、過濾選擇器基本過濾選擇器:first獲取第一元素:last獲取最后一個元素:not排除選擇器要求的元素:even匹配所有下標為偶數(shù)的元素:odd匹配所有下標為奇數(shù)的元素:eq匹配所有給定索引值的元素:gt匹配所有大于給定索引值的元素:lt匹配所有小于給定索引值的元素內(nèi)容過濾選擇器:contains匹配包含給定文本的元素:empty匹配所有不包含子元素或者文本的空元素:has匹配含有選擇器所匹配的元素的元素:parent匹配含有子元素或者文本的

5、元素可見性過濾選擇器根據(jù)元素在頁面中的可見屬性進行過濾，主要是對hidden屬性和visible屬性的判斷。:hidden匹配所有不可見元素，或者type為hidden的元素:visible匹配所有的可見元素屬性過濾選擇器屬性過濾器會對標記的屬性進行判斷，符合條件的元素會作為返回的對象。attribute匹配包含給定屬性的元素。attribute=value匹配給定的屬性是某個特定值的元素attribute!=value匹配所有不含有指定的屬性，或者屬性不等于特定值的attribute人二value匹配給定的屬性是以某些值開始的元素attribute$=value匹配給定的屬性是以某些值結(jié)尾的

6、元素attribute*=value匹配給定的屬性是以包含某些值的元素attrSel1attrSel2attrSelN復(fù)合屬性選擇器，需要同時滿足多個條件時使用。子元素過濾選擇器子元素過濾選擇器會根據(jù)子元素的位置的數(shù)值來進行篩選。:nth-child(index、enven、odd)匹配其父元素下的第N個子或奇偶元素。注意:eq(index)只匹配一個元素,而這個將為每一個父元素匹配子元素。：nth-chil從1開始的，而:eq()是從0算起的！表單對象屬性過濾選擇器:enabled匹配所有可用元素:disabled匹配所有不可用元素:checked匹配所有選中的被選中元素(復(fù)選框、單選框等，

7、不包括select中的option):selected匹配所有選中的option元素d、表單選擇器使用的規(guī)則和以上各選擇器一致。$(:input”)就會返回所有的input輸入框，大多數(shù)情況下，表單選擇器會和其他選擇器進行配合來定位元素。:input匹配所有input,textarea,select和button元素:text匹配所有的單行文本框:password匹配所有密碼框:radio匹配所有單選按鈕:checkbox匹配所有復(fù)選框:submit匹配所有提交按鈕:image匹配所有圖片:reset匹配所有重置按鈕:button匹配所有按鈕:file匹配所有的文件域:hidden匹配所有不可

8、見元素，或者type為hidden的元素jQuery操作DOM-查詢html()html()等價于innerHTML讀取或修改節(jié)點的HTML內(nèi)容的屬性和value值。與DOM對象的innerHTML的作用一致。text()text()等價于innerText讀取或修改節(jié)點中的文本內(nèi)容，會過濾掉標記內(nèi)容，與innerText的作用基本一致，但innerText在不同瀏覽器中寫法不同，在jQuery中則使用text()方法即可。val()讀取或修改節(jié)點的value屬性值，也就是針對表單元素中有value屬性的哪些元素的操作。attr()讀取或設(shè)置修改節(jié)點的屬性。這個方法會更寬泛一些，可以修改元素的

9、任何屬性。7.jQuery操作DOM-創(chuàng)建、插入、刪除創(chuàng)建DOM節(jié)點的語法使用$符號將HTML標記的字符串文本括起來，即創(chuàng)建了DOM節(jié)點，如$(html)。大多數(shù)時候創(chuàng)建后的節(jié)點需要放入文檔中，使用到后續(xù)的一些方法可以實現(xiàn)節(jié)點的插入簡寫形式女口$(body).append(vdiv.v/div”)插入DOM節(jié)點的方法append方法會將DOM節(jié)點作為最后一個孩子節(jié)點添加進來prepend方法將DOM節(jié)點作為第一個孩子節(jié)點添加進來after方法將DOM節(jié)點作為下一個兄弟節(jié)點添加進來before方法將DOM節(jié)點作為上一個兄弟節(jié)點添加進來3.刪除DOM節(jié)點的方法remove()可以移除DOM,rem

10、ove(selector)可以按選擇器定位后刪除，empty()清空節(jié)點。4將js和html內(nèi)容分離$(fn);注意：window.onload二function()等價于$(fucntion();但是內(nèi)在的機制不相同。fn是一個函數(shù)，表示當整個頁面記載完成之后就會執(zhí)行fn。jQuery操作DOM-復(fù)制節(jié)點1復(fù)制DOM節(jié)點的方法clone()方法和clone(true)都會實現(xiàn)復(fù)制，添加參數(shù)true的時候會將節(jié)點的行為也復(fù)制到新的對象之上。jQuery操作DOM-屬性操作屬性操作的方法讀取屬性使用attr()方法，設(shè)置屬性使用attr(，)方法。刪除屬性使用removeAttribute(“)

11、方法。jQuery操作DOM-樣式操作attr(class,)獲取和設(shè)置addClass()追加樣式removeClass()刪除所樣式toggleClass()切換樣式hasClass()是否有某個樣式css()讀取css值css(,)設(shè)置多個樣式ll.jQuery操作DOM-遍歷節(jié)點childern()/childem(selector)只考慮直子節(jié)點next()/next(selector)下一個兄弟的節(jié)點perv()/perv(selector)上一個兄弟的節(jié)點sibling()/sibling(selector)其他的兄弟find(selector)查找滿足選擇器的所有的后代pare

12、nt()父節(jié)點，沒有選擇器jQuery事件處理1.使用jQuery實現(xiàn)事件綁定使用jQuery實現(xiàn)事件綁定$obj.bind(事件類型，事件處理函數(shù))；注意：為一個jQuery對象綁定單擊事件的代碼實現(xiàn)為$obj.bind(click,fn);也可以簡寫為$obj.click(fn);獲得事件對象event$(fucntion(e)e就是事件處理對象(jQuery對底層事件對象做了一個封裝，簡化代碼);事件對象的常用屬性a、找到事件源：varobj=e.target獲取事件源使用事件對象的target屬性。b、獲取發(fā)生事件時的鼠標點擊的坐標：alert（e.pageX+e.pageY）;獲取發(fā)

13、生事件時的鼠標坐標使用pageX和pageY屬性。c、禁止事件冒泡e.stopPropagation（）;事件冒泡子節(jié)點產(chǎn)生的事件會依次向上拋給相應(yīng)的父節(jié)點當事件發(fā)生時，會首先發(fā)送給最內(nèi)層的元素，在這個元素獲得響應(yīng)機會之后，事件會向上冒泡給更外層的元素，及從內(nèi)層向外層依次傳遞。合成事件.hover（over，out）模擬鼠標懸停事件它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。當鼠標移動到一個匹配的元素上面時，會觸發(fā)指定的第一個函數(shù)。當鼠標移出這個元素時，會觸發(fā)指定的第二個函數(shù)。而且，會伴隨著對鼠標是否仍然處在特定元素中的檢測（例如，處在div中的圖像），如果是，則會繼續(xù)保持“懸停”狀態(tài)，

14、而不觸發(fā)移出事件（修正了使用mouseout事件的一個常見錯誤）toggle（f1，f2，）模擬連續(xù)單機事件注意的是，通過jQuery這種方式觸發(fā)事件時，不會發(fā)生事件傳播；只會執(zhí)行直接添加到元素的處理程序。如果點擊了一個匹配的元素，則觸發(fā)指定的第一個函數(shù)，當再次點擊同一元素時，則觸發(fā)指定的第二個函數(shù)，如果有更多函數(shù)，則再次觸發(fā)，直到最后一個。隨后的每次點擊都重復(fù)對這幾個函數(shù)的輪番調(diào)用。模擬操作trigger(type,data)在每一個匹配的元素上觸發(fā)某類事件。也就是提交第一個表單，但不用submit()的效果。$(#username).trigger(focus);簡寫$obj.focus(

15、);jQuery動畫顯示隱藏的動畫效果.hide()和.show()方法是對display的屬性的操作。如果添加一個速度參數(shù)，就會產(chǎn)生動畫效果。上下滑動式動畫效果$(div).slideDown(800);通過高度變化(向下增大)來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。$(div).slideUp(fast);通過高度變化(向上減小)來動態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)。$(div).slideToggle(speed,callback)通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個回調(diào)函數(shù)。淡入淡出式動畫效果如果針對一個

16、元素，只是逐漸增大其不透明度，那么使用fadeIn(slow);fadeOut是逐漸減少不透明度，可以使用/.fadeOut()自定義動畫效果用法：animate(js對象,執(zhí)行時間，回調(diào)函數(shù))；js對象：描述動畫執(zhí)行之后元素的樣式執(zhí)行時間：毫秒數(shù)callback回調(diào)函數(shù)：動畫執(zhí)行結(jié)束后要執(zhí)行的函數(shù)jQuery類數(shù)組什么是類數(shù)組jQuery對象封裝的DOM對象。類數(shù)組的操作length屬性：獲得jQuery對象封裝的dom對象的個數(shù)each(fn)遍歷類數(shù)組，fn用來處理DOM對象。在fn中this表示正在被遍歷的那個DOM對象。fn函數(shù)可以添加一個參數(shù)i用于表示正在被遍歷的DOM對象的下標(

17、從0開始)eq(index):將下標等于index的DOM對象取出來get(index):獲得下標為index的dom對象get():返回一個DOM對象組成的數(shù)組index(obj):返回DOM或jQuery對象在類數(shù)組中的下標jQuery對AJAX的支持load()方法作用：將服務(wù)器返回的數(shù)據(jù)字節(jié)添加到符合要求的節(jié)點之上用法：$obj.load(請求地址，請求參數(shù))；請求參數(shù)可以有兩種格式：“username=tom&age=22”username：tom，age：22有請求參數(shù)時，load方法發(fā)送POST請求，否則發(fā)送GET請求$.get和$.post作用:向服務(wù)器發(fā)送異步請求，可將服務(wù)器

18、返回的數(shù)據(jù)進行處理。用法：$.get(url,data,callback,type)url:請求地址data:請求參數(shù)，可以有兩種格式格式一;username二tom格式二:username:tomcallback:回調(diào)函數(shù)，用來處理服務(wù)器返回的數(shù)據(jù)。格式如下：function(data,status),其中，data是服務(wù)器返回的數(shù)據(jù)，status是一個字符串，描述服務(wù)器處理請求的狀態(tài)，比如success。type:服務(wù)器返回的數(shù)據(jù)類型，可以是html:html內(nèi)容text:文本內(nèi)容json:json字符串xml:xml文檔script:javascript腳本.3$.ajax作用：可以完全

19、控制ajax對象發(fā)送請求(包括同步或者異步請求)的過程。用法$.ajax();是一個對象，描述各個選項參數(shù)：url:請求地址type:請求方式data:請求參數(shù)dataType:服務(wù)器返回的數(shù)據(jù)類型success:回調(diào)函數(shù)(當服務(wù)器處理正確),格式如下:function(data,status),含義同上。error:回調(diào)函數(shù)(當服務(wù)器處理失敗),格式如下:function(xhr,err1,err2)async:同步(false)還是異步(true)通過HTTP請求加載遠程數(shù)據(jù)。如果要處理$.ajax()得到的數(shù)據(jù)，則需要使用回調(diào)函數(shù)。beforeSend、error、dataFilter、

20、success、complete。beforeSend在發(fā)送請求之前調(diào)用，并且傳入一個XMLHttpRequest作為參數(shù)。error在請求出錯時調(diào)用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象(如果有的話)dataFilter在請求成功之后調(diào)用。傳入返回的數(shù)據(jù)以及dataType參數(shù)的值。并且必須返回新的數(shù)據(jù)(可能是處理過的)傳遞給success回調(diào)函數(shù)。success當請求之后調(diào)用。傳入返回后的數(shù)據(jù)，以及包含成功代碼的字符串。complete當請求完成之后調(diào)用這個函數(shù)，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。

21、注意，所有的選項都可以通過$&8滅$63卩()函數(shù)來全局設(shè)置。AJAX什么是AJAX?AsynchronousJavaScriptandXml(異步的JavaScript和Xml)AJAX是一種用來改善用戶體驗的技術(shù)原理：本質(zhì)是使用XMLHttpRequest對象異步地向服務(wù)器發(fā)請求，并且發(fā)送請求的同時瀏覽器并不銷毀頁面，可以繼續(xù)進行頁面的操作，在服務(wù)器收到請求之后會返回部分數(shù)據(jù)，而不是一個完整的頁面。3.如何獲得AJAX對象?？需要區(qū)分不同的瀏覽器來或得這個對象。functiongetXhr()varxhr=null;if(window.XMLHttpRequest)xhr=newXMLHt

22、tpRequest();elsexhr=newActiveXObject(Microsoft.XMLHTTP);returnxhr;4.異步對象的屬性和方法1、onreadystatechangeonreadystatechange需要綁定一個事件處理函數(shù)，該函數(shù)用來處理readystatechange事件。當從0變成了1,就會產(chǎn)生readystatechange事件。在當前不同的處理狀態(tài)下，可以進行狀態(tài)的捕獲，做些相應(yīng)處理2、readyStatereadyState代表請求的狀態(tài)，使用不同的數(shù)字代表一個狀態(tài)。獲得ajax通訊的狀態(tài)。該屬性值有5個：0代表尚未初始化1代表正在發(fā)送請求2代表請求

23、完成3代表請求成功，正在接受數(shù)據(jù)4代表數(shù)據(jù)接收成功（表示ajax對象已經(jīng)獲得了服務(wù)器返回的數(shù)據(jù)）3、responseText4、responseXML5、statusAJAX編程實現(xiàn)，步驟：獲取AJAX對象：獲取XMLHttpRequest對象。創(chuàng)建請求：調(diào)用XMLHttpRequest對象的open方法。設(shè)置回調(diào)函數(shù)：為AJAX對象的onreadystatechange事件設(shè)定響應(yīng)函數(shù)。4.發(fā)送請求：調(diào)用Ajax對象的send方法stepl:獲得對象step2:利用ajax對象發(fā)送請求get請求xhr.open(get,URI,true);open()方法可以理解為準備工作，填寫發(fā)送請求前的

24、信息的準備。第一個參數(shù)位置，使用“get”即發(fā)送GET請求。第二個參數(shù)位置，填寫發(fā)送請求的地址，如果在發(fā)送GET請求時需要在地址中攜帶參數(shù)值，可以通過“？”的方式來追加“name二value”對象第三個參數(shù)位置，為boolean類型的值。當該boolean值為true時，服務(wù)器請求是異步進行的，也就是腳本執(zhí)行send()方法后不等待服務(wù)器的執(zhí)行結(jié)果，而是繼續(xù)執(zhí)行腳本代碼；當該boolean值為false時，服務(wù)器請求是同步進行的，也就是腳本執(zhí)行send()方法后等待服務(wù)器的執(zhí)行結(jié)果的返回，若在等待過程中超時，則不再等待，繼續(xù)執(zhí)行后面的腳本代碼！注意：該方法還沒有真正的發(fā)送請求。step3:編寫

25、服務(wù)器端的處理程序，一般不需要返回完整的頁面，只需要返回部分的頁面step4:編寫處理函數(shù)get請求：xhr.open(get,xx.do?uname=Bear,true);xhr.onreadystatechange=fn;xhr.send(null);post請求：xhr.open(post,xx.do,true);xhr.setRequestHeader(content-type,applicaton/x-www-form-urlencoded);xhr.onreadystatechange=fn;xhr.send(uname=Bear);注意：Http要求在發(fā)送post請求的時候需要添

26、加一個“content-type消頭”,因為ajax在默認的情況下不會添加消息頭，所以需要調(diào)用.setRequestHeader()方法來設(shè)置消息頭。GET請求時的亂碼問題為什么會有亂碼？亂碼的根本原因在于瀏覽器的的編碼和服務(wù)器的解碼的方式不同而產(chǎn)生的。比如IE瀏覽器提供的AJAX對象會使用GBK字符集對請求參數(shù)進行編碼，而其它瀏覽器會使用UTF-8來編碼。也就是不同的瀏覽器在發(fā)送請求時數(shù)據(jù)編碼就已經(jīng)不一致了。而對于服務(wù)器來講，默認情況下會使用ISO-8859-1進行解碼，這種解碼格式是Tomcat的配置文件中聲明的。解決亂碼問題，就需要在客戶端和服務(wù)器端統(tǒng)一編碼和解碼的方式即可。stepl:

27、設(shè)置服務(wù)器端使用“utf-8”來解碼，即修改Tomcat的XML文件(conf/service.xmlvconnectorURIEncoding=utf-8)即可，但是此方法只適用于get請求；step2:使用encodeURI函數(shù)統(tǒng)一編碼。POST請求時的亂碼問題亂碼產(chǎn)生的原因？POST請求時亂碼問題產(chǎn)生的原因依然是編碼與解碼的不同造成的。因為所有瀏覽器在進行POST方式提交時都是使用UTF-8方式進行編碼的，到了服務(wù)器端則默認使用ISO-8859-1方式來解碼。所以只需要修改服務(wù)器端的解碼格式，保證是UTF-8的方式來接嗎就可以避免亂碼。注：火狐就不用這句代碼，是因為這個瀏覽器會在發(fā)送的請

28、求數(shù)據(jù)包中告訴服務(wù)器，它是哪種方式進行的數(shù)據(jù)編碼。服務(wù)器端：request.setCharacterEncoding(utf-8);response.setContentType(text/html;charset=utf-8);JSON1.什么是JSON?JSON即Javascript對象表示法，是一種現(xiàn)在主流的數(shù)據(jù)交換格式。輕量級的數(shù)據(jù)交換技術(shù)標準。a、數(shù)據(jù)交換：將數(shù)據(jù)轉(zhuǎn)換成和平臺無關(guān)的數(shù)據(jù)發(fā)送給接收放來處理b、輕量級相對于xml做數(shù)據(jù)交換格式，json文檔更小，解析的速度更快。特點：a、簡單，只有六種類型的符號；，就可以表示任何種類的復(fù)雜對象或數(shù)組。b、易讀，機器解析還是人的閱讀都能夠從

29、這種格式中快速找到所需要的信息。2.JSON語法：使用JSON表示一個對象屬性名:屬性值,屬性名:屬性值,例：varobj=id:1,name:王小賤，age:24;varname=;varobj=id:1,name:王小賤，dep:depld:1,depName:財務(wù)部;vardepName=obj.dep.depName;注意：a、屬性名要使用引號引起來b、屬性值的類型可以多樣化，包括string、number、true、false、null、object、arrayc、如果屬性值的類型為字符串，則必須使用引號括起來使用JSON表示一個數(shù)組Object1,Object2,Object3a、

30、Object的類型可以是string、number、false、true、null、object、array。3使用JSON實現(xiàn)數(shù)據(jù)交換1.JSON數(shù)據(jù)交換原理JSON作為數(shù)據(jù)的交換格式，在客戶端和服務(wù)器端都要有對應(yīng)的轉(zhuǎn)換過程。如果是客戶端請求數(shù)據(jù)，那么服務(wù)器端就將Java對象先轉(zhuǎn)換成JSON字符串，經(jīng)響應(yīng)把字符串傳到客戶端之后，客戶端就會接收到這個轉(zhuǎn)換結(jié)果，但JavaScript要求把這個字符串變成對象格式才更方便訪問，所以在客戶端的JavaScript代碼中又需要將這個JSON字符串變成JavaScript能夠識別的對象，這樣就完成了從服務(wù)器端的對象到客戶端對象的整個轉(zhuǎn)變過程。同理，如果在客戶端填寫了數(shù)據(jù)后想提交給服務(wù)器，首先是將客戶端數(shù)據(jù)構(gòu)造成一個JSON對象字符串，經(jīng)網(wǎng)絡(luò)傳遞到服務(wù)器端，服務(wù)器端再依據(jù)轉(zhuǎn)換規(guī)則將JSON字符串變成Java識別的對象。Java對象轉(zhuǎn)換成JSON服務(wù)器端在服務(wù)器端對象的轉(zhuǎn)換過程可以使用官方提供的API，JSONObject和JSONArray分別為對象和數(shù)組的轉(zhuǎn)換類型。JSON字符串轉(zhuǎn)換成JS對象瀏覽器端當JSON經(jīng)傳輸?shù)竭_客戶端時，需要完成JSON到Java