版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領
文檔簡介
從零開始學習jQuery系列
從零開始學習jQuery(一)開天辟地入門篇一.摘要本系列文章將帶您進入jQuery的精彩世界,其中有很多作者具體的使用經(jīng)驗和解決方案,即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.本篇文章是入門第一篇,主要是簡單介紹jQuery,通過簡單示例指導大家如何編寫jQuery代碼以及搭建開發(fā)環(huán)境.詳細講解了如何在VisualStudio中配合使用jQuery.轉載請注明子秋出品!博客園首發(fā)!二.前言首先道個歉!"從零開始學習ASP.NETMVC"系列文章在即將介紹Filter時就沒有更新了,原因就是最近我一直在研究和學習jQuery.看到本系列的名稱和文章標題,看過我的MVC系列文章的人會感到很熟悉.不久要給公司的人做培訓,所以特意制作了本教程.在寫作的同時我參考了網(wǎng)上jQuery的系列教程文章,在博客園和Google上并沒有找到讓我滿意的系列教程.我喜歡將知識系統(tǒng)的,深入淺出的講解.不喜歡寫那種"學習筆記"式的文章.同時本系列將很快全部寫完(有工作壓力就是有動力),隨后如果時間允許我會繼續(xù)更新MVC系列文章.再一次對等待MVC文章的朋友們說聲抱歉!另外本系列文章的大部分知識點來源于圖靈出版社的"jQuery實戰(zhàn)"一書.推薦大家購買此書,是jQuery書籍中的經(jīng)典之作.下面讓我們開始jQuery之旅.三.什么是jQueryjQuery是一套Javascript腳本庫.在我的博客中可以找到"Javascript輕量級腳本庫"系列文章.Javascript腳本庫類似于.NET的類庫,我們將一些工具方法或對象方法封裝在類庫中,方便用戶使用.注意jQuery是腳本庫,而不是腳本框架."庫"不等于"框架",比如"System程序集"是類庫,而"ASP.NETMVC"是框架.jQuery并不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事.腳本庫能夠幫助我們完成編碼邏輯,實現(xiàn)業(yè)務功能.使用jQuery將極大的提高編寫javascript代碼的效率,讓寫出來的代碼更加優(yōu)雅,更加健壯.同時網(wǎng)絡上豐富的jQuery插件也讓我們的工作變成了"有了jQuery,天天喝茶水"--因為我們已經(jīng)站在巨人的肩膀上了.創(chuàng)建一個ASP.NETMVC項目時,會發(fā)現(xiàn)已經(jīng)自動引入了jQuery類庫.jQuery幾乎是微軟的御用腳本庫了!完美的集成度和智能感知的支持,讓.NET和jQuery天衣無縫結合在一起!所以用.NET就要選用jQuery而非Dojo,ExtJS等.jQuery有如下特點:1.提供了強大的功能函數(shù)使用這些功能函數(shù),能夠幫助我們快速完成各種功能,而且會讓我們的代碼異常簡潔.2.解決瀏覽器兼容性問題javascript腳本在不同瀏覽器的兼容性一直是Web開發(fā)人員的噩夢,常常一個頁面在IE7,Firefox下運行正常,在IE6下就出現(xiàn)莫名其妙的問題.針對不同的瀏覽器編寫不同的腳本是一件痛苦的事情.有了jQuery我們將從這個噩夢中醒來,比如在jQuery中的Event事件對象已經(jīng)被格式化成所有瀏覽器通用的,從前要根據(jù)event獲取事件觸發(fā)者,在ie下是event.srcElements而ff等標準瀏覽器下下是event.target.jQuery則通過統(tǒng)一event對象,讓我們可以在所有瀏覽器中使用event.target獲取事件對象.3.實現(xiàn)豐富的UIjQuery可以實現(xiàn)比如漸變彈出,圖層移動等動畫效果,讓我們獲得更好的用戶體驗.單以漸變效果為例,從前我自己寫了一個可以兼容ie和ff的漸變動畫,使用大量javascript代碼實現(xiàn),費心費力不說,寫完后沒有太多幫助過一段時間就忘記了.再開發(fā)類似的功能還要再次費心費力.如今使用jQuery就可以幫助我們快速完成此類應用.4.糾正錯誤的腳本知識這一條是我提出的,原因就是大部分開發(fā)人員對于javascript存在錯誤的認識.比如在頁面中編寫加載時即執(zhí)行的操作DOM的語句,在HTML元素或者document對象上直接添加"onclick"屬性,不知道onclick其實是一個匿名函數(shù)等等.擁有這些錯誤腳本知識的技術人員也能完成所有的開發(fā)工作,但是這樣的程序是不健壯的.比如"在頁面中編寫加載時即執(zhí)行的操作DOM的語句",當頁面代碼很小用戶加載很快時沒有問題,當頁面加載稍慢時就會出現(xiàn)瀏覽器"終止操作"的錯誤.jQuery提供了很多簡便的方法幫助我們解決這些問題,一旦使用jQuery你就將糾正這些錯誤的知識--因為我們都是用標準的正確的jQuery腳本編寫方法!5.太多了!等待我們一一去發(fā)現(xiàn).四.HelloWorldjQuery按照慣例,我們來編寫jQuery的HelloWorld程序,來邁出使用jQuery的第一步.在本文最后可以下本章的完整源代碼.1.下載jQuery類庫jQuery的項目下載放在了GoogleCode上,下載地址:上面的地址是總下載列表,里面有很多版本和類型的jQuery庫,主要分為如下幾類:min:壓縮后的jQuery類庫,在正式環(huán)境上使用.如:vsdoc:在VisualStudio中需要引入此版本的jquery類庫才能啟用智能感知.如：release包:里面有沒有壓縮的jquery代碼,以及文檔和示例程序.如:2.編寫程序創(chuàng)建一個HTML頁面,引入jQuery類庫并且編寫如下代碼:<!
1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/1999/xhtml">
<head>
<title>HelloWorldjQuery!</title>
<scripttype="text/javascript"src="scripts/jquery-1.3.2-vsdoc2.js"></script>
</head>
<body>
<divid="divMsg">HelloWorld!</div>
<inputid="btnShow"type="button"value="顯示"/>
<inputid="btnHide"type="button"value="隱藏"/><br/>
<inputid="btnChange"type="button"value="修改內(nèi)容為HelloWorld,too!"/>
<scripttype="text/javascript">
$("#btnShow").bind("click",function(event){$("#divMsg").show();});
$("#btnHide").bind("click",function(event){$("#divMsg").hide();});
$("#btnChange").bind("click",function(event){$("#divMsg").html("HelloWorld,too!");});
</script>
</body>
</html>效果如下:頁面上有三個按鈕,分別用來控制HelloWorld的顯示,隱藏和修改其內(nèi)容.此示例使用了:(1)jQuery的Id選擇器:$("#btnShow")(2)事件綁定函數(shù)bind()(3)顯示和隱藏函數(shù).show()和hide()(4)修改元素內(nèi)部html的函數(shù)html()在接下來的教程中我們將深入這些內(nèi)容的學習.五.啟用VisualStudio對jQuery的智能感知首先看一下VisualStudio帶給我們的智能感知驚喜.要讓VisualStudio支持智能感知,需要下列條件:安裝VS2008SP1
下載地址:安裝VS2008PatchKB958502以支持"-vsdoc.js"Intellisense文件.
該補丁會導致VisualStudio在一個JavaScript庫被引用時，查找是否存在一個可選的"-vsdoc.js"文件，如果存在的話，就用它來驅動JavaScriptintellisense引擎。這些加了注釋的"-vsdoc.js"文件可以包含對JavaScript方法提供了幫助文檔的XML注釋，以及對無法自動推斷出的動態(tài)JavaScript簽名的另外的代碼intellisense提示。你可以在"這里"了解該補丁的詳情。你可以在"這里"免費下載該補丁。必須要引用vsdoc版本的jquery庫
<scripttype="text/javascript"src="scripts/jquery-1.3.2-vsdoc2.js">script>在編寫腳本的時候,甚至剛剛輸入"$"的時候,VS可以智能提示:在使用方法時,還會有更多的提示:有了智能感知我們編寫javascript變得和C#一樣快速,便捷,舒服.大部分情況可以一次編寫成功而不用再為了一個大小寫而查詢javascript幫助文件.能夠讓VisualStudio對jQuery實現(xiàn)智能感知的前提是要引入vsdoc版本的jQuery類庫.示例中我們引入了"jquery-1.3.2-vsdoc2.js"文件.如果引用其他版本比如min版本的jQuery類庫就無法啟用智能提示.但是在正式環(huán)境下,我們必須要使用"min"版本的jquery庫文件,以1.3.2版本號為例,各個版本的大小如下:其中第一個是未壓縮的jquery庫.如果啟用gzip壓縮并且使用min版本的jquery.js可以在傳輸過程中壓縮到19KB.注意,如果我們更新了腳本,可以通過"Ctrl+Shift+J"快捷方式更新VisualStudio的智能感知,或者單擊編輯->IntelliSense->更新JScriptIntellisense:為了即能在VisualStudio中增加腳本提示,又能在上線的時候使用min版本的腳本庫,我們一般是用如下方式引入jQuery庫:1.控制編譯結果<scripttype="text/javascript"src="scripts/jquery-1.2.6.min.js"></script>
<%if(false)
{%>
<scripttype="text/javascript"src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<%}%>這是網(wǎng)上推薦的方式.編譯后的頁面上只有min版本的引用,同時在開發(fā)時能夠享受到智能感知.但是注意這種方式引用的min類庫只能是1.2.6或者之前的版本號.最新的1.3.2的所有非vsdoc版本的jquery庫引用后都會導致JScriptIntellisense更新出錯.這是1.3.2版本的一個bug,期待后續(xù)版本中解決.其實大家完全可以使用1.2.6版本的min庫,本教程涉及的jquery功能,1.2.6版本基本都支持.我們使用了if(false)讓編譯后的頁面不包含vsdoc版本jquery庫的引用,同樣的思路還可以使用比如將腳本引用放入一個PlaceHolder并設置visible=fasle等.2.使用后端變量為了能使用1.3.2版本的min庫,我們只能通過將腳本引用放在變量里,通過頁面輸出的方式,此種方式可以正常更新JScriptIntellisense.但是可能有人和我一樣不喜歡在前端使用變量:<asp:PlaceHolderVisible="false"runat="server">
<scripttype="text/javascript"src="scripts/jquery-1.3.2-vsdoc2.js"></script>
</asp:PlaceHolder>
<%=jQueryScriptBlock%>后臺聲明變量:protectedstringjQueryScriptBlock=@"<scripttype=""text/javascript""src=""scripts/jquery-1.3.2.
min.js""></script>";六.在獨立的.JS文件中啟用腳本智能感知
上面我們解決了在頁面中智能感知的問題,其實在獨立的.js文件中我們同樣可以啟用腳本的智能感知,在IntellisenseDemo.js文件中,添加如下語句:///<referencepath="jquery-1.3.2-vsdoc2.js"/>更新JScriptIntellisense,會發(fā)現(xiàn)在腳本中也啟用了智能提示:
注意,本文中講解的腳本智能感知不僅適用于jQuery類庫,還適用于自己編寫的javascript代碼.
七.總結
本文簡單介紹了jQuery,以及如何搭建腳本開發(fā)環(huán)境.示例程序沒有復雜的功能,可能還無法讓沒有接觸過jQuery的人認識到它的強大.但是僅憑借"多瀏覽器支持"這一特性,就足以讓我們學習并使用jQuery,因為如今想編寫跨瀏覽器的腳本真的是一件困難的事情!
在后續(xù)文章中我們將深入學習jQuery選擇器,事件,工具函數(shù),動畫,以及插件等.從零開始學習jQuery(二)萬能的選擇器一.摘要本章講解jQuery最重要的選擇器部分的知識.有了jQuery的選擇器我們幾乎可以獲取頁面上任意的一個或一組對象,可以明顯減輕開發(fā)人員的工作量.二.前言編寫任何javascript程序我們要首先獲得對象,jQuery選擇器能徹底改變我們平時獲取對象的方式,可以獲取幾乎任何語意的對象,比如"擁有title屬性并且值中包含test的元素",完成這些工作只需要編寫一個jQuery選擇器字符串.學習jQuery選擇器是學習jQuery最重要的一步.三.Dom對象和jQuery包裝集無論是在寫程序還是看API文檔,我們要時刻注意區(qū)分Dom對象和jQuery包裝集.1.Dom對象在傳統(tǒng)的javascript開發(fā)中,我們都是首先獲取Dom對象,比如:我們經(jīng)常使用document.getElementById方法根據(jù)id獲取單個Dom對象,或者使用document.getElementsByTagName方法根據(jù)HTML標簽名稱獲取Dom對象集合.另外在事件函數(shù)中,可以通過在方法函數(shù)中使用this引用事件觸發(fā)對象(但是在多播事件函數(shù)中IE6存在問題),或者使用event對象的target(FF)或srcElement(iIE6)獲取到引發(fā)事件的Dom對象注意我們這里獲取到的都是Dom對象,Dom對象也有不同的類型比如input,div,span等.Dom對象只有有限的屬性和方法:2.jQuery包裝集jQuery包裝集可以說是Dom對象的擴充.在jQuery的世界中將所有的對象,無論是一個還是一組,都封裝成一個jQuery包裝集,比如獲取包含一個元素的jQuery包裝集:varjQueryObject=$("#testDiv");
jQuery包裝集都是作為一個對象一起調(diào)用的.jQuery包裝集擁有豐富的屬性和方法,這些都是jQuery特有的:3.Dom對象與jQuery對象的轉換(1)Dom轉jQuery包裝集如果要使用jQuery提供的函數(shù),就要首先構造jQuery包裝集.我們可以使用本文即將介紹的jQuery選擇器直接構造jQuery包裝集,比如:$("#testDiv");上面語句構造的包裝集只含有一個id是testDiv的元素.或者我們已經(jīng)獲取了一個Dom元素,比如:vardiv=document.getElementById("testDiv");上面的代碼中div是一個Dom元素,我們可以將Dom元素轉換成jQuery包裝集:vardomToJQueryObject=$(div);小竅門:因為有了智能感知,所以我們可以通過智能感知的方法列表來判斷一個對象啊是Dom對象還是jQuery包裝集.(2)jQuery包裝集轉Dom對象jQuery包裝集是一個集合,所以我們可以通過索引器訪問其中的某一個元素:vardomObject=$("#testDiv")[0];注意,通過索引器返回的不再是jQuery包裝集,而是一個Dom對象!jQuery包裝集的某些遍歷方法,比如each()中,可以傳遞遍歷函數(shù),在遍歷函數(shù)中的this也是Dom元素,比如:$("#testDiv").each(function(){alert(this)})如果我們要使用jQuery的方法操作Dom對象,怎么辦?用上面介紹過的轉換方法即可:$("#testDiv").each(function(){$(this).html("修改內(nèi)容")})小結:先讓大家明確Dom對象和jQuery包裝集的概念,將極大的加快我們的學習速度.我在學習jQuery的過程中就花了很長時間沒有領悟到兩者的具體差異,因為書上并沒有專門講解兩者的區(qū)別,所以經(jīng)常被"this指針為何不能調(diào)用jQuery方法"等問題迷惑.直到某一天豁然開朗,發(fā)現(xiàn)只要能夠區(qū)分這兩者,就能夠在寫程序時變得清清楚楚.四.什么是jQuery選擇器在Dom編程中我們只能使用有限的函數(shù)根據(jù)id或者TagName獲取Dom對象.在jQuery中則完全不同,jQuery提供了異常強大的選擇器用來幫助我們獲取頁面上的對象,并且將對象以jQuery包裝集的形式返回.首先來看看什么是選擇器://根據(jù)ID獲取jQuery包裝集
varjQueryObject=$("#testDiv");上例中使用了ID選擇器,選取id為testDiv的Dom對象并將它放入jQuery包裝集,最后以jQuery包裝集的形式返回."$"符號在jQuery中代表對jQuery對象的引用,"jQuery"是核心對象,其中包含下列方法:jQuery(expression,context)
Returns:jQuery這個函數(shù)接收一個CSS選擇器的字符串，然后用這個字符串去匹配一組元素。ThisfunctionacceptsastringcontainingaCSSselectorwhichisthenusedtomatchasetofelements.jQuery(html,ownerDocument)
Returns:jQuery根據(jù)HTML原始字符串動態(tài)創(chuàng)建Dom元素.CreateDOMelementson-the-flyfromtheprovidedStringofrawHTML.jQuery(elements)
Returns:jQuery將一個或多個Dom對象封裝jQuery函數(shù)功能(即封裝為jQuery包裝集)WrapjQueryfunctionalityaroundasingleormultipleDOMElement(s).jQuery(callback)
Returns:jQuery$(document).ready()的簡寫方式Ashorthandfor$(document).ready().
上面摘選自jQuery官方手冊.Returns的類型為jQuery即表示返回的是jQuery包裝集.其中第一個方法有些問題,官方接口寫的是CSS選擇器,但是實際上這個方法不僅僅支持CSS選擇器,而是所有jQuery支持的選擇器,有些甚至是jQuery自定義的選擇器(在CSS標準中不存在的選擇器).為了能讓大家理解的更清楚,我將方法修改如下:jQuery(selector,context)
Returns:jQuery包裝集根據(jù)選擇器選取匹配的對象,以jQuery包裝集的形式返回.context可以是Dom對象集合或jQuery包裝集,傳入則表示要從context中選擇匹配的對象,不傳入則表示范圍為文檔對象(即頁面全部對象).上面這個方法就是我們選擇器使用的核心方法.可以用"$"代替jQuery讓語法更簡介,比如下面兩句話的效果相同://根據(jù)ID獲取jQuery包裝集
varjQueryObject=$("#testDiv");
//$是jQuery對象的引用:
varjQueryObject=jQuery("#testDiv");接下來讓我們系統(tǒng)的學習jQuery選擇器.五.jQuery選擇器全解通俗的講,Selector選擇器就是"一個表示特殊語意的字符串".只要把選擇器字符串傳入上面的方法中就能夠選擇不同的Dom對象并且以jQuery包裝集的形式返回.但是如何將jQuery選擇器分類讓我犯難.因為書上的分類和jQuery官方的分類截然不同.最后我決定以實用為主,暫時不去了解CSS3選擇器標準,而按照jQuery官方的分類進行講解.jQuery的選擇器支持CSS3選擇器標準.下面是W3C最新的CSS3選擇器標準:標準中的選擇器都可以在jQuery中使用.jQuery選擇器按照功能主要分為"選擇"和"過濾".并且是配合使用的.可以同時使用組合成一個選擇器字符串.主要的區(qū)別是"過濾"作用的選擇器是指定條件從前面匹配的內(nèi)容中篩選,"過濾"選擇器也可以單獨使用,表示從全部"*"中篩選.比如:$(":[title]")等同于:$("*:[title]")而"選擇"功能的選擇器則不會有默認的范圍,因為作用是"選擇"而不是"過濾".下面的選擇器分類中,帶有"過濾器"的分類表示是"過濾"選擇器,否則就是"選擇"功能的選擇器.jQuery選擇器分為如下幾類:[說明]
1.點擊"名稱"會跳轉到此方法的jQuery官方說明文檔.
2.可以在下節(jié)中的jQuery選擇器實驗室測試各種選擇器1.基礎選擇器Basics名稱說明舉例#id根據(jù)元素Id選擇$("divId")選擇ID為divId的元素element根據(jù)元素的名稱選擇,$("a")選擇所有.class根據(jù)元素的css類選擇$(".bgRed")選擇所用CSS類為bgRed的元素*選擇所有元素$("*")選擇頁面所有元素selector1,
selector2,
selectorN可以將幾個選擇器用","分隔開然后再拼成一個選擇器字符串.會同時選中這幾個選擇器匹配的內(nèi)容.$("#divId,a,.bgRed")[學習建議]:大家暫時記住基礎選擇器即可,可以直接跳到下一節(jié)"jQuery選擇器實驗室"進行動手練習,以后再回來慢慢學習全部的選擇器,或者用到的時候再回來查詢.2.層次選擇器Hierarchy名稱說明舉例ancestordescendant使用"forminput"的形式選中form中的所有input元素.即ancestor(祖先)為from,descendant(子孫)為input.$(".bgReddiv")選擇CSS類為bgRed的元素中的所有元素.parent>child選擇parent的直接子節(jié)點child.child必須包含在parent中并且父類是parent元素.$(".myList>li")選擇CSS類為myList元素中的直接子節(jié)點對象.prev+nextprev和next是兩個同級別的元素.選中在prev元素后面的next元素.$("#hibiscus+img")選在id為hibiscus元素后面的img對象.prev~siblings選擇prev后面的根據(jù)siblings過濾的元素
注:siblings是過濾器$("#someDiv~[title]")選擇id為someDiv的對象后面所有帶有title屬性的元素3.基本過濾器BasicFilters名稱說明舉例:first匹配找到的第一個元素查找表格的第一行:$("tr:first"):last匹配找到的最后一個元素查找表格的最后一行:$("tr:last"):not(selector)去除所有與給定選擇器匹配的元素查找所有未選中的input元素:$("input:not(:checked)"):even匹配所有索引值為偶數(shù)的元素，從0開始計數(shù)查找表格的1、3、5...行:$("tr:even"):odd匹配所有索引值為奇數(shù)的元素，從0開始計數(shù)查找表格的2、4、6行:$("tr:odd"):eq(index)匹配一個給定索引值的元素
注:index從0開始計數(shù)查找第二行:$("tr:eq(1)"):gt(index)匹配所有大于給定索引值的元素
注:index從0開始計數(shù)查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)"):lt(index)選擇結果集中索引小于N的elements
注:index從0開始計數(shù)查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)"):header選擇所有h1,h2,h3一類的header標簽.給頁面內(nèi)所有標題加上背景色:$(":header").css("background","#EEE");:animated匹配所有正在執(zhí)行動畫效果的元素只有對不在執(zhí)行動畫效果的元素執(zhí)行一個動畫特效:$("#run").click(function(){
$("div:not(:animated)").animate({left:"+=20"},1000);
});4.內(nèi)容過濾器ContentFilters名稱說明舉例:contains(text)匹配包含給定文本的元素查找所有包含"John"的div元素:$("div:contains('John')"):empty匹配所有不包含子元素或者文本的空元素查找所有不包含子元素或者文本的空元素:$("td:empty"):has(selector)匹配含有選擇器所匹配的元素的元素給所有包含p元素的div元素添加一個text類:$("div:has(p)").addClass("test");:parent匹配含有子元素或者文本的元素查找所有含有子元素或者文本的td元素:$("td:parent")5.可見性過濾器VisibilityFilters名稱說明舉例:hidden匹配所有的不可見元素注:在1.3.2版本中,hidden匹配自身或者父類在文檔中不占用空間的元素.如果使用CSSvisibility屬性讓其不顯示但是占位,則不輸入hidden.查找所有不可見的tr元素:$("tr:hidden"):visible匹配所有的可見元素查找所有可見的tr元素:$("tr:visible")6.屬性過濾器AttributeFilters名稱說明舉例[attribute]匹配包含給定屬性的元素查找所有含有id屬性的div元素:
$("div[id]")[attribute=value]匹配給定的屬性是某個特定值的元素查找所有name屬性是newsletter的input元素:
$("input[name='newsletter']").attr("checked",true);[attribute!=value]匹配給定的屬性是不包含某個特定值的元素查找所有name屬性不是newsletter的input元素:
$("input[name!='newsletter']").attr("checked",true);[attribute^=value]匹配給定的屬性是以某些值開始的元素$("input[name^='news']")[attribute$=value]匹配給定的屬性是以某些值結尾的元素查找所有name以'letter'結尾的input元素:
$("input[name$='letter']")[attribute*=value]匹配給定的屬性是以包含某些值的元素查找所有name包含'man'的input元素:
$("input[name*='man']")[attributeFilter1][attributeFilter2][attributeFilterN]復合屬性選擇器，需要同時滿足多個條件時使用。找到所有含有id屬性，并且它的name屬性是以man結尾的:
$("input[id][name$='man']")7.子元素過濾器ChildFilters名稱說明舉例:nth-child(index/even/odd/equation)匹配其父元素下的第N個子或奇偶元素':eq(index)'只匹配一個元素，而這個將為每一個父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)在每個ul查找第2個li:
$("ulli:nth-child(2)"):first-child匹配第一個子元素':first'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素在每個ul中查找第一個li:
$("ulli:first-child"):last-child匹配最后一個子元素':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素在每個ul中查找最后一個li:
$("ulli:last-child"):only-child如果某個元素是父元素中唯一的子元素，那將會被匹配如果父元素中含有其他元素，那將不會被匹配。在ul中查找是唯一子元素的li:
$("ulli:only-child")8.表單選擇器Forms名稱說明解釋:input匹配所有input,textarea,select和button元素查找所有的input元素:
$(":input"):text匹配所有的文本框查找所有文本框:
$(":text"):password匹配所有密碼框查找所有密碼框:
$(":password"):radio匹配所有單選按鈕查找所有單選按鈕:checkbox匹配所有復選框查找所有復選框:
$(":checkbox"):submit匹配所有提交按鈕查找所有提交按鈕:
$(":submit"):image匹配所有圖像域匹配所有圖像域:
$(":image"):reset匹配所有重置按鈕查找所有重置按鈕:
$(":reset"):button匹配所有按鈕查找所有按鈕:
$(":button"):file匹配所有文件域查找所有文件域:
$(":file")9.表單過濾器FormFilters名稱說明解釋:enabled匹配所有可用元素查找所有可用的input元素:
$("input:enabled"):disabled匹配所有不可用元素查找所有不可用的input元素:
$("input:disabled"):checked匹配所有選中的被選中元素(復選框、單選框等，不包括select中的option)查找所有選中的復選框元素:
$("input:checked"):selected匹配所有選中的option元素查找所有選中的選項元素:
$("selectoption:selected")六jQuery選擇器實驗室jQuery選擇器實驗室使用的是"jQuery實戰(zhàn)"一書中的代碼,感覺對于學習選擇器很有幫助.我們的實驗對象是一個擁有很多元素的頁面:在實驗室頁面的"Selector"輸入框中輸入jQuery選擇器表達式,所有匹配表達式的元素會顯示紅框:如上圖所示,在輸入".myList"后點擊"Apply",下面的輸出框會顯示運行結果,右側會將選中的元素用紅框顯示.代碼在本章最后可以下載.七.API文檔jQuery官方API:中文在線API:中文jQuery手冊下載:八.總結本章節(jié)講解的jQuery依然屬于基礎支持,所以沒有太多的應用實例.雖然基礎但是很難一次全部記住,jQuery選擇器可以說是最考驗一個人jQuery功力的地方.下一章我們講解如何操作jQuery包裝集以及動態(tài)創(chuàng)建新元素.從零開始學習jQuery(三)管理jQuery包裝集一.摘要在使用jQuery選擇器獲取到jQuery包裝集后,我們需要對其進行操作.本章首先講解如何動態(tài)的創(chuàng)建元素,接著學習如何管理jQuery包裝集,比如添加,刪除,切片等.二.前言本系列的2,3篇上面列舉了太多的API相信大家看著眼暈.不過這些基礎還必須要講,基礎要扎實.其實對于這些列表大家可以跳過,等以后用到時再回頭看或者查詢官方的API說明.本章內(nèi)容很少,主要講解動態(tài)創(chuàng)建元素和操作jQuery包裝集的各個函數(shù).三.動態(tài)創(chuàng)建元素1.錯誤的編程方法我們經(jīng)常使用javascript動態(tài)的創(chuàng)建元素,有很多程序員通過直接更改某一個容器的HTML內(nèi)容.比如:<DOCTYPE
g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/1999/xhtml">
<head>
<title>動態(tài)創(chuàng)建對象<title>
<head>
<body>
<divid="testDiv">測試圖層<div>
<scripttype="text/javascript">
document.getElementById("testDiv").innerHTML="動態(tài)創(chuàng)建的div";
</script>
</body>
</html>上面的示例中我通過修改testDiv的內(nèi)容,在頁面上動態(tài)的添加了一個div元素.但是請牢記,這是錯誤的做法!錯誤的原因:(1)在頁面加載時改變了頁面的結構.在IE6中如果網(wǎng)絡變慢或者頁面內(nèi)容太大就會出現(xiàn)"終止操作"的錯誤.也就是說"永遠不要在頁面加載時改變頁面的Dom模型".(2)使用修改HTML內(nèi)容添加元素,不符合Dom標準.在實際工作中也碰到過使用這種方法修改內(nèi)容后,某些瀏覽器中并不能立刻顯示添加的元素,因為不同瀏覽器的顯示引擎是不同的.但是如果我們使用Dom的CreateElement創(chuàng)建對象,在所有的瀏覽器中幾乎都可以.但是在jQuery中如果傳入的而是一個完整的HTML字符串,內(nèi)部也是使用innerHTML.所以也不是完全否定innerHTML函數(shù)的使用.所以從現(xiàn)在開始請摒棄這種舊知識,使用下面介紹的正確方法編程.2.創(chuàng)建新的元素下面介紹兩種正確的創(chuàng)建元素的方式.(1)使用HTMLDOM創(chuàng)建元素什么是DOM？通過JavaScript，您可以重構整個HTML文檔。您可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西，JavaScript就需要對HTML文檔中所有元素進行訪問的入口。這個入口，連同對HTML元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。在1998年，W3C發(fā)布了第一級的DOM規(guī)范。這個規(guī)范允許訪問和操作HTML頁面中的每一個單獨的元素。所有的瀏覽器都執(zhí)行了這個標準，因此，DOM的兼容性問題也幾乎難覓蹤影了。DOM可被JavaScript用來讀取、改變HTML、XHTML以及XML文檔。DOM被分為不同的部分（核心、XML及HTML）和級別（DOMLevel1/2/3）：CoreDOM定義了一套標準的針對任何結構化文檔的對象XMLDOM定義了一套標準的針對XML文檔的對象HTMLDOM定義了一套標準的針對HTML文檔的對象。關于使用HTMLDOM創(chuàng)建元素本文不做詳細介紹,下面舉一個簡單的例子://使用Dom標準創(chuàng)建元素
varselect=document.createElement("select");
select.options[0]=newOption("加載項1","value1");
select.options[1]=newOption("加載項2","value2");
select.size="2";
varobject=testDiv.appendChild(select);通過使用document.createElement方法我們可以創(chuàng)建Dom元素,然后通過appendChild方法為添加到指定對象上.(2)使用jQuery函數(shù)創(chuàng)建元素在jQuery中創(chuàng)建對象更加簡單,比如創(chuàng)建一個Div元素:$("
動態(tài)創(chuàng)建的div
")
我們主要使用jQuery核心類庫中的一個方法:jQuery(html,ownerDocument)
Returns:jQuery根據(jù)HTML原始字符串動態(tài)創(chuàng)建Dom元素.其中html參數(shù)是一個HTML字符串,在jQuery1.3.2中對此函數(shù)做了改進:當HTML字符串是沒有屬性的元素是,內(nèi)部使用document.createElement創(chuàng)建元素,比如://jQuery內(nèi)部使用document.createElement創(chuàng)建元素:
$("
").css("border","solid1px#FF0000").html("動態(tài)創(chuàng)建的div").appendTo(testDiv);否則使用innerHTML方法創(chuàng)建元素://jQuery內(nèi)部使用innerHTML創(chuàng)建元素:
$("
動態(tài)創(chuàng)建的div
").appendTo(testDiv)3.將元素添加到對象上我們可以使用上面兩種方式創(chuàng)建一個而元素,但是上面已經(jīng)提到一定不要在頁面加載時就改變頁面的DOM結構,比如添加一個元素.正確的做法是在頁面加載完畢后添加或刪除元素.傳統(tǒng)上,使用window.onload完成上述目的://DOM加載完畢后添加元素
//傳統(tǒng)方法
window.onload=function(){testDiv.innerHTML="
動態(tài)創(chuàng)建的div
";}雖然能夠在DOM完整加載后,在添加新的元素,但是不幸的是瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構建完DOM樹之后,也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.所以如果某個圖片或者其他資源加載很長時間,訪問者就會看到一個不完整的頁面,甚至在圖片加載之前就執(zhí)行了需要依賴動態(tài)添加的元素的腳本而導致腳本錯誤.解決辦法就是等DOM被解析后,在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實現(xiàn)變得可行://jQuery使用動態(tài)創(chuàng)建的$(document).ready(function)方法
$(document).ready(
function(){testDiv.innerHTML="
使用動態(tài)創(chuàng)建的$(document).ready(function)方法
";}
);或者使用簡便語法://jQuery使用$(function)方法
$(
function(){testDiv.innerHTML+="
使用$(function)方法
";}
);
使用$()將我們的函數(shù)包裝起來即可.而且可以在一個頁面綁定多個函數(shù),如果使用傳統(tǒng)的window.onload則只能調(diào)用一個函數(shù).所以請大家將修改DOM的函數(shù)使用此方法調(diào)用.另外還要注意document.createElement和innerHTML的區(qū)別.如果可以請盡量使用document.createElement和$("")的形式創(chuàng)建對象.四.管理jQuery包裝集元素既然學會了動態(tài)創(chuàng)建元素,接下來就會想要把這些元素放入我們的jQuery包裝集中.我們可以在jQuery包裝集上調(diào)用下面這些函數(shù),用來改變我們的原始jQuery包裝集,并且大部分返回的都是過濾后的jQuery包裝集.jQuery提供了一系列的函數(shù)用來管理包裝集:1.過濾Filtering名稱說明舉例eq(index)獲取第N個元素獲取匹配的第二個元素:
$("p").eq(1)filter(expr)篩選出與指定表達式匹配的元素集合。保留帶有select類的元素:
$("p").filter(".selected")filter(fn)篩選出與指定函數(shù)返回值匹配的元素集合這個函數(shù)內(nèi)部將對每個對象計算一次(正如'$.each').如果調(diào)用的函數(shù)返回false則這個元素被刪除，否則就會保留。保留子元素中不含有ol的元素:
$("div").filter(function(index){
return$("ol",this).size()==0;
});is(expr)
注意:這個函數(shù)返回的不是jQuery包裝集而是Boolean值用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。如果沒有元素符合，或者表達式無效，都返回'false'.'filter'內(nèi)部實際也是在調(diào)用這個函數(shù)，所以，filter()函數(shù)原有的規(guī)則在這里也適用。由于input元素的父元素是一個表單元素，所以返回true:
$("input[type='checkbox']").parent().is("form")map(callback)將一組元素轉換成其他數(shù)組（不論是否是元素數(shù)組）你可以用這個函數(shù)來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。這都可以用'$.map()'來方便的建立把form中的每個input元素的值建立一個列表:
$("p").append($("input").map(function(){
return$(this).val();
}).get().join(","));not(expr)刪除與指定表達式匹配的元素從p元素中刪除帶有select的ID的元素:
$("p").not($("#selected")[0])slice(start,end)選取一個匹配的子集選擇第一個p元素:
$("p").slice(0,1);2.查找Finding名稱說明舉例add(expr)把與表達式匹配的元素添加到jQuery對象中。這個函數(shù)可以用于連接分別與兩個表達式匹配的元素結果集。動態(tài)生成一個元素并添加至匹配的元素中:
$("p").add("Again")children([expr])取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可以通過可選的表達式來過濾所匹配的子元素。注意：parents()將查找所有祖輩元素，而children()只考慮子元素而不考慮所有后代元素。查找DIV中的每個子元素:
$("div").children()closest([expr])取得與表達式匹配的最新的父元素為事件源最近的父類li對象更換樣式:$(document).bind("click",function(e){
$(e.target).closest("li").toggleClass("hilight");
});contents()查找匹配元素內(nèi)部所有的子節(jié)點（包括文本節(jié)點）。如果元素是一個iframe，則查找文檔內(nèi)容查找所有文本節(jié)點并加粗:
$("p").contents().not("[nodeType=1]").wrap("");find(expr)搜索所有與指定表達式匹配的元素。這個函數(shù)是找出正在處理的元素的后代元素的好方法。所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。從所有的段落開始，進一步搜索下面的span元素。與$("pspan")相同:
$("p").find("span")next([expr])取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。這個函數(shù)只返回后面那個緊鄰的同輩元素，而不是后面所有的同輩元素（可以使用nextAll）?？梢杂靡粋€可選的表達式進行篩選。找到每個段落的后面緊鄰的同輩元素:
$("p").next()nextAll([expr])查找當前元素之后所有的同輩元素?？梢杂帽磉_式過濾給第一個div之后的所有元素加個類:
$("div:first").nextAll().addClass("after");offsetParent()返回第一個有定位的父類(比如(relative或absolute)).parent([expr])取得一個包含著所有匹配元素的唯一父元素的元素集合。你可以使用可選的表達式來篩選。查找每個段落的父元素:
$("p").parent()parents([expr])取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）?？梢酝ㄟ^一個可選的表達式進行篩選。找到每個span元素的所有祖先元素:
$("span").parents()prev([expr])取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。可以用一個可選的表達式進行篩選。只有緊鄰的同輩元素會被匹配到，而不是前面所有的同輩元素。找到每個段落緊鄰的前一個同輩元素:
$("p").prev()prevAll([expr])查找當前元素之前所有的同輩元素可以用表達式過濾。給最后一個之前的所有div加上一個類:
$("div:last").prevAll().addClass("before");siblings([expr])取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。找到每個div的所有同輩元素:
$("div").siblings()3.串聯(lián)Chaining名稱說明舉例andSelf()加入先前所選的加入當前元素中對于篩選或查找后的元素，要加入先前所選元素時將會很有用。選取所有div以及內(nèi)部的p，并加上border類:
$("div").find("p").andSelf().addClass("border");end()回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。
如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在Traversing中任何返回一個jQuery對象的函數(shù)--'add','andSelf','children','filter','find','map','next','nextAll','not','parent','parents','prev','prevAll','siblings'and'slice'--再加上Manipulation中的'clone'。選取所有的p元素，查找并選取span子元素，然后再回過來選取p元素:
$("p").find("span").end()五.常用函數(shù)舉例[待續(xù)]六.總結本篇文章內(nèi)容較少,主要講解如何動態(tài)創(chuàng)建元素以及管理jQuery包裝集,接口文檔列舉了太多,實例部分還沒來得及寫.因為要睡覺明天還要上班,所以請各位見諒,等以后有空的時候補上!從零開始學習jQuery(四)使用jQuery操作元素的屬性與樣式一.摘要本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式.其中DOM屬性和元素屬性的區(qū)分值得大家學習.二.前言通過前面幾章我們已經(jīng)能夠完全控制jQuery包裝集了,無論是通過選擇器選取對象,或者從包裝集中刪除,過濾元素.本章將講解如何使用jQuery獲取和修改元素屬性和樣式.三.區(qū)分DOM屬性和元素屬性一個img標簽:<imgsrc="images/image.1.jpg"id="hibiscus"alt="Hibiscus"class="classA"/>通常開發(fā)人員習慣將id,src,alt等叫做這個元素的"屬性".我將其稱為"元素屬性".但是在解析成DOM對象時,實際瀏覽器最后會將標簽元素解析成"DOM對象",并且將元素的"元素屬性"存儲為"DOM屬性".兩者是有區(qū)別的.
但是在"DOM屬性"中都會轉換成絕對路徑:.甚至有些"元素屬性"和"DOM屬性"的名稱都不一樣,比如上面的元素屬性class,轉換為DOM屬性后對應className.牢記,在javascript中我們可以直接獲取或設置"DOM屬性":Code
<scripttype="text/javascript">
$(function(){
varimg1=document.getElementById("hibiscus");
alert(img1.alt);
img1.alt="Changethealtelementattribute";
alert(img1.alt);
})
</script>
所以如果要設置元素的CSS樣式類,要使用的是"DOM屬性"className"而不是"元素屬性"class:img1.className="classB";四.操作"DOM屬性"在jQuery中沒有包裝操作"DOM屬性"的函數(shù),因為使用javascript獲取和設置"DOM屬性"都很簡單.在jQuery提供了each()函數(shù)用于遍歷jQuery包裝集,其中的this指針是一個DOM對象,所以我們可以應用這一點配合原生javascript來操作元素的DOM屬性:$("img").each(function(index){
alert("index:"+index+",id:"+this.id+",alt:"+this.alt);
this.alt="changed";
alert("index:"+index+",id:"+this.id+",alt:"+this.alt);
});下面是each函數(shù)的說明:each(callback)Returns:jQuery包裝集對包裝集中的每一個元素執(zhí)行callback方法.其中callback方法接受一個參數(shù),表示當前遍歷的索引值,從0開始.五.操作"元素屬性"我們可以使用javascript中的getAttribute和setAttribute來操作元素的"元素屬性".在jQuery中給你提供了attr()包裝集函數(shù),能夠同時操作包裝集中所有元素的屬性:名稱說明舉例attr(name)取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性，則返回undefined。返回文檔中第一個圖像的src屬性值:
$("img").attr("src");attr(properties)將一個“名/值”形式的對象設置為所有匹配元素的屬性。這是一種在所有匹配元素中批量設置很多屬性的最佳方式。注意，如果你要設置對象的class屬性，你必須使用'className'作為屬性名。或者你可以直接使用.addClass(class)和.removeClass(class).為所有圖像設置src和alt屬性:
$("img").attr({src:"test.jpg",alt:"TestImage"});attr(key,value)為所有匹配的元素設置一個屬性值。為所有圖像設置src屬性:
$("img").attr("src","test.jpg");attr(key,fn)為所有匹配的元素設置一個計算的屬性值。不提供值，而是提供一個函數(shù)，由這個函數(shù)計算的值作為屬性值。把src屬性的值設置為title屬性的值:
$("img").attr("title",function(){returnthis.src});removeAttr(name)從每一個匹配的元素中刪除一個屬性將文檔中圖像的src屬性刪除:
$("img").removeAttr("src");當使用id選擇器時常常返回只有一個對象的jQuery包裝集,這個時侯常使用attr(name)函數(shù)獲得它的元素屬性:functiontestAttr1(event){
alert($("#hibiscus").attr("class"));
}
注意attr(name)函數(shù)只返回第一個匹配元素的特定元素屬性值.而attr(key,name)會設置所有包裝集中的元素屬性://修改所有img元素的alt屬性
$("img").attr("alt","修改后的alt屬性");
而attr(properties)可以一次修改多個元素屬性：$("img").attr({title:"修改后的title",alt:"同時修改alt屬性"});
另外雖然我們可以使用removeAttr(name)刪除元素屬性,但是對應的DOM屬性是不會被刪除的,只會影響DOM屬性的值.比如將一個input元素的readonly元素屬性去掉,會導致對應的DOM屬性變成false(即input變成可編輯狀態(tài)):$("#inputTest").removeAttr("readonly");六,修改CSS樣式修改元素的樣式,我們可以修改元素CSS類或者直接修改元素的樣式.一個元素可以應用多個css類,但是不幸的是在DOM屬性中是用一個以空格分割的字符串存儲的,而不是數(shù)組.所以如果在原始javascript時代我們想對元素添加或者刪除多個屬性時,都要自己操作字符串.jQuery讓這一切變得異常簡單.我們再也不用做那些無聊的工作了.1.修改CSS類下表是修改CSS類相關的jQuery方法:名稱說明實例addClass(classes)為每個匹配的元素添加指定的類名。為匹配的元素加上'selected'類:
$("p").addClass("selected");hasClass(class)判斷包裝集中是否至少有一個元素應用了指定的CSS類
$("p").hasClass("selected");removeClass([classes])從所有匹配的元素中刪除全部或者指定的類。從匹配的元素中刪除'selected'類:
$("p").removeClass("selected");toggleClass(class)如果存在（不存在）就刪除（添加）一個類。為匹配的元素切換'selected'類:
$("p").toggleClass("selected");toggleClass(class,switch)當switch是true時添加類,
當switch是false時刪除類每三次點擊切換高亮樣式:
varcount=0;
$("p").click(function(){
$(this).toggleClass("highlight",count++%3==0);
});使用上面的方法,我們可以將元素的CSS類像集合一樣修改,再也不必手工解析字符串.注意addClass(class)和removeClass([classes])的參數(shù)可以一次傳入多個css類,用空格分割,比如:$("#btnAdd").bind("click",function(event){$("p").addClass("colorRedborderBlue");});
removeClass方法的參數(shù)可選,如果不傳入?yún)?shù)則移除全部CSS類:$("p").removeClass()2.修改CSS樣式同樣當我們想要修改元素的具體某一個CSS樣式,即修改元素屬性"style"時,jQuery也提供了相應的方法:名稱說明實例css(name)訪問第一個匹配元素的樣式屬性。取得第一個段落的color樣式屬性的值:
$("p").css("color");css(properties)把一個“名/值對”對象設置為所有匹配元素的樣式屬性。這是一種在所有匹配的元素上設置大量樣式屬性的最佳方式。將所有段落的字體顏色設為紅色并且背景為藍色:
$("p").css({color:"#ff0011",background:"blue"});
css(name,value)在所有匹配的元素中，設置一個樣式屬性的值。數(shù)字將自動轉化為像素值將所有段落字體設為紅色:
$("p").css("color","red");七.獲取常用屬性雖然我們可以通過獲取屬性,特性以及CSS樣式來取得元素的幾乎所有信息,但是注意下面的實驗:<!
l1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/1999/xhtml">
<head>
<title>獲取對象寬度</title>
<scripttype="text/javascript"src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<scripttype="text/javascript">
$(function()
{
alert("attr(\"width\"):"+$("#testDiv").attr("width"));//undifined
alert("css(\"width\"):"+$("#testDiv").css("width"));//auto(ie6)或1264px(ff)
alert("width():"+$("#testDiv").width());//正確的數(shù)值1264
alert("style.width:"+$("#testDiv")[0].style.width);//空值
})
</script>
</head>
<body>
<divid="testDiv">
測試文本</div>
</body>
</html>我們希望獲取測試圖層的寬度,使用attr方法獲取"元素特性"為undifined,因為并沒有為div添加width.而使用css()方法雖然可以獲取到style屬性的值,但是在不同瀏覽器里返回的結果不同,IE6下返回auto,而FF下雖然返回了正確的數(shù)值但是后面帶有"px".所以jQuery提供了width()方法,此方法返回的是正確的不帶px的數(shù)值.針對上面的問題,jQuery為常用的屬性提供了獲取和設置的方法,比如width()用戶獲取元素的寬度,而width(val)用來設置元素寬度.下面這些方法可以用來獲取元素的常用屬性值:1.寬和高相關HeightandWidth名稱說明舉例height()取得第一個匹配元素當前計算的高度值（px）。獲取第一段的高:
$("p").height();height(val)為每個匹配的元素設置CSS高度(hidth)屬性的值。如果沒有明確指定單位（如：em或%），使用px。把所有段落的高設為20:
$("p").height(20);width()取得第一個匹配元素當前計算的寬度值（px）。獲取第一段的寬:
$("p").width();width(val)為每個匹配的元素設置CSS寬度(width)屬性的值。如果沒有明確指定單位（如：em或%），使用px。將所有段落的寬設為20:
$("p").width(20);innerHeight()獲取第一個匹配元素內(nèi)部區(qū)域高度（包括補白、不包括邊框）。
此方法對可見和隱藏元素均有效。見最后示例innerWidth()獲取第一個匹配元素內(nèi)部區(qū)域寬度（包括補白、不包括邊框）。
此方法對可見和隱藏元素均有效。見最后示例outerHeight([margin])獲取第一個匹配元素外部高度（默認包括補白和邊框）。
此方法對可見和隱藏元素均有效。見最后示例outerWidth([margin])獲取第一個匹配元素外部寬度（默認包括補白和邊框）。
此方法對可見和隱藏元素均有效。見最后示例關于在獲取長寬的函數(shù)中,要區(qū)別"inner","outer"和height/width這三種函數(shù)的區(qū)別:2.位置相關Positioning另外在一些設計套彈出對象的腳本中,常常需要動態(tài)獲取彈出坐標并且設置元素的位置.但是很多的計算位置的方法存在著瀏覽器兼容性問題,jQuery中為我們提供了位置相關的各個函數(shù):名稱說明舉例offset()獲取匹配元素在當前窗口的相對偏移。返回的對象包含兩個整形屬性：top和left。此方法只對可見元素有效。獲取第二段的偏移:
varp=$("p:last");
varoffset=p.offset();
p.html("left:"+offset.left+",top:"+offset.top);position()獲取匹配元素相對父元素的偏移。返回的對象包含兩個整形屬性：top和left。為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。獲取第一段的偏移:
varp=$("p:first");
varposition=p.position();
$("p:last").html("left:"+position.left+",top:"+position.top);scrollTop()獲取匹配元素相對滾動條頂部的偏移。此方法對可見和隱藏元素均有效。獲取第一段相對滾動條頂部的偏移:
varp=$("p:first");
$("p:last").text("scrollTop:"+p.scrollTop());scrollTop(val)傳遞參數(shù)值時，設置垂直滾動條頂部偏移為該值。此方法對可見和隱藏元素均有效。設定垂直滾動條值:
$("div.demo").scrollTop(300);scrollLeft()獲取匹配元素相對滾動條左側的偏移。此方法對可見和隱藏元素均有效。獲取第一段相對滾動條左側的偏移:
varp=$("p:first");
$("p:last").text("scrollLeft:"+p.scrollLeft());scrollLeft(val)傳遞參數(shù)值時，設置水平滾動條左側偏移為該值。此方法對可見和隱藏元素均有效。設置相對滾動條左側的偏移:
$("div.demo").scrollLeft(300);八.總結本篇文章主要講解如何使用jQuery操作元素的屬性和修改樣式.請大家主要注意元素屬性和DOM屬性的區(qū)別.下一篇文章將講解最重要的事件,介紹如何綁定事件,操作事件對象等.從零開始學習jQuery(五)事件與事件對象一.摘要事件是腳本編程的靈魂.所以本章內(nèi)容也是jQuery學習的重點.本文將對jQuery中的事件處理以及事件對象進行詳細的講解.二.前言本篇文章是至今為止本系列內(nèi)容最多的一篇,足以可見其重要性.大家反映要多列舉示例.我會在時間允許的情況下盡量多列舉示例.真正的投入生產(chǎn)使用的實例暫時還無法加入到文章中,但是可能最后我會列舉一些作品供大家借鑒.另外本人水平有限,因為我不是UI設計師.文章可能有錯誤的地方,希望大家?guī)兔χ赋?一起學習一起進步.在技術的世界里我們是沒有任何利益瓜葛.希望大家都抱著彼此鼓勵的心態(tài),對于回復中的激進評論我也都會考慮,但是希望能夠彼此尊重,保護博客園這片程序員的凈土!三.事件與事件對象曾經(jīng)在我的"Javascript公共腳本庫系列(二):添加事件多播委托的方法"和"Javascript公共腳本庫系列(三):格式化事件對象/事件對象詳解"兩篇文章中,曾講解過javascript中的事件和事件對象.首先看一下我們經(jīng)常使用的添加事件的方式:<!
l1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/1999/xhtml">
<head>
<title>javascript中的事件</title>
<scripttype="text/javascript"src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<scripttype="text/javascri
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024葡萄酒年份酒拍賣會組織與銷售代理合同3篇
- 2024車輛保養(yǎng)維修中心服務承包合同
- 2024版路燈租賃合同書
- 2025年度廠房投資合作項目合同范本3篇
- 2024年跨國軟件定制開發(fā)合同
- 2024風力發(fā)電項目投資建設合同
- 2024版云計算服務定制合同
- 2024年鋼筋工程勞務承包專用合同
- 2024特崗教師招聘與聘用及培訓與考核服務合同3篇
- 動物疫病檢驗技術知到智慧樹章節(jié)測試課后答案2024年秋黑龍江農(nóng)業(yè)經(jīng)濟職業(yè)學院
- 2019年簡單壓力容器安全技術規(guī)程正式
- 降低成本費用的措施
- 工程量確認單范本
- 潔凈室工程行業(yè)深度分析
- 頻譜儀N9020A常用功能使用指南
- 天津高考英語詞匯3500
- 醫(yī)療質量檢查分析及整改措施反饋
- psa制氮機應急預案
- 三年級下冊數(shù)學教案-6練習五-北師大版
- 六年級作文指導暑假趣事經(jīng)典課件
- 最敬業(yè)員工無記名投票選舉表
評論
0/150
提交評論