java課程c第三階段j2ee第五章jquery框架

本章概要jquery簡(jiǎn)介jquery可以做什么？dom選擇器元素的遍歷dom屬性css操作動(dòng)態(tài)效果文檔處理事件處理ajaxjquery簡(jiǎn)介Jquery是一款功能強(qiáng)大，設(shè)計(jì)良好的javascript框架，可以簡(jiǎn)化前端開(kāi)發(fā)Jquery可以解決大多數(shù)瀏覽器兼容性問(wèn)題（IE6除外）非常便于開(kāi)發(fā)ajax功能目前最新版本2.x，已經(jīng)可以支持手機(jī)端（html5）jquery可以做什么？

dom選擇器元素的遍歷

dom屬性

css操作動(dòng)態(tài)效果文檔處理事件處理

AJAXdom選擇器

jquery最強(qiáng)大的功能，可以讓你通過(guò)元素名稱和元素屬性對(duì)html元素進(jìn)行選擇比較常用的選擇器：

id選擇class選擇元素名稱選擇器注：這三種選擇器和css樣式的三種定義方式其實(shí)是一一對(duì)應(yīng)的dom選擇器id選擇(#)$("#username"):獲取id="username"的網(wǎng)頁(yè)元素class選擇(.)$(".divcss"):獲取所有class="divcss"的網(wǎng)頁(yè)元素元素名稱選擇器$("p"):得到所有p元素$("div"):得到所有div元素dom選擇器屬性選擇器[attribute=value]

：$("div[abbr='dvs']")獲取

abbr='dvs'的所有div[attribute^=value]

：$("div[abbr^='dvs']")獲取

abbr以dvs開(kāi)頭的所有divdom選擇器其他常用選擇器:first:even:odd$("div:first")第一個(gè)<div>元素$("tr:even")所有偶數(shù)<tr>元素$("tr:odd")所有奇數(shù)<tr>元素dom選擇器:eq(index)$("#mytable

tr:eq(3)")：獲取id="mytable"的table元素中第4個(gè)tr:gt(index)$("#mytable

tr:gt(1)") ：獲取id="mytable"的table元素中下標(biāo)大于1的所有tr:lt(index)$("#mytable

tr:lt(2)")：獲取id="mytable"的table元素中下標(biāo)小于2的所有trdom選擇器:contains(text)$(":contains('javascript')")：包含指定字符串的所有元素:hidden$("div:hidden")：所有隱藏的div元素:visible$("div:visible")：所有可見(jiàn)的div元素的遍歷jquery對(duì)象的each函數(shù)可以實(shí)現(xiàn)元素的遍歷$("div[abbr^='dvs']").each(function(i,n){alert(i+":"+n.innerHTML);});其中i是下標(biāo)索引，n是每個(gè)dom對(duì)象dom屬性attr()設(shè)置或返回匹配元素的屬性和值。html()設(shè)置或返回匹配的元素集合中的HTML內(nèi)容。val()設(shè)置或返回匹配元素的值。addClass()向匹配的元素添加指定的css樣式類。removeClass()從所有匹配的元素中刪除css樣式類。CSS操作css()設(shè)置或返回匹配元素的樣式屬性。height()設(shè)置或返回匹配元素的高度。width()設(shè)置或返回匹配元素的寬度。offset({top:100,left:0})

返回匹配元素相對(duì)于文檔的位置。動(dòng)態(tài)效果show()顯示被選的元素hide()隱藏被選的元素toggle()對(duì)被選元素進(jìn)行隱藏和顯示的切換slideDown()通過(guò)調(diào)整高度來(lái)滑動(dòng)顯示被選元素slideUp()通過(guò)調(diào)整高度來(lái)滑動(dòng)隱藏被選元素slideToggle()對(duì)被選元素進(jìn)行滑動(dòng)隱藏和滑動(dòng)顯示的切換動(dòng)態(tài)效果fadeIn()淡入被選元素至完全不透明fadeOut()淡出被選元素至完全不透明文檔處理after()在匹配的元素之后插入內(nèi)容。before()在每個(gè)匹配的元素之前插入內(nèi)容。append()向匹配的元素內(nèi)部追加內(nèi)容。insertAfter()把匹配的元素插入到另一個(gè)指定的元素集合的后面。insertBefore()把匹配的元素插入到另一個(gè)指定的元素集合的前面。文檔處理remove()移除所有匹配的元素。text()設(shè)置或返回匹配元素的內(nèi)容。html()設(shè)置或返回匹配的元素集合中的HTML內(nèi)容。val()設(shè)置或返回匹配元素的值。clone()創(chuàng)建匹配元素集合的副本。事件處理運(yùn)用最廣泛的事件函數(shù)是ready函數(shù)，它是在html文檔加載結(jié)束后激活調(diào)用的，常用于在文檔加載完后做一些初始化的操作$(document).ready(function(){alert(“我在文檔加載完之后執(zhí)行”);});這個(gè)函數(shù)看起來(lái)比較特殊，從整體來(lái)看是 ready();但是在ready的小括號(hào)里傳入了一個(gè)匿名的函數(shù)，這是javascript函數(shù)調(diào)用的通常做法，有時(shí)候我們不需要知道某段函數(shù)的函數(shù)名,只需要知道當(dāng)條件滿足時(shí)執(zhí)行這段代碼。事件處理

所以上面的代碼其實(shí)就相當(dāng)于：

function

readyGo(){alert(“我在文檔加載完之后執(zhí)行”);}$(document).ready(readyGo);事件處理click():觸發(fā)某個(gè)元素的單擊事件，或綁定某元素 的單擊事件所調(diào)用的函數(shù)給id=“btn”的按鈕綁定單擊事件，用戶點(diǎn)擊后會(huì)觸發(fā)function里面的代碼$(“#btn”).click(function(){alert(“點(diǎn)我啊”);});事件處理mouseover():觸發(fā)某個(gè)元素的鼠標(biāo)懸停事件，或 綁定某元素的懸停事件所調(diào)用的函數(shù)$("p").mouseover(function(){$("p").css("background-color","yellow");});事件處理mouseout():觸發(fā)某個(gè)元素的鼠標(biāo)離開(kāi)事件，或 綁定某元素的離開(kāi)事件所調(diào)用的函數(shù)$("p").mouseout(function(){$("p").css("background-color",“red");});事件處理change():觸發(fā)某個(gè)元素的值改變事件，或綁定某元素的值改變事件所調(diào)用的函數(shù)$(“#city").change(function(){varselectValue=$(this).val();alert(“你選擇的值：”+selectValue);});事件處理toggle()綁定兩個(gè)或多個(gè)事件處理器函數(shù)，當(dāng)發(fā)生輪流的click事件時(shí)執(zhí)行。$("changeBodyColor").toggle(function(){$("body").css("background-color","green");},function(){$("body").css("background-color","red");},function(){$("body").css("background-color","yellow");});這個(gè)事件實(shí)現(xiàn)了點(diǎn)擊按鈕后輪流的改變body的背景顏色AJAXAjax：異步的javascript，它是基于javascript技術(shù)實(shí)現(xiàn)的一種功能使用Ajax可以做出用戶體驗(yàn)良好的web程序，比如說(shuō)無(wú)刷新驗(yàn)證，根據(jù)查詢的結(jié)果集動(dòng)態(tài)的構(gòu)造網(wǎng)頁(yè)元素等AJAX原生Ajax實(shí)現(xiàn)

Ajax技術(shù)最核心的Javascript對(duì)象是XMLHttpRequest，它提供了對(duì)

Http請(qǐng)求的能力，并且它可以在無(wú)刷新的情況下去請(qǐng)求并接收資源， 目前幾乎所有瀏覽器都支持這個(gè)對(duì)象。在請(qǐng)求某個(gè)url之前，需要綁定請(qǐng)求處理后觸發(fā)的事件：

var

xmlhttpRequest=new

XMLHttpRequest();xmlhttpRequest.onreadystatechange=function(){if

(xmlhttpRequest.readyState==4

&&xmlhttpRequest.status==200){document.getElementById("content").value=xmlhttpRequest.responseText;}}AJAX其中readyState=4表示Http響應(yīng)已經(jīng)完全接收，status是狀態(tài)碼，

200表示成功，當(dāng)兩個(gè)條件都滿足時(shí)，就可以接收服務(wù)器返回的數(shù)據(jù)。當(dāng)然，沒(méi)有使用XMLHttpRequest()去請(qǐng)求是不會(huì)觸發(fā)這個(gè)函數(shù)的，請(qǐng)求的代碼是：xmlhttpRequest.open("GET","ajaxtest.txt",true);xmlhttpRequest.send();AJAX這里是直接請(qǐng)求的文本文檔，假如請(qǐng)求服務(wù)器上的某個(gè)action，那么action中應(yīng)該使用response對(duì)象給客戶端寫(xiě)數(shù)據(jù)：Writer

writer=response.getWriter();writer.write("iserror");writer.flush();writer.close();AJAX使用jquery實(shí)現(xiàn)ajax功能jquery是一款基于javascript的框架，它不僅提供了強(qiáng)大了元素選擇功能，還提供了ajax功能。使用jquery實(shí)現(xiàn)ajax功能的步驟如下：

1,導(dǎo)入jquery.js

2,創(chuàng)建form表單和按鈕事件AJAX

3編寫(xiě)事件（重點(diǎn)）function

doRegister(){var

username=$("#username").val();$.ajax({type:"post",//異步請(qǐng)求方式data:{"username":username},//傳遞的數(shù)據(jù)

url:'/user/userAction!checkUsername.action',//請(qǐng)求路徑

dataType:"text",success:function(data){alert(data);},error:function(err){alert("錯(cuò)誤："+err);}//異步請(qǐng)求失敗后的回調(diào)函數(shù)});}==================配置詳解================type:post或get，請(qǐng)求方式

data:傳遞的參數(shù)數(shù)據(jù)，多個(gè)參數(shù)用逗號(hào)分隔{k1:v1,k2:v2}url:請(qǐng)求的路徑dataType:返回的數(shù)據(jù)類型AJ