jQuery是封裝的javascript庫(kù),語(yǔ)法和javascript相似,但是寫(xiě)法比javascript簡(jiǎn)單,比如獲取ID對(duì)象,javascript:document.getElementByID("ID");而JQ只需要這樣寫(xiě):$("#ID");
w3c school有關(guān)于jQuery的基礎(chǔ)教程。
注意事項(xiàng):在需要用到JQ的頁(yè)面中都需要引入JQ庫(kù)才能使用。
如:<script src="/uploads/zysx/jquery.js"></script>
1、使用jQuery.noConflict。
如:var j = jQuery.noConflict(); j.ajax(); 缺點(diǎn):當(dāng)使用jQuery的相關(guān)插件時(shí),會(huì)使得插件失效哦! 2、使用jQuery代替$. 如:jQuery.ajax(); 缺點(diǎn):不適合擴(kuò)展,一旦替換成第三方庫(kù)時(shí),那就麻煩大發(fā) 3、wrap jQuery中的沖突方法。 如$.ajax()在Velocity中會(huì)沖突,則重新定義如下: function dw(){} dw.ajax=function(s){ jQuery.ajax(s); } dw.ajax(); 4、定義一個(gè)$JQ為$. 以后在js 中就可以用${JQ}AJAX了. 在前臺(tái)這樣寫(xiě)(定義):#set($JQ="$.") 我推薦第4種方式喲。
一、animate語(yǔ)法結(jié)構(gòu),animate(params,speed,callback),params:一個(gè)包含樣式屬性及值的映射,比如{key1:value1,key2:value2},speed:速度參數(shù)[可選],callback:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)[可選],二、自定義簡(jiǎn)單動(dòng)畫(huà),用一個(gè)簡(jiǎn)單例子來(lái)說(shuō)明,實(shí)現(xiàn)單擊某div在頁(yè)面上橫向飄動(dòng)的效果,為了使元素動(dòng)起來(lái),要改變left屬性。
為了能影響元素top、right、bottom、left屬性值必須聲明元素的position,演示效果,三、累加、累減動(dòng)畫(huà),在之前的代碼中,設(shè)置了{(lán)left:"100px"}這個(gè)屬性作為參數(shù),如果改寫(xiě)為{left:"+=25px"},效果如下,演示效果,四、多重動(dòng)畫(huà),同時(shí)執(zhí)行多個(gè)動(dòng)畫(huà),上面的例子是一個(gè)很簡(jiǎn)單的動(dòng)畫(huà)。 如果想同時(shí)執(zhí)行多個(gè)動(dòng)畫(huà),比如在元素向右滑動(dòng)的同時(shí),放大元素高度,代碼如下:$(this)。
animate({left:"+=25px",height:"+=20px"},1000),演示效果,五、按順序執(zhí)行多個(gè)動(dòng)畫(huà),上例中,向右滑動(dòng)與高度變大是同時(shí)發(fā)生的,如果想讓方塊先向右滑動(dòng)再變高,只需將代碼拆分,如下:$(this)。 animate({left:"+=25px"},500)。
animate({height:"+=20px"},500),像這樣的動(dòng)畫(huà)效果的執(zhí)行有先后順序,稱(chēng)為“動(dòng)畫(huà)隊(duì)列”,演示效果,六、綜合示例,單擊方塊,讓他向右移動(dòng)的同時(shí)增高,不透明度從50%增加到100%,之后上下移動(dòng),加寬,完成后淡出,$("#cube")。 click(function(){$(this)。
animate({left:"100px",height:"100px",opacity:"1"},500)。animate({top:"40px",width:"100px"},500)。
fadeOut('slow')}),為同一元素應(yīng)用多重效果時(shí)可以通過(guò)鏈?zhǔn)椒绞綄?duì)這些效果進(jìn)行排隊(duì),演示效果,七、動(dòng)畫(huà)回調(diào)函數(shù),在上例中,如果想在最后一步切換css樣式(background:blue),而不是淡出,如果按照通常處理,相關(guān)代碼如下:$("#cube")。 click(function(){$(this)。
animate({left:"100px",height:"100px",opacity:"1"},500)。animate({top:"40px",width:"100px"},500)。
css("border","5pxsolidblue")//改動(dòng)這行}),然而,css()方法被提前調(diào)用,演示效果,引起這個(gè)問(wèn)題的原因是,css()方法不會(huì)加入到動(dòng)畫(huà)隊(duì)列中,而是立即執(zhí)行。 可以使用回調(diào)函數(shù)對(duì)非動(dòng)畫(huà)方法實(shí)現(xiàn)排隊(duì),正確的相關(guān)代碼如下:$("#cube")。
click(function(){$(this)。animate({left:"100px",height:"100px",opacity:"1"},500)。
animate({top:"40px",width:"100px"},500,function(){$(this)。 css("border","5pxsolidblue")})}),演示效果,值得注意的是,callback適用于jquery所有的動(dòng)畫(huà)方法,比如slidDown(),show()等,總結(jié),以上就是關(guān)于jquery中animate的幾種用法和注意事項(xiàng),希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
謝謝大家對(duì)腳本之家的支持。
$();這是jquery的基本語(yǔ)法
$(obj); obj=dom對(duì)象,講obj這個(gè)dom轉(zhuǎn)成jquery對(duì)象,就可以使用jquery的函數(shù)了
$("#index") ; #符號(hào)是代表根據(jù)ID查找,查找ID為index的標(biāo)簽;返回的也是jquery對(duì)象$(".title"); .符號(hào)代表根據(jù)樣式(Class)查找,查找樣式為title的標(biāo)簽;返回jquery對(duì)象,如果有多少標(biāo)簽引用了title樣式,返回jquery集合
$("a"); 不加符號(hào)代表查找標(biāo)簽,查找所有的a標(biāo)簽;返回jquery對(duì)象集合
$("input[name='newsletter']"); 查找屬性name為'newsletter' 的input標(biāo)簽
$("div,span,p.myClass"); 可以多種條件結(jié)合,中間用逗號(hào)隔開(kāi)
。.
暈死,太多了寫(xiě)不完.自己去看幫助文檔吧。.
JQuery AJAX 的應(yīng)用你也不懸賞一下,給你解釋下,有點(diǎn)亂頁(yè)面有一個(gè)樹(shù)形對(duì)象,id為"tree";它的每個(gè)節(jié)點(diǎn)都有一個(gè)唯一的編號(hào);當(dāng)點(diǎn)擊節(jié)點(diǎn)中class為"treeCss_edit"的對(duì)象后,就讀出該節(jié)點(diǎn)的編號(hào),并把它臨時(shí)存放一個(gè)id為"EditID"的控件的value中;然后,把這個(gè)正在編輯節(jié)點(diǎn)的編號(hào)以GET方式發(fā)送給服務(wù)器,服務(wù)器端的處理程序的網(wǎng)址,也就是頁(yè)面中一個(gè)id為"frm-EditCategories"的form表單的action屬性的值;服務(wù)器根據(jù)傳遞上來(lái)的編號(hào)進(jìn)行處理,然后以 JSON(不懂JSON的先自己去學(xué)學(xué)) 的形式反饋給客戶(hù)端,客戶(hù)端受到這個(gè)一串反饋值后,進(jìn)行判斷如果JSON對(duì)象的id屬性等于"underfined",那就彈出一個(gè)對(duì)話(huà)框,顯示“此記錄不存在!”,否則:把JSON對(duì)象的id屬性賦值給id為"parentIdEdit"的頁(yè)面對(duì)象下的一個(gè) select 下拉控件;把JSON對(duì)象的title屬性賦值給id為"EditCategoryName"的頁(yè)面對(duì)象;把JSON對(duì)象的description屬性賦值給id為"EditDescription"的頁(yè)面對(duì)象;最后去執(zhí)行id為"editCategories"的頁(yè)面對(duì)象的 dialog 方法,這個(gè)方法帶一個(gè)參數(shù)"open",可能是展開(kāi)。
$();這是jquery的基本語(yǔ)法$(obj); obj=dom對(duì)象,講obj這個(gè)dom轉(zhuǎn)成jquery對(duì)象,就可以使用jquery的函數(shù)了$("#index") ; #符號(hào)是代表根據(jù)ID查找,查找ID為index的標(biāo)簽;返回的也是jquery對(duì)象$(".title"); .符號(hào)代表根據(jù)樣式(Class)查找,查找樣式為title的標(biāo)簽;返回jquery對(duì)象,如果有多少標(biāo)簽引用了title樣式,返回jquery集合$("a"); 不加符號(hào)代表查找標(biāo)簽,查找所有的a標(biāo)簽;返回jquery對(duì)象集合$("input[name='newsletter']"); 查找屬性name為'newsletter' 的input標(biāo)簽$("div,span,p.myClass"); 可以多種條件結(jié)合,中間用逗號(hào)隔開(kāi)。
.暈死,太多了寫(xiě)不完.自己去看幫助文檔吧。
聲明:本網(wǎng)站尊重并保護(hù)知識(shí)產(chǎn)權(quán),根據(jù)《信息網(wǎng)絡(luò)傳播權(quán)保護(hù)條例》,如果我們轉(zhuǎn)載的作品侵犯了您的權(quán)利,請(qǐng)?jiān)谝粋€(gè)月內(nèi)通知我們,我們會(huì)及時(shí)刪除。
蜀ICP備2020033479號(hào)-4 Copyright ? 2016 學(xué)習(xí)鳥(niǎo). 頁(yè)面生成時(shí)間:2.942秒