一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

jQuery筆記

 COZUCHOU 2012-09-18
轉(zhuǎn)載至:http://fackyou200./blog/1484675

  • //------------------------- 第一章 認(rèn)識JQuery -------------------------  
  •   
  • ·頁面加載事件(可以寫多個ready())  
  • $(document).ready(function(){  
  •     alert("hello world");  
  • })  
  •   
  • ·鏈?zhǔn)讲僮鳎篔Query允許你在一句代碼中操做任何與其相關(guān)聯(lián)的元素,包括其子元素、父元素等  
  • //選擇名稱為myDiv的元素,為其自身添加css1的樣式,然后再選擇其所有子元素a,為其移除css2樣式  
  • $("#myDiv").addClass("css1").children("a").removeClass("css2");  
  •   
  • ·JQuery中獲得一個對象的所有子元素內(nèi)容  
  • $("#myDiv").html()  
  •   
  • ·JQuery中的變量 與 DOM中的變量  
  • var $myVar = "";  
  • var myVar = "";  
  •   
  • ·DOM對象 轉(zhuǎn)換成 JQuery對象  
  • var obj = documnet.getElementById("myDiv");  
  • var $obj = $(obj);  
  •   
  • ·JQuery對象 轉(zhuǎn)換成 DOM對象  
  • var $obj = $("#myDiv");  
  • var obj = $obj.get(0);  //或者var obj = $obj[0];  
  •   
  • ·釋放JQuery對$符號的控制權(quán)  
  • JQuery.noConflict();  
  •   
  •   
  • //---------------------------- 第二章 JQuery選擇器 -------------------------------  
  •   
  • ·JQuery完善的處理機(jī)制  
  • document.getElementById("test").style.color = "red"//如果test不存在,則頁面出現(xiàn)異常  
  • $("#test").css("color","red"); //哪怕頁面沒有名稱為test的元素,也不會報錯。它是一個JQuery對象  
  •   
  • ·判斷頁面是否選擇的對象  
  • if( $(".class").length > 0 ){  
  •     // todo something  
  • }  
  •   
  • ·基本選擇器  
  • $("#myDiv")    //根據(jù)給定的ID選擇匹配的元素,返回:單個元素  
  • $(".myClass"//根據(jù)給定的樣式名稱選擇匹配的元素,返回:集合元素  
  • $("div"//根據(jù)給定的元素名稱選擇匹配的元素,返回:集合元素  
  • $("#myDiv,div.myClass,span"//根據(jù)給定的規(guī)則選擇匹配的元素,返回:集合元素  
  • $("*"//選擇頁面所有元素,返回:集合元素  
  •   
  • ·層次選擇器  
  • $("div span"//選擇所有DIV元素下的所有SPAN元素(所有后代元素),返回:集合元素  
  • $("div>span"//選擇所有DIV元素下的SPAN子元素(僅子元素),返回:集合元素  
  • $(".myClass+div"//選擇樣式名稱為myClass的下一個DIV元素,返回:集合元素  
  • $(".myClass+div"//等價于 $(".myClass").next("div");  
  • $(".myClass~div"//選擇樣式名稱為myClass之后的所有DIV元素,返回:集合元素  
  • $(".myClass~div"//等價于 $(".myClass").nextAll();  
  • $(".myClass").siblings("div"//選擇樣式名稱為myClass的元素的所有同輩DIV元素(無論前后),返回集合元素  
  •   
  • ·過濾選擇器(index從0開始)  
  • $("div:first"//選擇所有DIV元素下的第一個DIV元素,返回:單個元素  
  • $("div:last"//選擇所有DIV元素下的最后一個DIV元素,返回:單個元素  
  • $("div:not(.myClass)"//選擇所有樣式不包括myClass的DIV元素,返回:集合元素  
  • $("div:even"//選擇所有索引是偶數(shù)的DIV元素,返回:集合元素  
  • $("div:odd"//選擇所有索引是奇數(shù)的DIV元素,返回:集合元素  
  • $("div:eq(index)"//選擇所有索引等于index的DIV元素,返回:集合元素  
  • $("div:gt(index)"//選擇所有索引大于index的DIV元素,返回:集合元素  
  • $("div:lt(index)"//選擇所有索引小于index的DIV元素,返回:集合元素  
  • $(":header"//選擇所有標(biāo)題元素(h1,h2,h3),返回:集合元素  
  • $("div:animated"//選擇所有正在執(zhí)行去畫的DIV元素,返回:集合元素  
  •   
  • ·子元素過濾選擇器(index從1開始)  
  • $(":nth-child(index/even/odd)"//選擇每個父元素下的第index/偶數(shù)/奇數(shù)個子元素,返回:集合元素  
  • $(":first-child"//選擇每個父元素下的第一個子元素,返回:集合元素  
  • $(":last-child"//選擇每個父元素下的最后一個子元素,返回:集合元素  
  • $("ul li:only-child"//在UL元素中選擇只有一個LI元素的子元素,返回:集合元素  
  •   
  • ·內(nèi)容過濾選擇器  
  • $(":contains(text)"//選擇所有內(nèi)容包含text的元素,返回:集合元素  
  • $("div:empty"//選擇所有內(nèi)容為空的DIV元素,返回:集合元素  
  • $("div:has(span)"//選擇所有含有SPAN子元素的DIV元素,返回:集合元素  
  • $("div:parent"//選擇所有含有子元素的DIV元素,返回:集合元素  
  •   
  • ·可見性選擇器  
  • $(":hidden"//選擇所有不可見的元素(type="hidden" style="display:none" style="visibility:none"),返回:集合元素  
  • $(":visible"//選擇所有可見的元素,返回:集合元素  
  •   
  • ·屬性過濾選擇器  
  • $("[id]"//選擇所有含有id屬性的元素,返回:集合元素  
  • $("[class=myClass]"//選擇所有class屬性值是myClass的元素,返回:集合元素  
  • $("[class!=myClass]"//選擇所有class屬性值不是myClass的元素,返回:集合元素  
  • $("[alt^=begin]"//選擇所有alt屬性值以begin開始的元素,返回:集合元素  
  • $("[alt^=end]"//選擇所有alt屬性值以end結(jié)束的元素,返回:集合元素  
  • $("[alt*=some]"//選擇所有alt屬性值含有some的元素,返回:集合元素  
  • $("div[id][class=myClass]"//選擇所有含有id屬性的并且class屬性值是myClass的元素,返回:集合元素  
  •   
  • ·表單對象屬性選擇器  
  • $("#myForm:enabled"//選擇ID屬性為myForm的表單的所有可用元素,返回:集合元素  
  • $("#myForm:disabled"//選擇ID屬性為myForm的表單的所有不可用元素,返回:集合元素  
  • $("#myForm:checked"//選擇ID屬性為myForm的表單的所有所有被選中的元素,返回:集合元素  
  • $("#myForm:selected"//選擇ID屬性為myForm的表單的所有所有被選中的元素,返回:集合元素  
  •   
  • ·表單選擇器  
  • $(":input"//選擇所有<input> <select> <button> <textarea>元素,返回:集合元素  
  • $(":text"//選擇所有單行文本框元素,返回:集合元素  
  • $(":password"//選擇所有密碼框元素,返回:集合元素  
  • $(":radio"//選擇所有單選框元素,返回:集合元素  
  • $(":checkbox"//選擇所有復(fù)選框元素,返回:集合元素  
  • $(":submit"//選擇所有提交按鈕元素,返回:集合元素  
  • $(":image"//選擇所有圖片按鈕元素,返回:集合元素  
  • $(":reset"//選擇所有重置按鈕元素,返回:集合元素  
  • $(":button"//選擇所有按鈕元素,返回:集合元素  
  • $(":file"//選擇所有上傳域元素,返回:集合元素  
  • $(":hidden"//選擇所有不可見域元素,返回:集合元素  
  • $(":text"//選擇所有單選文本框元素,返回:集合元素  
  •   
  •   
  • //---------------------------- 第三章 JQuery中的DOM操作 -------------------------------  
  •   
  • ·查找元素節(jié)點(diǎn)  
  • var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>  
  • alert(str); //結(jié)果:123  
  •   
  • ·查找屬性節(jié)點(diǎn)  
  • var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>  
  • alert(str); //結(jié)果:hello  
  •   
  • ·創(chuàng)建元素節(jié)點(diǎn)  
  • var $li1 = $("<span></span>"); //傳入元素標(biāo)記,自動包裝并創(chuàng)建第一個li元素對象  
  • var $li2 = $("<span></span>"); //第二個,創(chuàng)建時需要遵循XHTML規(guī)則(閉合、小寫)  
  • $("#myDiv").append($li1); //往id為myDiv的元素中添加一個元素  
  • $("#myDiv").append($li2); //結(jié)果:<div id="myDiv"><span></span><span></span></div>  
  •   
  • $("#myDIv").append($li1).append($li2); //客串:傳說中的鏈?zhǔn)綄懛?,省一行代碼 ^_^  
  •   
  • ·創(chuàng)建文本節(jié)點(diǎn)  
  • var $li1 = $("<span>first</span>");  
  • var $li2 = $("<span>second</span>");  
  • $("#myDIv").append($li1).append($li2);  
  • //結(jié)果:<div id="myDiv"><span>first</span><span>second</span></div>  
  •   
  • ·創(chuàng)建屬性節(jié)點(diǎn)  
  • var $li1 = $("<span title="111">first</span>");  
  • var $li2 = $("<span title="222">second</span>");  
  • $("#myDIv").append($li1).append($li2);   
  • //結(jié)果:<div id="myDiv"><span title="111">first</span><span title="222">second</span></div>  
  •   
  • ·插入節(jié)點(diǎn)  
  • $("#myDiv").append("<span></span>"); //往id為myDiv的元素插入span元素  
  • $("<span></span>").appendTo("#myDiv"); //倒過來,將span元素插入到id為myDiv的元素  
  •   
  • $("#myDiv").prepend("<span></span>"); //往id為myDiv的元素內(nèi)最前面插入span元素  
  • $("<span></span>").prependTo("#myDiv"); //倒過來,將span元素插入到id為myDiv的元素內(nèi)的最前面  
  •   
  • $("#myDiv").after("<span></span>"); //往id為myDiv的元素后面插入span元素(同級,不是子元素)  
  • $("<span></span>").insertAfter("#myDiv"); //倒過來,將span元素插入到id為myDiv的元素后面(同級,不是子元素)  
  •   
  • $("#myDiv").before("<span></span>"); //往id為myDiv的元素前面插入span元素(同級,不是子元素)  
  • $("<span></span>").insertBefore("#myDiv"); //倒過來,將span元素插入到id為myDiv的元素前面(同級,不是子元素)  
  •   
  • ·刪除節(jié)點(diǎn)  
  • $("#myDiv").remove(); //將id為myDiv的元素移除  
  •   
  • ·清空節(jié)點(diǎn)  
  • $("#myDiv").remove("span"); //將id為myDiv的元素內(nèi)的所有span元素移除  
  •   
  • ·復(fù)制節(jié)點(diǎn)  
  • $("#myDiv span").click( function(){ //點(diǎn)擊id為myDiv的元素內(nèi)的span元素,觸發(fā)click事件  
  •     $(this).clone().appendTo("#myDiv"); //將span元素克隆,然后再添加到id為myDiv的元素內(nèi)  
  •     $(this).clone(true).appendTo("#myDiv"); //如果clone傳入true參數(shù),表示同時復(fù)制事件  
  • })  
  •   
  • ·替換節(jié)點(diǎn)  
  • $("p").replaceWith("<strong>您好</strong>"); //將所有p元素替換成后者 <p>您好</p> --> <strong>您好</strong>  
  • $("<strong>您好</strong>").replaceAll("p"); //倒過來寫,同上  
  •   
  • ·包裹節(jié)點(diǎn)  
  • $("strong").wrap("<b></b>"); //用b元素把所有strong元素單獨(dú)包裹起來 <b><strong>您好</strong></b><b><strong>您好</strong></b>  
  • $("strong").wrapAll("<b></b>"); //用b元素把所有strong元素全部包裹起來 <b><strong>您好</strong><strong>您好</strong></b>  
  • $("strong").wrapInner("<b></b>"); //把b元素包裹在strong元素內(nèi) <strong><b>您好</b></strong>  
  •   
  • ·屬性操作  
  • var txt = $("#myDiv").arrt("title"); //獲取id為myDiv的元素的title屬性  
  • $("#myDiv").attr("title","我是標(biāo)題內(nèi)容"); //設(shè)置id為myDiv的元素的title屬性的值  
  • $("#myDiv").attr({"title":"我是標(biāo)題內(nèi)容""alt":"我還是標(biāo)題"); //一次性設(shè)置多個屬性的值  
  • $("#myDiv").removeArrt("alt"); //移除id為myDiv的元素的title屬性  
  •   
  • ·樣式操作  
  • var txt = $("#myDiv").arrt("class"); //獲取id為myDiv的元素的樣式  
  • $("#myDiv").attr("class","myClass"); //設(shè)置id為myDiv的元素的樣式  
  • $("#myDiv").addClass("other"); //在id為myDiv的元素中追加樣式  
  • $("#myDiv").removeClass("other"); //在id為myDiv的元素中移除other樣式  
  • $("#myDiv").removeClass("myClass other"); //在id為myDiv的元素中移除myClass和other多個樣式  
  • $("#myDiv").removeClass(); //在id為myDiv的元素中移除所有樣式  
  • $("#myDiv").toggleClass("other"); //切換樣式,在有other樣式和沒other樣式之間切換  
  • $("#myDiv").hasClass("other"); //判斷是否有other樣式  
  •   
  • ·設(shè)置和獲取HTML、文本和值  
  • alert( $("#myDiv").html() ); //獲取id為myDiv的元素的HTML代碼(相當(dāng)于innerHTML)  
  • $("#myDiv").html("<span>hello</span>"); //設(shè)置id為myDiv的元素的HTML代碼  
  •   
  • alert( $("#myDiv").text() ); //獲取id為myDiv的元素的HTML代碼(相當(dāng)于innerText)  
  • $("#myDiv").text("hello"); //設(shè)置id為myDiv的元素的HTML代碼  
  •   
  • alert( $("#myInput").val() ); //獲取id為myDiv的元素的value值(支持文本框、下拉框、單選框、復(fù)選框等)  
  • $("#myInput").val("hello"); //設(shè)置id為myDiv的元素的value值(下拉框、單選框、復(fù)選框帶有選中效果)  
  •   
  • ·遍歷節(jié)點(diǎn)  
  • var $cList = $("#myDiv").children(); //獲取id為myDiv的元素的子元素(只考慮子元素,不考慮后代元素)  
  • var $sNext = $("#myDiv").next(); //獲取id為myDiv的元素的下一個同輩元素  
  • var $sPrev = $("#myDiv").prev(); //獲取id為myDiv的元素的上一個同輩元素  
  • var $sSibl = $("#myDiv").siblings(); //獲取id為myDiv的元素的所有同輩元素  
  • var $pClos = $("#myDiv").closest("span"); //獲取id為myDiv的元素本身開始,最接近的span元素(向上查找)  
  •   
  • ·CSS-DOM操作  
  • $("#myDiv").css("color"); //獲取id為myDiv的元素的color樣式的值  
  • $("#myDiv").css("color""blue"); //設(shè)置id為myDiv的元素的color樣式的值  
  • $("#myDiv").css({"color":"blue""fontSize":"12px"}); //設(shè)置id為myDiv的元素的color樣式的值(多個)  
  •   
  • $("#myDiv").css("opacity""0.5"); //設(shè)置id為myDiv的元素的透明度(兼容瀏覽器)  
  •   
  • $("#myDiv").css("height"); //獲取id為myDiv的元素的高度(單位:px,兼容瀏覽器)  
  • $("#myDiv").height(); //同上(實(shí)際高度)  
  •   
  • $("#myDiv").css("width"); //獲取id為myDiv的元素的寬度(單位:px,兼容瀏覽器)  
  • $("#myDiv").width(); //同上(實(shí)際寬度)  
  •   
  • var offset = $("#myDiv").offset(); //獲取id為myDiv的元素在當(dāng)前窗口的相對偏移量  
  • alert( offset.top + "|" + offset.left );  
  •   
  • var offset = $("#myDiv").position(); //獲取id為myDiv的元素相對于最近一個position設(shè)置為relative或absolute的父元素的相對偏移量  
  • alert( offset.top + "|" + offset.left );  
  •   
  • $("#txtArea").scrollTop(); //獲取id為txtArea的元素滾動條距離頂端的距離  
  • $("#txtArea").scrollLeft(); //獲取id為txtArea的元素滾動條距離左側(cè)的距離  
  • $("#txtArea").scrollTop(100); //設(shè)置id為txtArea的元素滾動條距離頂端的距離  
  • $("#txtArea").scrollLeft(100); //設(shè)置id為txtArea的元素滾動條距離左側(cè)的距離  
  •   
  •   
  • //---------------------------- 第四章 JQuery中的事件和動畫 -------------------------------  
  •   
  • ·加載DOM  
  • $(window).load() 等價于 window.onload 事件  
  •   
  • $(document).ready() 相當(dāng)于window.onload事件,但有些區(qū)別:  
  •   (1)執(zhí)行時機(jī):  
  •   window.onload 是在網(wǎng)頁中所有元素(包括元素的所有關(guān)聯(lián)文件)完全加載后才執(zhí)行  
  •   $(document).ready() 是在DOM完全就緒時就可以被調(diào)用,此時,并不意味著這些元素關(guān)系的文件都已經(jīng)下載完畢  
  •     
  •   (2)多次使用:可以在同一個頁面注冊多個$(document).ready()事件  
  •   (3)簡寫方式:可以縮寫成 $(function(){ })  或  $().ready()  
  •     
  • ·事件綁定  
  • 當(dāng)文檔裝載完成后,可以通過bind()方法,為特定的元素進(jìn)行事件的綁定,可重復(fù)多次使用  
  •   bind( type, [data, ] fn );  
  •   type:指事件的類型:   
  •     blur(失去焦點(diǎn))、focus(獲得焦點(diǎn))  
  •     load(加載完成)、unload(銷毀完成)  
  •     resize(調(diào)整元素大?。?、scroll(滾動元素)  
  •     click(單擊元素事件)、dbclick(雙擊元素事件)  
  •     mousedown(按下鼠標(biāo))、mouseup(松開鼠標(biāo))  
  •     mousemove(鼠標(biāo)移過)、mouseover(鼠標(biāo)移入)、mouseout(鼠標(biāo)移出)  
  •     mouseenter(鼠標(biāo)進(jìn)入)、mouseleave(鼠標(biāo)離開)  
  •     change(值改變)、select(下拉框索引改變)、submit(提交按鈕)  
  •     keydown(鍵盤按下)、keyup(鍵盤松開)、keypress(鍵盤單擊)  
  •     error(異常)  
  •   data:指事件傳遞的屬性值,event.data 額外傳遞給對象事件的值  
  •   fn:指綁定的處理函數(shù),在此函數(shù)體內(nèi),$(this)指攜帶相應(yīng)行為的DOM元素  
  •   
  • ·合并事件  
  • hover(enter,leave):鼠標(biāo)移入執(zhí)行enter、移出事件執(zhí)行l(wèi)eave  
  • $("#myDiv").hover( function(){  
  •     $(this).css("border""1px solid black");0  
  • }, function(){  
  •     $(this).css("border""none");  
  • });  
  •   
  • toggle(fn1,fn2,...fnN):鼠標(biāo)每點(diǎn)擊一次,執(zhí)行一個函數(shù),直到最后一個后重復(fù)  
  • $("#myDiv").toggle( function(){  
  •     $(this).css("border""1px solid black");0  
  • }, function(){  
  •     $(this).css("border""none");  
  • });  
  •   
  • ·事件冒泡  
  • 下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分別將三種元素都注冊click事件。  
  • 那么,click事件會按照DOM的層次結(jié)構(gòu),像水泡一樣不斷向上直到頂端,所以稱之為事件冒泡。  
  • <body><div><span>我是SPAN我怕誰</span></div></body>  
  • $("span").bind("click"function(){ alert('span click'); });  
  • $("div").bind("click"function(){ alert('div click'); });  
  • $("body").bind("click"function(){ alert('body click'); });  
  •   
  • ·阻止冒泡  
  • 解決這個問題的辦法是:在SPAN執(zhí)行完click事件后,停止事件冒泡。  
  • $("span").bind("click"function(event){  
  •     alert('span click');  
  •     event.stopPropagation(); //停止冒泡  
  • });  
  •   
  • ·阻止默認(rèn)行為  
  • 提交按鈕在提交前做相應(yīng)的邏輯判斷,當(dāng)不滿足時  
  • $("#btnSubmit").bind("click"function(event){  
  •     event.preventDefault(); //阻止默認(rèn)行為 相當(dāng)于return false;  
  • });  
  •   
  • ·事件對象的屬性  
  • $("#myDiv").bind("click"function(event){ });  
  • event.type() //返回:click  
  • event.target() //獲取當(dāng)前元素  
  • event.relatedTarget() //引發(fā)事件的元素  
  • event.pageX()/event.pageY() //獲取鼠標(biāo)相對于頁面的X和Y坐標(biāo)  
  • event.which() //在單擊事件中獲取到對應(yīng)的按鍵 鼠標(biāo)左中右分別是123  
  • event.metaKey() //獲取操作中的相關(guān)功能鍵(ctrl/alt/shift)  
  •   
  • ·移除事件  
  • $("#myDiv").bind("click", fn1 = function(){  
  •     alert("function1");  
  • }).bind("click", fn2 = function(){  
  •     alert("function2");  
  • }).bind("click", fn3 = function(){  
  •     alert("function3");  
  • });  
  • $("#myDiv").unbind(); //移除id為myDiv的元素的所有事件  
  • $("#myDiv").unbind("click"); //移除id為myDiv的元素的所有click事件  
  • $("#myDiv").unbind("click",fn1); //移除id為myDiv的元素的名稱為fn1的click事件  
  •   
  • ·一次性事件:綁定的事件執(zhí)行一次后自動移除  
  • $("#myDiv").one("click", [data], function(){  
  •     alert("function1");  
  • });  
  •   
  • ·觸發(fā)事件  
  • $("#btn").trigger("click", [data]); //代碼方式觸發(fā)click事件  
  • $("#btn").click(); //另一種簡寫方式  
  •   
  • ·事件命名空間  
  • $("#myDiv").bind("click.hello"function(){  
  •     alert("function1");  
  • });  
  • $("#myDiv").bind("click"function(){  
  •     alert("function1");  
  • })  
  • $("div").unbind("click"); //兩個事件都被移除  
  • $("div").unbind(".hello"); //只移除第一個  
  • $("div").unbind("click!"); //只移除第二個(注意感嘆號,指沒有名字空間的)  
  •   
  • ·JQuery中的動畫  
  • $("div").hide(); //隱藏所有DIV元素,相當(dāng)于sytle="display:none"  
  • $("div").show(); //顯示所有DIV元素  
  •   
  • $("div").hide(1000); //一秒內(nèi)隱藏所有DIV元素,其它參數(shù)還有:slow(600) normal(400) fast(200)  
  • $("div").show(1000); //一秒內(nèi)顯示所有DIV元素  
  •   
  • $("div").fadeOut(); //降低元素的不透明度,直至消失(支持速度參數(shù),不會改變寬高)  
  • $("div").fadeIn(); //升高元素的不透明度,直至顯示  
  •   
  • $("div").slideUp(); //由下至上收縮元素,直至消失(支持速度參數(shù))  
  • $("div").slideDown(); //由上至下展開元素,直至顯示  
  •   
  • ·自定義動畫animate  
  • $(elem).animate(params, speed, callback);  
  • params:樣式屬性及值的映射 {protected:"value"protected:"value"}  
  • speed: 速度參數(shù)  
  • callback: 動畫完成后執(zhí)行函數(shù),可選  
  •   
  • $("#myDiv").animate({left:"500px"}, 2000); //兩秒內(nèi)ID為myDiv的元素移至左邊距500px的位置  
  • $("#myDiv").animate({left:"+=500px"}, 2000); //同上,支持累加、累減  
  • $("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上,多重動畫,同時執(zhí)行  
  •   
  • $("#myDiv").animate({opacity:"0.5"}, 1000) //先變成50%透明  
  •            .animate({top:"500px"}, 500) //移至離頂端500px  
  •            .animate({left:"500px"}, 500) //移至離左邊500px  
  •            .fadeOut(1000); //顯示出來 (四個動作為隊列,一步步執(zhí)行)  
  •   
  • $("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止動畫,參數(shù)為boolean  
  •   
  • $("#myDiv").is(":animate"//判斷元素是否在執(zhí)行動畫  
  •   
  • ·其它動畫  
  • $("#myDiv").toggle(); //顯示與隱藏元素  
  • $("#myDiv").slideToggle(); //展開與收縮元素  
  • $("#myDiv").fadeTo(1000, 0.2); //一秒內(nèi)將元素透明度調(diào)整到20%  
  •   
  •   
  • //-------------------- 第五章 JQuery對表單、表格的操作及更多應(yīng)用 ------------------------  
  •   
  • ·單選文本框應(yīng)用(獲得焦點(diǎn)時,加了個特殊的樣式,失去焦點(diǎn)時還原,兼容所有瀏覽器)  
  • $(":input").focus(function(){ this.addClass("inputFocus"); })  
  •            .blur(function(){ this.removeClass("inputFocus"); });  
  •   
  • ·多行文本框的應(yīng)用(放大、縮小多行文本框的高度,限制最大500px,兼容所有瀏覽器)  
  • var $txt = $("#textArea");  
  • $(".bigger").click(function(){  
  •     if( $txt.height() < 500) $txt.height( $txt.height() + 50 );  
  •     //if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );  
  • });  
  • $(".smaller").click(function(){  
  •     if( $txt.height() > 100) $txt.height( $txt.height() - 50 );  
  •     //if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );  
  • });  
  •   
  • ·復(fù)選框的應(yīng)用(實(shí)現(xiàn)全選、全不選、反選)  
  • $("#btnCheckedAll").click(function(){ //全選  
  •     $("[name=items]:checkbox").attr("checked"true);  
  • });  
  • $("#btnCheckedNone").click(function(){ //全不選  
  •     $("[name=items]:checkbox").attr("checked"false);  
  • });  
  • $("#btnCheckedRev").click(function(){ //反選  
  •     $("[name=items]:checkbox").each(function(){  
  •         $(this).attr("checked", !$(this).attr("checked"));  
  •         //this.checked = !this.checked;  
  •     }  
  • });  
  •   
  • ·下拉框的應(yīng)用(將一個下拉列表的選中項搬至另一個下拉列表)  
  • $("#btnAdd").click(function(){ //將選中選項搬過去  
  •     $("#mySelect1 option:selected").appendTo("#mySelect2");  
  • });  
  • $("#btnAddAll").click(function(){ //將全部選項搬過去  
  •     $("#mySelect1 option").appendTo("#mySelect2");  
  • });  
  • $("#mySelect1").dblclick(function()[ //雙擊項搬過去  
  •     $("#mySelect1 option:selected").appendTo("#mySelect2");  
  • }  
  •   
  • ·表單驗證  
  • <form>  
  •     <div>  
  •         <label>用戶名:</label>  
  •         <input type="text" id="txtUid" class="required" value="" />  
  •     </div>  
  • </form>  
  • $("form :input.required").each(function(){ //往每個class有required樣式的input元素后面添加*號  
  •     $(this).parent().append( $("<span class='star'>*</span>") );  
  • });  
  • $("form :input.required").blur(function(){ //失去焦點(diǎn)時驗證域  
  •     ifthis.value == "" ){  
  •         $(this).parent().append( $("<span class='error'>必填字段</span>") );  
  •     }  
  •     else{  
  •         $(this).parent().append( $("<span class='success'>驗證正確</span>") );  
  •         $(this).parent().find(".error").remove();  
  •     }  
  • }).keyup(function(){ //用戶每點(diǎn)一個鍵觸發(fā)  
  •     $(this).triggerHandler("blur");  
  • }).focus(function(){ //控制有焦點(diǎn)時觸發(fā)  
  •     $(this).triggerHandler("blur");  
  • });  
  • $("#btnSubmit").click(function(){  
  •     $("form :input.required").trigger("blur"); //讓所有需要驗證的域失去焦點(diǎn)  
  •     var errNum = $("form .error").length;  
  •     if( errNum ){  
  •         alert("有驗證字段失敗,請重新填寫");  
  •         return false;  
  •     }  
  • });  
  •   
  • ·表格應(yīng)用  
  • $("tr:odd").addClass("oddTr"); //給奇數(shù)行添加oddTr樣式  
  • $("tr:even").addClass("evenTr"); //給偶數(shù)行添加evenTr樣式  
  •   
  • $("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行,添加highlightTr樣式  
  •   
  • $("tr").click(function(){  
  •     $(this).addClass("selectedTr"//給當(dāng)前行添加選中樣式  
  •            .siblings().removeClass("selectedTr"//反選移除選中樣式  
  •            .end() //結(jié)束,返回$(this),否則則是反選的行  
  •            .find(':radio").attr("checked",true); //在當(dāng)前行查找單選框,選中它  
  • });  
  •   
  •   
  • //-------------------- 第六章 JQuery與Ajax的應(yīng)用 ------------------------  
  •   
  • ·load( url [,data] [,callback] )方法  
  • url:要請求的頁面的地址  
  • data:要發(fā)送的相關(guān)參數(shù)  
  • callback:回調(diào)函數(shù)  
  •   
  • $("#myDiv").load("hello.html"); //向myDiv元素加載hello.html的內(nèi)容  
  • $("#myDiv").load("hello.html .myClass"); //篩選,只加載hello.html中myClass樣式的內(nèi)容  
  •   
  • $("#myDiv").load("hello.html"function(){} ); //沒參數(shù)的,使用GET方式  
  • $("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); //有參數(shù)的,使用POST方式  
  •   
  • $("#myDiv").load("hello.html"function(responseText, textStatus, XMLHttpRequest){ //回調(diào)函數(shù)  
  •     //responseText : 請求返回的內(nèi)容  
  •     //textStatus : 請求狀態(tài) success error notmodified timeout  
  •     //XMLHttpRequest : Ajax對象  
  • });  
  •   
  • ·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法  
  • url:要請求的頁面的地址  
  • data:要發(fā)送的相關(guān)參數(shù)  
  • callback:回調(diào)函數(shù)  
  • type:指定服務(wù)器返回內(nèi)容的格式 xml html script json text _default  
  •   
  • $.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回調(diào)函數(shù)只有當(dāng)狀態(tài)是success才觸發(fā)  
  •     //data : 請求返回的內(nèi)容  
  •     //textStatus : 請求狀態(tài) success error notmodified timeout  
  •       
  •     //當(dāng)data是HTML時,直接加載  
  •     $("#myDiv").html(data);  
  •       
  •     //當(dāng)data是XML時,可篩選 <user id="123" name="dier" age="27" />  
  •     var age = $(data).find("user").attr("age");  
  •       
  •     //當(dāng)data是JSON時,可直接點(diǎn)出屬性來 {id:"123", name:"dier", age:"27"}  
  •     var age = data.age;  
  • });  
  •   
  • ·getScript(url [,callback])方法  
  • $(function(){ //動態(tài)加載JS腳本  
  •     $.getScript("test.js");  
  •       
  •     $.getScript("test.js"function(){ //回調(diào)函數(shù)  
  •         //do something..  
  •     });  
  • });  
  •   
  • ·getJSON(url [,callback])方法  
  • $(function(){ //動態(tài)加載JS腳本  
  •     $.getJSON("test.js");  
  •       
  •     $.getJSON("test.js"function(data){ //回調(diào)函數(shù)  
  •         //do something..  
  •         //data : 返回的數(shù)據(jù)  
  •         $.each( data, function(index, item){ //遍歷,相當(dāng)于foreach  
  •             //index : 索引  
  •             //item : 當(dāng)前項內(nèi)容  
  •             //return false; 退出循環(huán)  
  •         });  
  •     });  
  • });  
  •   
  • ·ajax(options)方法  
  • url : 請求的地址  
  • type : 請求的方式 GET POST 默認(rèn)為GET  
  • timeout : 請求超時時間(單位:毫秒)  
  • data : 請求時發(fā)送的參數(shù)(String,Object)  
  • dataType : 預(yù)期返回的數(shù)據(jù)類型 xml html script json jsonp text  
  • bdforeSend : 發(fā)送請求前觸發(fā)事件,如果return false則取消發(fā)送 function(XmlHttpRequest){}  
  • complete : 請求完成后觸發(fā)事件,不管成功與否 function(XmlHttpRequest, textStatus){}  
  • success : 請求完成并且成功時觸發(fā)事件 function(data, textStatus){}  
  • error : 請求完成并且失敗時觸發(fā)事件 function(XmlHttpRequest, textStatus, errorThrown){}  
  • global : 是否為全局請求,默認(rèn)為true,可使用AjaxStart、AjaxStop控制各種事件  
  •   
  • $.ajax({  
  •     url : "test.aspx",  
  •     type : "POST",  
  •     timeout : "3000",  
  •     data : {id:"123", name:"dier"},  
  •     dataType : "HTML",  
  •     success : function(data,textStatus){  
  •         $("#myDiv").html( data );  
  •     }  
  •     error : function(XmlHttpRequest, textStatus, errThrown){  
  •         $("#myDiv").html( "請求失?。? + errThrown );  
  •     }  
  • });  
  •   
  • ·序列化字符串 serialize()  
  • $.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){  
  •     //將form1整個表單中的所有域序列化成提交的參數(shù),支持自動編碼  
  • });  
  •   
  • ·序列化數(shù)組 serializeArray()  
  • var arr = $(":checkbox, :radio").serializeArray();  
  •   
  • ·對象序列化 param()  
  • var obj = {id:"123", name:"dier", age:"27"};  
  • var kv = $.param(obj); //id=123&name=dier&age=27  
  •   
  • ·JQuery中的全局Ajax事件  
  • ajaxStart(callback) //請求開始時觸發(fā)  
  • ajaxStop(callback) //請求結(jié)束時觸發(fā)  
  • ajaxComplete(callback) //請求完成時觸發(fā)  
  • ajaxSuccess(callback) //請求成功時觸發(fā)  
  • ajaxError(callback) //請求失敗時觸發(fā)  
  • ajaxSend(callback) //請求發(fā)送前觸發(fā)  
  •   
  • $("#loading").ajaxStart(function(){ //當(dāng)有AJAX請求時顯示,完成時隱藏  
  •         $(this).show();  
  •     }.ajaxStop(function(){  
  •         $(this).hide();  
  •     }  
  • ); 
    • 本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報。
      轉(zhuǎn)藏 分享 獻(xiàn)花(0

      0條評論

      發(fā)表

      請遵守用戶 評論公約

      類似文章 更多

      成人日韩在线播放视频| 不卡免费成人日韩精品| 亚洲综合一区二区三区在线| 欧美激情一区二区亚洲专区| 欧美整片精品日韩综合| 99秋霞在线观看视频| 肥白女人日韩中文视频| 国产精品免费视频久久| 精品少妇一区二区三区四区| 开心久久综合激情五月天| 厕所偷拍一区二区三区视频| 激情偷拍一区二区三区视频| 尹人大香蕉中文在线播放| 老司机精品一区二区三区| 亚洲av日韩av高潮无打码| 久久精品国产99国产免费| 中文字幕av诱惑一区二区| 日本一本不卡免费视频| 隔壁的日本人妻中文字幕版| 国产熟女一区二区三区四区| 久久天堂夜夜一本婷婷| 男人操女人下面国产剧情| 少妇被粗大进猛进出处故事| 男生和女生哪个更好色| 亚洲国产综合久久天堂| 少妇高潮呻吟浪语91| 麻豆一区二区三区精品视频| 少妇在线一区二区三区| 九九热这里只有免费精品| 中文字幕乱码免费人妻av| 国产剧情欧美日韩中文在线| 日本人妻熟女一区二区三区 | 亚洲高清中文字幕一区二区三区| 字幕日本欧美一区二区| 我想看亚洲一级黄色录像| 东京热一二三区在线免| 亚洲欧洲在线一区二区三区| 免费在线播放不卡视频| 日韩av亚洲一区二区三区| 国产精品免费自拍视频| 99一级特黄色性生活片|