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