濃縮都是精華-前端技術(shù)jquery幫助手冊(cè)

--jQuery使用手 ：jQuery是一prototype一樣優(yōu)秀js開(kāi)發(fā)庫(kù)類(lèi)cssXPath的支持，使我們寫(xiě)jsjs高手又想寫(xiě)出優(yōu)秀的js效果，jQuery可以幫你達(dá)到地址：Starterkit（<scriptlanguage="javascript" $("a").click(function(){ oworld!");jQueryDownloads（ <scriptlanguage="javascript" $("a").click(function(){ oworld!");上邊的效果是點(diǎn)擊文檔中所有a時(shí)將彈出框，$("a")是一個(gè)jQuery選擇器，$本身表示一個(gè)jQuery類(lèi)，所有$()是構(gòu)造一個(gè)jQuery對(duì)象，click()是這個(gè)對(duì)象的方法，同理在進(jìn)行下面內(nèi)容之前我還要說(shuō)明一點(diǎn)$("p")和$("#p")的區(qū)別,$("p")表示取所有p(<p></p>)的元素,$("#p")表示取id為"p"(<spanid="p"></span>)的元素.3:css操作6:event事件

一：部參數(shù)：expr：字符串，一個(gè)查詢(xún)表達(dá)式或一段html字符串未執(zhí)行jQuery<ahref="#"id="test"onClick="jq()"functionfunctionalert($("div>}運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，彈出框文字為two，即div下p元素的內(nèi)functionfunction }運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，向body中添加 說(shuō)明：限制jQuerydomxml文檔和windows對(duì)象參數(shù)：elem：通過(guò)jQuery對(duì)象壓縮的DOM元素未執(zhí)行jQuery<ahref="#"id="test"functionfunction).find("div>}運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，彈出框文字為two，即div下p元素的內(nèi)functionfunction }運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，背景色變成黑說(shuō)明：限制jQueryDOMelem：一組通過(guò)jQuery對(duì)象壓縮的DOM元素<form<input<form<inputtype="text"<inputtype="submit"name="Submit"value="提交<ahref="#"id="test"functionfunction$(form1.elements}運(yùn)行：當(dāng)點(diǎn)idtest的元素form1表單中的所有元素說(shuō)明 參數(shù)：fn(Function):當(dāng)文檔載入時(shí)執(zhí)行的函數(shù)！$($( 參數(shù)：obj(jQuery):要的jQuery對(duì)象<ahref="#"id="test"functionfunctionvarf=$("div");}運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，彈出框文字為two，即div下p元素的內(nèi)容參數(shù)：fn(Function):需要執(zhí)行的函數(shù)<img<img<img<img<ahref="#"id="test"functionfunctionthis.src="2.jpg";}說(shuō)明：減少匹配對(duì)象到一個(gè)單獨(dú)得dom參數(shù)：posNumber):0開(kāi)始<p>Thisisjust<p>Thisisjusta<p>Sois<ahref="#"id="test"functionjq(){functionjq(){}運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，alert框顯示：Soisthis，即第二個(gè)<p>的內(nèi)get()參數(shù)：get(Number):0開(kāi)始<p>Thisisjust<p>Thisisjusta<p>Sois<ahref="#"id="test"functionjq(){functionjq(){}運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，alert框顯示：Soisthis，即第二個(gè)<p>的內(nèi)容注意geteq的區(qū)別，eq返回的是jQuery對(duì)象，get返回的是所匹配的dom對(duì)象，所有取$("p").eq(1)對(duì)象的內(nèi)容用jQuery方法html()，而取$("p").get(1)的內(nèi)容用參數(shù)：objObject):<div<div<div<div<ahref="#"id="test"functionfunction.ge.ge}idtest <img<img<img<img<ahref="#"id="test"functionjq(){functionjq(){}運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，彈出alert框顯示2，表示找到兩個(gè)匹配對(duì)二：DOM操屬以<imgid="a"scr="5.jpg"/>為例，在原始的javascript里面可以用varo=.geementById('a')取的id為a的節(jié)點(diǎn)對(duì)象，在用o.src來(lái)取得或修改該節(jié)scr屬性，在jQuery里$("#a")將得到j(luò)Query對(duì)象imgid="ascr="5.jpg，然后可以用jQuery提供的很多方法來(lái)進(jìn)行操作，如$("#a").scr()將得到5.jpg,$("#a").scr("1.jpg")將該對(duì)象src屬性改為1,jpg。下面來(lái)講jQuery提供的眾多jQuery方法，方便大家快速對(duì)DOM對(duì)象進(jìn)行操作 jQuery對(duì)象屬性herf的操作。未執(zhí)行jQuery<a<ahref="1.htm"id="test"functionjq(){functionjq(){}運(yùn)行：先彈出框顯示id為test的連接url，在將其url改為2.html，當(dāng)彈出框后會(huì)看2.htmlherf()herf(val) html()html(val) id()id(val)name()name rel()rel(val) src title()title val()操<ahref="#"id="test"after(html)在匹配元<ahref="#"id="test"functionfunction }<a<ahref="#"id="test" after(elem)after(elems)將指定對(duì)象elem或?qū)ο蠼Melems到在匹配元素<p<pid="test">after</p><ahref="#"functionfunction}<a<ahref="#"onClick="jq()">jQuery</a><p<ahref="#"id="test"append(html)在匹配元素，且末入<ahref="#"id="test"functionfunction }<a<ahref="#" append(elem)append(elems)before(html)before(elem)appendTo(expr)append(elem)相<p<pid="test">after</p><ahref="#"functionfunction$("a").appendTo}<p<pid="test">after<ahref="#"onClick="jq()">jQuery</a><pid="test">after</p><ahref="#"clone()一個(gè)<pid="test">after</p><ahref="#"functionfunction}empty()刪除匹配對(duì)象的所有子<div<div<ahref="#"functionfunction}<div<divid="test"></div><ahref="#"insertAfter(expr)按照的解釋和幾個(gè)簡(jiǎn)單測(cè)試insertAfter(expr)相當(dāng)于before(elem),insertBefore(expr)after(elem)prepend(html)prepend(elem)prepend(elems)在匹配元素的且開(kāi)始append(elem)appendTo(expr)prepend<p<p執(zhí)行$("#a").append($("div"))<p<pid="a">執(zhí)行$("#a").appendTo($("div<p執(zhí)行$("#a").prepend($("div"))<p<premove()刪除匹配對(duì)注意區(qū)分wrap(htm)將匹配對(duì)象包含在給出的html<p>Test<p>TestParagraph.</p><ahref="#"functionfunction}<ahref="#"wrlem)將匹配對(duì)象包<ahref="#"functionfunction} ementById('content')<div<divid="content"><p>Test遍歷、組 o<ahref="#"add(expr)在原對(duì)象的基礎(chǔ)上在附加符合指定 o<ahref="#"functionfunctionvarfor(vari=0;i<}集合，分別是[<p>o</p>]，[<p><span>oAgain</span></p>]，[<span>oAgain</span>]。add(el)在匹配對(duì)象的基礎(chǔ)上在附加指定的dom oadd(els)在匹配對(duì)象的基礎(chǔ)上在附加指定的一組對(duì)象，els是一 ofunctionfunctionvar.ge.gefor(vari=0;i<}注意els是一個(gè)數(shù)組，這里的ancestors()一依次以匹配結(jié)點(diǎn)的父節(jié)點(diǎn)的內(nèi)容為對(duì)象,根節(jié)點(diǎn)除外（有點(diǎn)不好理解，看看functionvarfunctionvarf=for(vari=0;i<}第一個(gè)對(duì)象是以<u>的父節(jié)點(diǎn)的內(nèi)容為對(duì)象，u>two</u[<p>one</p><span><u>two</u></span>]ancestors(expr)ancestors（）的基礎(chǔ)上之取符合表達(dá)式的對(duì)varfvarf$("u").ancestors(“div”),[<p>one</p><span><u>two</u></span>children()返回匹配對(duì)象的<divfunctionjq(){}functionjq(){}$("#ch").children()得到對(duì)象<span>two</span>所以.html()的結(jié)果是<div<spanchildren(expr)返回匹配對(duì)象的點(diǎn)中符合<div<spanfunctionfunction}$("#ch").children()得到對(duì)象[<span>two</span><spanid="sp">three</span$("#ch").children(“#sp”)過(guò)濾得到[<spanid="sp">three</spanparentparentexpr)取匹配對(duì)象父節(jié)點(diǎn)的。參照children幫助contains(str)返回匹配對(duì)象中包含字符str<p>This<p>Thisisjustatest.</p><p>Soisfunctionjq(){functionjq(){}[<p>Thisisjustatest.</p>]end()結(jié)束操作,返回到匹配元 上操作前的狀態(tài) 過(guò)濾現(xiàn)實(shí)匹配符合表達(dá)式的對(duì)象exprs為數(shù)組，注意添“[ oAgain</p><pclass="selected">Andfunctionjq(){}functionjq(){}$("p")得到三個(gè)對(duì)象，$("p").contains("test")只返回class為selected的對(duì)象 o</p><p oAgain</p><pclass="selected">Andfind(expr)在匹配的對(duì)象中繼 o</p><p oAgain</p><pclass="selected">Andfunctionjq(){functionjq(){}在$("p")對(duì)象中查找id為a的對(duì) o</p><p oAgain</p><pclass="selected">Andis(expr)判斷對(duì)象是否符 o</p><p oAgain</p><pclass="selected">Andfunctionjq(){functionjq(){}在$("#ajquery大家可以用$("#a").is("div");("#a").is("#a") o</p><p oAgain</p><pclass="selected">Andnext()next(expr)返回匹 o</p><p oAgain</p><pclass="selected">Andfunctionfunction}$("p").next()返回[<pid="a">oAgain</p>,<pclass="selected">AndAgain</p>]兩個(gè)對(duì)象$("p").next(".selected)[<pclass="selected">AndAgain</pprev()prev(expr)next理no)not(expr)從jQuery對(duì)象中移出匹配的對(duì)象，el為dom元素，expr<ahref="#"<ahref="#"functionfunction.ge}$("p")由兩個(gè)對(duì)象，排除后的對(duì)象為[<p>one</p>siblings()siblings(expr)jquery匹配對(duì)象中其它兄弟級(jí)別的對(duì)<p<ahref="#"functionfunction}$("div").siblings()的結(jié)果實(shí)返回兩個(gè)對(duì)象[<p>one</p>，<ahref="#"onclick="js()">jQuery</a>]alert($("div").siblings(“a”)返回一個(gè)對(duì)象[<ahref="onclick="js()">jQuery</a其 為匹配對(duì)象添加一個(gè)class樣removeClass 將第一個(gè)匹配對(duì)象的某個(gè)class樣式移<imgsrc="test.jpg"/><ahref="#"attr 獲取第一個(gè)<imgsrc="test.jpg"/><ahref="#"functionjs(){functionjs(){}attr(prop)為第一個(gè)匹配對(duì)象的設(shè)置屬性，prophash對(duì)象<img/><a<img/><ahref="#"functionfunction$("img").attr({src:"test.jpg",alt:"TestImage"}運(yùn)行結(jié)果相當(dāng)于<imgsrc="test.jpgalt="Testattr(key,value)為第一個(gè)匹配對(duì)象的設(shè)置屬性，key為屬性名，value為屬性<img/><a<img/><ahref="#"functionfunction}運(yùn)行結(jié)果相當(dāng)于<img<imgalt="test"/><ahref="#"removeAttr 將第一個(gè)匹配對(duì)象的<imgalt="test"/><ahref="#"functionfunction$("img").}運(yùn)行結(jié)果相當(dāng)于<img o</p><p oAgain</p><ahref="#"toggleClass(class) o</p><p oAgain</p><ahref="#"$("p")的結(jié)果是返回對(duì)象[<p>o</p>,<pclass="selected">oAgain</p>$("p").toggleClass("selected")的結(jié)果是實(shí)返回對(duì)象[<pclass="selected"><p>oAgain</p>三：CSS操javascriptcss的操作相當(dāng)繁瑣，比如<divstyle="background:blue">css</div>取它的background語(yǔ)法.geementById("a").style.background，而jQuery對(duì)css更方便的操作$("#a")得到j(luò)Query對(duì)象<divid="a/div$("#a").background(“red”)將該對(duì)象的background樣式設(shè)為redjQuery提供了以下方法，cssbackground()background(val) css(key,value) float()float(val)height()height(val)width()width(val)left() overflow()overflow(val)position()position(val)top()css(name)css(name)獲取樣式名為name")css(prop)prophash對(duì)象，用于設(shè)置大量的css樣$("#b").css({color:"red",background:"blue"最終效果是<pid="bstyle="background:bluecolor:red">test</pcolor:red",background:"blue"}，hash對(duì)象，colorkey，"red"value，css(keyvalue)用于設(shè)置一個(gè)單獨(dú)得css樣$("#b").css("color","red");最終效果是<pid="b四：JavaScript處if($.browser.msie){elseif($.browser.opera){alert("這是一個(gè)if($.browser.msie){elseif($.browser.opera){alert("這是一個(gè)opera瀏覽器當(dāng)頁(yè)面載入式判斷瀏覽器類(lèi)型，可判斷的類(lèi)型有msie、mozilla、opera、$.each([0,1,2],function(i){alert("Item#"+i+":"+this);$.each(objfn)$.each([0,1,2],function(i){alert("Item#"+i+":"+this);分別將0，1，2為參數(shù)，傳入到function(i)$.each({$.each({name:"John",lang:"JS"},function(i){alert("Name:"+i+",Value:"+thisvarsettings={validate:false,limit:5,varsettings={validate:false,limit:5,name:"foo"};varoptions={validate:true,name:"bar"};$.extend(settings,執(zhí)行后settings對(duì)象為validate:true,limit:5name:"barvarvarsettings={validate:false,limit:5,name:"foo"};varoptions={validate:true,name:"bar"};$.extend(settings,$.each(settings,function(i){alert(i+"="+this);vararr=$.grep([0,1,2,3,4],function(i){returni>2;$.each(arr,function(i){alert(i);vararr=$.grep([0,1,2,3,4],function(i){returni>2;$.each(arr,function(i){alert(i);vararr=$.merge([0,1,2],[2,3,4]$.each(arr,function(i){alert(i);$.merge(,second)兩個(gè)參數(shù)都是數(shù)組，排出vararr=$.merge([0,1,2],[2,3,4]$.each(arr,function(i){alert(i);$.trim(str)移出字符串兩端的空 o,howare ")的結(jié)果是"o,howare五：動(dòng)態(tài)效javascript做法是先用ge ementById取出子菜單所在容器的id，在判斷該容器的style.display是否等于none，如果等于則設(shè)為block,如果不等于這設(shè)為none，如果在將效現(xiàn)下來(lái)需要編寫(xiě)很多代碼，如果js基礎(chǔ)不好的朋友可能只能從別人寫(xiě)好的代碼拿過(guò)來(lái)修改了jQuery實(shí)現(xiàn)上面效果只需要1句話(huà)就行，$("#a").toggle("slow"),,學(xué)完jQuery后還需要修改別人的代碼嗎？下面逐個(gè)介紹jQuery用于效果處理的方法。<p oAgain</p><ahref="#"<p oAgain</p><ahref="#"onClick=’當(dāng)點(diǎn)擊連接時(shí),ida的對(duì)象的display變?yōu)閚oneshow()顯示匹配對(duì)hide(speed)以一定的速度隱藏匹配對(duì)象，其大?。ㄩL(zhǎng)寬）和都逐漸變化到3級(jí)("slow",normal","fast")，也可以是自定義的速度show(speed)以一定的速度顯示匹配對(duì)象，其大?。ㄩL(zhǎng)寬）和都由0逐漸變化到正hide(speedcallback)show(speedcallback)當(dāng)顯示和隱藏變化結(jié)束后執(zhí)行函數(shù) toggle(speed)如果當(dāng)前匹配對(duì)象隱藏，則顯示他們，如果當(dāng)前是顯示的，就隱toggle(speed),其大?。ㄩL(zhǎng)寬）和都隨之逐漸變化<img<imgsrc="1.jpg"<ahref="#"fadeIn(speeds)fadeOut(speeds)根據(jù)速度調(diào)整來(lái)顯示或隱藏匹配對(duì)象，注意有別hide(speed)和show(speed)，fadeIn和fadeOut都只調(diào)整，不調(diào)整大<img<imgsrc="1.jpg"style="display:none"/><ahref="#"onClick='$("img").fadeIn("slow")'>jQuery<img<ahref="#"onClick='$("img").fadeIn("slow",function(){alert("AnimationDone.");})'>jQueryfadeIn(speed,callback)fadeOut(speed,callback) 示或<img<ahref="#"onClick='$("img").fadeIn("slow",function(){alert("AnimationDone.");})'>jQuery<img<ahref="#"onClick='$("img").fadeTo("slow",0.55,function(){alert("AnimationDone.");})'>jQueryfadeTo(speed,opacity,callback)將匹配對(duì)象以speed速度調(diào)整倒opacity，<img<ahref="#"onClick='$("img").fadeTo("slow",0.55,function(){alert("AnimationDone.");})'>jQuery大家可以看一下自己看看效果，如果不用jQuery，編寫(xiě)原始javascript可能很多代碼slideDown(speeds)將匹配對(duì)象的高度由0以指定速率平滑的變化到正<img<imgsrc="1.jpg"<ahref="#"onClick='$("imgslideDown(speeds,callback)將匹配對(duì)象的高度由0變化到正常！變化結(jié)束后執(zhí)行函slideUp("slow")slideUp(speedcallback)匹配對(duì)象的高度由正常變化到slideToggle("slow")如果匹配對(duì)象的高度正常則逐漸變化到0，若為0，則逐漸變化到六：事件處hover(Function, 當(dāng)鼠標(biāo)moveover時(shí)觸發(fā)第一個(gè)function當(dāng)鼠標(biāo)move時(shí)觸發(fā)第二個(gè)function(){Htmlfunction(){最終效果是當(dāng)鼠標(biāo)ida的層上時(shí)圖層增加一red樣式，離開(kāi)red樣toggle(Function,Function) Html代碼：<divid="a">sdf</div>$("#a").toggle$("#a").togglefunction(){最終效果是當(dāng)鼠標(biāo)ida的層上時(shí)圖層增加一red樣式，離開(kāi)red樣bind(type,fn) 還有：unbind()unbind(type) unbind(type,fn)$("#a").bind("click",function()Dynamicevent(Function) $("#a").bind("click",function()最終效果是當(dāng)鼠標(biāo)點(diǎn)擊id為a的層上時(shí)圖層增加一個(gè)red樣式j(luò)Query提供的函數(shù)browers form事 keyboard事 mouse事 mousedown(fn)mousemove(fn)mouseout(fn)mouseover(fn) UI事 5舉例，click(fn)click()unclick()oneclick(fn)unclick(fn)click()click事件。unclick()：不執(zhí)行匹配對(duì)象的click事件。oneclick(fn)click事件。unclickfn)：增加一個(gè)點(diǎn)擊時(shí)不觸發(fā)某函數(shù)的事件。上面列舉的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法擴(kuò)展七：Ajax支 通過(guò)一個(gè)ajax請(qǐng)求，回去數(shù)據(jù)，prop是一個(gè)hash表，它可以傳遞的key/value有以下幾種((String)url：數(shù)據(jù)請(qǐng)求頁(yè)面的url((String)data：傳遞數(shù)據(jù)的參數(shù)字符串，只適合post方((String)dataType：期待數(shù)據(jù)返回的數(shù)據(jù)格式("xmlhtml",script",或((Boolean)ifModified

((Boolean)globalajax全局事件，默認(rèn)為true$.ajax({url:"ajax.htm",$.ajax({url:"ajax.htm", }ajax.htm返回的ida的div內(nèi)$.ajax({$.ajax({url:data:"name=John&location=Boston", }用get方式向ajax.aspx頁(yè)面?zhèn)鲄?shù)，并將返回內(nèi)容負(fù)給i