JQuery基礎(chǔ)、選擇器_第1頁
JQuery基礎(chǔ)、選擇器_第2頁
JQuery基礎(chǔ)、選擇器_第3頁
JQuery基礎(chǔ)、選擇器_第4頁
JQuery基礎(chǔ)、選擇器_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、jQuery入門什么是jQueryjQuery是一個JavaScript庫，通過封裝原生的JavaScript函數(shù)得到一整套定義好的方法。它是JohnResig于2006年創(chuàng)建的一個開源項目，隨著越來越多開發(fā)者的加入，jQuery已經(jīng)集成了JavaScript、CSS、DOM和Ajax于一體的強大功能。以最少的代碼，完成更多復(fù)雜而困難的功能，從而得到了開發(fā)者的青睞。主旨：以更少的代碼、實現(xiàn)更多的功能 （write less ,do more!）官網(wǎng)：jQuery的功能和優(yōu)勢jQuery作為JavaScript封裝的庫，它的目的就是為了簡化開發(fā)者使用JavaScript。主要功能有以下幾點：像C

2、SS那樣訪問和操作DOM；修改CSS控制頁面外觀；簡化JavaScript代碼操作；事件處理更加容易；各種動畫效果使用方便；讓Ajax技術(shù)更加完美；基于jQuery大量插件；自行擴展功能插件。jQuery最大的優(yōu)勢，就是特別的方便。比如模仿CSS獲取DOM，比原生的JavaScript要方便太多。并且在多個CSS設(shè)置上的集中處理非常舒服，而最常用的CSS功能又封裝到單獨的方法。最重要的是jQuery的代碼兼容性非常好，你不需要總是頭疼著考慮不同瀏覽器的兼容問題。其他JavaScript庫目前除了jQuery，還有5個JS庫較為流行，他們分別是YUI、Prototype、Mootools、Doj

3、o和ExtJS。YUI，是雅虎公司開發(fā)的一套完備的、擴展性良好的富交互網(wǎng)頁工具集。Prototype，是最早成型的JavaScript庫之一，對JavaScript內(nèi)置對象做了大量的擴展。Dojo，Dojo強大之處在于提供了其他庫沒有的功能。離線存儲、圖標組件等等。Mootools，輕量、簡潔、模塊化和面向?qū)ο蟮腏avaScript框架。ExtJS，簡稱Ext，原本是對YUI的一個擴展，主要創(chuàng)建前端用戶界面。(付費的)jQuery代碼的編寫配置jQuery環(huán)境1、獲取jQuery最新版本 從官網(wǎng)下載：2、jQuery庫的類型說明名稱大小說明jQuery.js約229K完整無壓縮版本，主要用于測

4、試、學習和開發(fā)jQuery.min.js約31K經(jīng)過工具壓縮或經(jīng)過服務(wù)器的開啟Gzipyasuo ，主要用于產(chǎn)品和項目3、jQuery環(huán)境配置jQuery不需要安裝，把下載的jQuery.js放到網(wǎng)站上的一個公共位置，想要在某個頁面上使用jQuery時，只需在該HTML文檔中引入該庫文件即可。4、在頁面中引入jQuery由于jQuery是JavaScript的一個庫文件，也就是jQuery本質(zhì)是一個.js文件，所以使用<script type=”text/javascript” src=” jQuery存放的路徑”></script>引入。簡單的jQuery示例<

5、!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head> <title>JQuery練習</title> <meta content="text/charset=utf-8" http-equiv="content-type"><script type="text/javas

6、cript" src="./js/jquery-2.1.4.js"></script><script type="text/javascript">/單擊按鈕彈窗 $(document).ready(function()$('input').click(function()alert('第一個JQuery程序');););</script></head><body><input type="button" id="

7、;btn" name="btn" value="點擊我"> </body></html>效果：點擊按鈕，彈出對話框。window.onload和$(document).ready區(qū)別在jQuery代碼中一直在使用$(document).ready(function();這段代碼進行首尾包裹，那么為什么必須要包裹這段代碼呢？原因是我們jQuery庫文件是在body元素之前加載的，我們必須等待所有的DOM元素加載后，延遲支持DOM操作，否則jQuery選擇器就無法獲取到相應(yīng)的節(jié)點元素。延遲等待加載，JavaScript

8、提供了一個事件為load，方法如下：事件或方法說明window.onload=function() ;/JavaScript等待加載$(document).ready(function() ); /jQuery等待加載load和ready區(qū)別如下圖所示：注意：在實際應(yīng)用中，很少直接去使用window.onload，因為需要等待圖片之類的大型元素加載完畢后才能執(zhí)行js代碼。所以，在網(wǎng)速較慢的情況下，頁面已經(jīng)全面展開，圖片還在緩慢加載，這時頁面上任何的js交互功能全部處在假死狀態(tài)。jQuery基礎(chǔ)jQuery語法通過jQuery，你可以選?。ú樵儯〩TML元素，并對它們執(zhí)行“操作”（action）

9、。語法格式：$(selector).action()解釋：1、$是jQuery的縮寫 2、選擇符（selector）用來查詢和查找HTML元素 3、jQuery的action()執(zhí)行對元素的操作jQuery對象jQuery對象就是通過jQuery包裝的DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的。如果一個對象是jQuery對象，那么就可以使用jQuery里的對象。jQuery對象縮寫“$”，在jQuery程序中，不管是頁面元素的選擇、內(nèi)置的功能函數(shù)，都是美元符號“$”來起始的。而“$”就是jQuery當中最重要且獨有的對象：jQuery對象，所以我們在頁面元素選擇或執(zhí)行一個方法

10、的時候可以這樣寫：代碼說明$(document).ready(function ();/執(zhí)行一個匿名函數(shù)$(#div1);/選擇id為div1標簽元素$(#div1).css(color,red);/改變id為div1標簽元素文本內(nèi)容為紅色由于$就是jQuery對象的縮寫形式，上面的代碼也可以寫成如下形式：代碼 說明jQuery (document).ready(function(); /執(zhí)行一個匿名函數(shù)jQuery (#div1); /選擇id為div1標簽元素jQuery (#div1).css(color,red);/改變id為div1標簽元素文本內(nèi)容為紅色eg：js代碼：<scr

11、ipt type="text/javascript">/單擊按鈕彈窗 $(document).ready(function()$('input').click(function()$('#div1').css("color","red"););</script>html代碼：<input type="button" id="btn" name="btn" value="點擊我"> <div

12、 id="div1" style="width:100px;height:100px;background:yellow"> Hello jQuery!</div>效果：點擊按鈕，文本顏色由黑色變?yōu)榫G色jQuery的鏈式調(diào)用由上面的例子可以看出，在執(zhí)行方法的時候，并不是直接被“$”或jQuery對象調(diào)用執(zhí)行，而是先獲取節(jié)點標簽元素返回某個標簽元素對象后再調(diào)用.css()方法。方法執(zhí)行的返回仍然是jQuery對象。執(zhí)行$().css(color,red); 最終返回的還是jQuery對象， jQuery的代碼可以采用鏈式操作，不停的連續(xù)調(diào)

13、用方法。例如:$('#div1').css('color','red').css('font-size', '50px'); /鏈式操作eg：jQuery鏈式操作js代碼：<script> /單擊按鈕彈窗 $(document).ready(function() $('input').click(function() $('#div1').css('color','red').css('font-size', '20

14、px'); ); );</script>html代碼：<input type="button" id="btn" name="btn" value="點擊我"><div id=”div1” style="width: 100px;height: 100px;background: yellow">Hello jQuery!</div>效果：點擊按鈕，文本顏色由黑色變?yōu)榧t色同時字體變大js對象和jQuery對象之間互轉(zhuǎn)（理解）jQuery對象

15、雖然是jQuery庫獨有的對象，但也是通過JavaScript進行封裝而來的。我們可以直接輸出來得到它的信息。代碼說明alert($);/jQuery對象方法的內(nèi)容alert($();/jQuery對象方法返回的對象，還是jQuery對象alert($('#div1'); /返回ID為div1的標簽元素的jQuery對象從上面三組代碼我們發(fā)現(xiàn)：只要使用了$()后，最終返回的都是jQuery對象。這樣的好處顯而易見，就是可以采用鏈式操作。但有時，我們也需要返回原生的DOM對象。1、jQuery對象轉(zhuǎn)換成DOM對象eg:代碼說明alert(document.getElementBy

16、Id('div1'); /返回值object HTMLDivElementjQuery獲取原生的DOM對象：通過jQuery本身提供，通過.get(index)方法，得到相應(yīng)的DOM對象eg:代碼說明alert($('#div1').get(0); /ID元素的第一個原生DOM/返回值object HTMLDivElement從上面get(0)，這里的索引看出，jQuery是可以進行批量處理DOM的，這樣可以在很多需要循環(huán)遍歷的處理上更加得心應(yīng)手。2、DOM對象轉(zhuǎn)成jQuery對象: 對于已經(jīng)是一個DOM對象，只需要用$()把DOM對象包裝起來，就可以

17、獲得一個jQuery對象了。轉(zhuǎn)換后，就可以任意使用jQuery的方法了。代碼說明var d=document.getElementById("div1");/DOM對象var div=$(d);/返回jQuery對象注意：和之前的js進行區(qū)別，jQuery對象只能使用jQuery對象的方法；JQuery選擇器jQuery最核心的組成部分就是：jQuery選擇器。它繼承了CSS的語法，可以對DOM元素的標簽名、屬性名、狀態(tài)等進行快速準確的選擇，并且不必擔心瀏覽器的兼容性。jQuery選擇器實現(xiàn)了CSS1CSS3的大部分規(guī)則之外，還實現(xiàn)了一些自定義的選擇器，用于各種特殊狀態(tài)的選

18、擇。基本選擇器在使用jQuery選擇器時，我們首先必須使用“$()”函數(shù)來包裝我們的CSS選擇器。而CSS選擇器作為參數(shù)傳遞到j(luò)Query對象內(nèi)部后，再返回包含頁面中對應(yīng)元素的jQuery對象。隨后，我們就可以對這個獲取到的DOM節(jié)點進行行為操作了。CSS選擇器CSS代碼：#div /使用ID選擇器選擇標簽元素color:red; /將ID為div的元素字體顏色變紅jQuery選擇器在jQuery選擇器里，使用如下的方式獲取同樣的結(jié)果：$('#div1').css('color','red');/獲取DOM節(jié)點對象，并添加行為基本選擇器選擇器jQ

19、uery選擇器說明元素名$(div)獲取所有div元素的DOM對象 ID$(#box) 獲取ID為div1元素的DOM對象類(class) .$(.div)獲取所有class為div1的所有DOM對象創(chuàng)建一個HTML頁面（selector.html），應(yīng)用選擇器為其添加行為。$('#one').css("background","#bbffaa");$('.mini').css("background","#bbffaa");$('div').css("ba

20、ckground","#bbffaa");注意：除了ID選擇器其他都返回的是多個元素為了證明ID返回的是單個元素，而元素標簽名和類(class)返回的是多個，我們可以采用jQuery核心自帶的一個屬性length或size()方法來查看返回的元素個數(shù)。代碼 說明alert($('div').size();/18個alert($(''#one ').size();/1個alert($('. mini').size();/11個jQuery選擇器的寫法與CSS選擇器十分類似，只不過他們的功能不同。CSS找到元素后

21、添加的是單一的樣式，而jQuery則添加的是動作行為。最重要的一點是：CSS在添加樣式的時候，高級選擇器會對部分瀏覽器不兼容，而jQuery選擇器則不會。復(fù)合選擇器（選擇器的復(fù)合使用）在jQuery擇器中，除了最基本的三種選擇器：元素標簽名、ID和類(class)選擇器外，還有一些進階和高級的選擇器方便我們更精準的選擇元素。選擇器 jQuery選擇器 說明群組選擇器$(span,em,.div1) 獲取多個選擇器的DOM對象通配符選擇器$(*) 獲取所有元素標簽DOM對象eg：群組選擇器$("span,#two").css("background",&q

22、uot;#bbffaa"); /群組選擇器jQuery方式eg：通配選擇器$("*").css("background","#bbffaa"); /jQuery通配選擇器注意：在實際使用上，通配選擇器一般用的并不多，尤其是在大通配上，比如：$('*')，這種使用方法效率很低，影響性能，建議竟可能少用。層次選擇器 在前面已經(jīng)介紹最常規(guī)的選擇器，一般來說基本上可以解決所有DOM節(jié)點對象選擇的問題。但在很多特殊的元素上，比如父子關(guān)系的元素，兄弟關(guān)系的元素，特殊屬性的元素等等。在早期CSS的使用上，由于IE6等低版本

23、瀏覽器不支持，所以這些高級選擇器的使用也不具備普遍性，但隨著jQuery兼容，這些選擇器的使用頻率也越來越高。選擇器 css選擇器 jQuery選擇器 說明后代選擇器 ul li a $(ul li a) 獲取追溯到的多個DOM對象子選擇器div>p$(div p) 只獲取孩子級多個DOM對象next選擇器div+p$(div+p) 只獲取節(jié)點后一個同級DOM對象nextAll選擇器divp$(divp) 獲取節(jié)點后面所有同級DOM對象eg：后代選擇器代碼說明$('body div').css("background","#bbffaa&qu

24、ot;); / jQuery為后代選擇器提供了一個等價find()方法$('body').find('div') .css("background","#bbffaa"); /和后代選擇器等價eg：僅對“孩子級”子元素有效$('body>div').css("background","#bbffaa");/jQuery子選擇器/ jQuery為子選擇器提供了一個等價children()方法：$('body).children('div')

25、.css("background","#bbffaa");/和子選擇器等價eg：next選擇器(下一個同級節(jié)點)$('.one+div').css("background","#bbffaa"); /jQuery中next選擇器/ jQuery為子選擇器提供了一個等價next()方法：$('.one').next('div'). css("background","#bbffaa"); /和next選擇器等價eg：nextAll

26、選擇器(后面所有同級節(jié)點)$('#twodiv').css("background","#bbffaa"); /jQuery中next選擇器/ jQuery為子選擇器提供了一個等價nextAll ()方法：$('#two'). nextAll('div'). css("background","#bbffaa");/和nextAll選擇器等價注意：層次選擇器對節(jié)點的層次都是有要求的，比如子選擇器，只有子節(jié)點才可以被選擇到，孫子節(jié)點和重孫子節(jié)點都無法選擇到。next和n

27、extAll選擇器，必須是同一個層次的后一個和后N個，不在同一個層次就無法選取到了。過濾選擇器(理解，表單需要掌握)過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需要的DOM元素，過濾規(guī)則與CSS中的偽類選擇器語法相同。按照不同的過濾規(guī)則，過濾選擇器可以分為：基本過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器1、基本過濾選擇器基本過濾選擇器是過濾選擇器中用的最多的一種，它的過濾規(guī)則主要體現(xiàn)在元素的位置(索引)上及一些特定的元素。選擇器描 述返 回示 例:first選取第1個元素單個元素$("div:first")選取所有

28、 <div>元素中第一個<div>元素:last選取最后1個元素單個元素$("div:last")選取所有 <div>元素中最后一個<div>元素:not(selector)去除所有與給定選擇器匹配的元素集合元素$("input:not(.myClass)")選取class不是myClass的<input>元素:even選取索引(從0開始)是偶數(shù)的所有元素集合元素$("input:even")選取索引是偶數(shù)的<input>元素:odd選取索引(從0開始)是奇數(shù)的所

29、有元素集合元素$("input:odd")選取索引是奇數(shù)的<input>元素:eq(index)選取索引(從0開始)等于index的元素單個元素$("input:eq(1)")選取索引等于1的<input>元素:gt(index)選取索引(從0開始)大于index的元素集合元素$("input:gt(1)")選取索引大于1的<input>元素:lt(index)選取索引(從0開始)小于index的元素集合元素$("input:lt(1)")選取索引小于1的<input>

30、;元素:header選取所有的標題元素，即<h1>到<h6>集合元素$(":header")選取頁面中所有的標題元素:animated選取當前正在執(zhí)行動畫的所有元素集合元素$("div:animated")選取當前正在執(zhí)行動畫的<div>元素2、內(nèi)容過濾選擇器內(nèi)容過濾選擇器的過濾規(guī)則主要體現(xiàn)在它所含的子元素或文本內(nèi)容上。選 擇 器描 述返 回示 例:contains(text)選取含有文本內(nèi)容為 text 的元素集合元素$("div:contains('test')")選取含有文本內(nèi)

31、容為 test 的<div>元素:empty選取不包含子元素或文本的空元素集合元素$("div:empty")選取不包含子元素或文本的空<div>元素:has(selector)選取含有給定選擇器匹配的元素的元素集合元素$("div:has(.myClass)")選取含有class為myClass的元素的<div>元素:parent選取含有子元素或文本的元素集合元素$("div:parent")選取含有子元素或文本的<div>元素3、可見性過濾選擇器可見性過濾選擇器是根據(jù)元素的可見和不可

32、見狀態(tài)來選擇相應(yīng)的元素。選 擇 器描 述返 回示 例:hidden選取所有不可見的元素集合元素$("div:hidden")選取所有不可見的<div>元素:visible選取所有可見的元素集合元素$("div:visible")選取所有可見的<div>元素4、屬性過濾選擇器屬性過濾選擇器的過濾規(guī)則是通過元素的屬性來獲取相應(yīng)的元素。選 擇 器描 述返 回示 例attribute選取擁有此屬性的元素集合元素$("divid")選取擁有屬性id的元素attribute=value選取屬性的值為value的元素集合元素

33、$("divtitle=test")選取屬性 title 為test 的<div>元素attribute!=value選取屬性的值不等于value的元素集合元素$("divtitle!=test")選取屬性 title 不等于 test 的<div>元素attribute=value選取屬性的值以value開始的元素集合元素$("divtitle=test")選取屬性 title 以test 開始的<div>元素attribute$=value選取屬性的值以value結(jié)束的元素集合元素$("

34、;divtitle$=test")選取屬性 title 以test 結(jié)束的<div>元素attribute*=value選取屬性的值含有value的元素集合元素$("divtitle*=test")選取屬性 title 含有 test 的<div>元素selector1selector2.selectorN選取匹配以上所有屬性選擇器的元素集合元素$("dividtitle*=test")選取擁有屬性id，且屬性 title 含有 test 的<div>元素5、子元素過濾選擇器子元素過濾選擇器的過濾規(guī)則是通過元

35、素的父子關(guān)系來獲取相應(yīng)的元素。選 擇 器描 述返 回示 例:nth-child(index/even/odd/equation)選取每個父元素下的第index(索引值為奇數(shù)/索引值為偶數(shù)/索引值等于某個表達式)個子元素，index從1開始集合元素$("div:nth-child(1)")選取每個<div>中第一個子元素:first-child選取每個父元素下的第1個子元素集合元素$("div :first-child")選取每個<div>下第一個子元素:last-child選取每個父元素下的最后1個子元素集合元素$("div :last-child")選取每個<div>下最后一個子元素:only-child選取只有唯一子元素的元素的子元素集合元素$("div :only-child")選擇只有一個子元素的<div>元素這里值得一提的是:nth-child()，這個選擇器的詳細功能如下：nth-child(even) 能選取每個父元素下的索引值是偶數(shù)的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論