資源描述:
《jquery+easyui培訓(xùn)》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、jQuery+EasyUI培訓(xùn)2012.02.27jQuery是優(yōu)秀的Javascirpt框架.用戶能更方便地處理HTMLdocuments、events、實現(xiàn)動畫效果,并且方便地為網(wǎng)站提供AJAX交互。同類型框架比較:輔助操作:Prototype、MooTools整合型:YUI、ExtJs、DojojQuery既有操作性API,又有對于UI實現(xiàn)的封裝jQuery--簡介選擇器文檔操作CSS處理事件綁定數(shù)據(jù)遍歷Ajax效果jQuery--功能劃分jQuery-選擇器三種類型選擇器jQuery元素選擇
2、器jQuery使用選取HTML元素$('p'),$(‘#mm’)jQuery屬性選擇器jQuery使用XPath表達(dá)式來選擇帶有給定屬性的元素。$([name=“abc"])$([check=‘’checked])jQueryCSS選擇器jQueryCSS選擇器可用于改變HTML元素的CSS屬性$('#ss').css('background-color','red');最常用的三個方法html()設(shè)置或返回匹配的元素集合中的HTML內(nèi)容$(‘#p’).html();text()設(shè)置或返回匹配元素的
3、內(nèi)容$(‘#p’).text();val()設(shè)置或返回匹配元素的值$(‘#p’).val();jQuery-文檔操作三種CSS操作方法$(selector).css(name,value)為所有匹配元素的給定CSS屬性設(shè)置值$("p").css("background-color","red");$(selector).css({properties})同時為所有匹配元素的一系列CSS屬性設(shè)置值$("p").css({"background-color":"red","font-size":"200
4、%"});$(selector).css(name)返回指定的CSS屬性的值$(this).css("background-color");jQuery-CSS處理常用方法$(selector).each(function(index,element))對jQuery對象進(jìn)行迭代,為每個匹配元素執(zhí)行函數(shù)next(selector)獲得匹配元素緊鄰元素中的下一個$("p").next(".selected");prev(selector)獲得匹配元素緊鄰元素中的上一個$("p").prev(".sel
5、ected")first()獲取集合元素中的第一個$("pspan").first().last()獲取集合元素的最后一個$("pspan").last()jQuery-元素遍歷常用事件$(document).ready(function)將函數(shù)綁定到文檔的就緒事件(當(dāng)文檔完成加載時)$(selector).click(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點擊事件$(selector).dblclick(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件$(selector).focu
6、s(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點事件$(selector).mouseover(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件jQuery-事件處理方法列舉及比較$.ajax:基礎(chǔ)方法語法:jQuery.ajax([settings]).load:載入遠(yuǎn)程HTML文件代碼并插入至DOM中語法:load(url,[data],[callback])$.get:使用GET方式來進(jìn)行異步請求語法:jQuery.get(url,[data],[callback])$.p
7、ost:使用POST方式來進(jìn)行異步請求語法:jQuery.post(url,[data],[callback],[type])$.getScript:通過GET方式請求載入并執(zhí)行一個JavaScript文件語法:jQuery.getScript(url,[callback])jQuery--Ajax事件jQueryAjax中有兩種類型的事件:全局事件是每次的Ajax請求都會觸發(fā)的,它會向DOM中的所有元素廣播ajaxSend、ajaxSuccess、ajaxError、ajaxComplete局部事
8、件每次的Ajax請求時在方法內(nèi)定義的,針對的是當(dāng)前Ajax的結(jié)果beforeSend、success、error、complete、jQuery--Ajax常用方法$(selector).hide(speed,callback)隱藏元素$("p").hide();$(selector).show(speed,callback)顯示元素$("p").show();$(selector).slideDown()向下滑動(顯示)被選元素$(".panel").slideDo