項目一javascript程序設計1_第1頁
項目一javascript程序設計1_第2頁
項目一javascript程序設計1_第3頁
項目一javascript程序設計1_第4頁
項目一javascript程序設計1_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、目錄第一章javascript程序設計21.1了解javascript腳本語言21.1.1 javascript簡介21.1.2 javascript的特點21.1.3 JavaScript的工作原理31.1.4 簡單的javascript程序開發(fā)步驟(見1-1案例源碼)31.2 javascript語法基礎51.2.1 數(shù)據(jù)類型51.2.2 變量51.2.3 注釋61.2.4 運算符71.2.5 數(shù)據(jù)類型轉換101.2.6 常用語句111.2.7 函數(shù)161.3 javascript對象17第二章jquery基礎172.1 jquery的基本概念182.1.1 jquery步驟182.1.2

2、 jquery對象與dom節(jié)點轉換關系182.2 選擇器18基本選擇器18層疊選擇器192.2.3 過濾選擇器19第三章jquery操作dom對象263.1 遍歷元素273.1.1 獲得元素數(shù)組的項273.1.2 使用each()方法遍歷選擇器所有匹配的元素273.1.3 find()、filter()函數(shù)293.1.4 has()函數(shù)303.2 獲取和設置元素內(nèi)容303.3 獲取和設置html元素的屬性313.4創(chuàng)建新的元素333.5將新元素添加至對象上33內(nèi)部插入333.5.2 外部插入34包裹34替換34刪除35復制35第四章jquery的表單編程36第一章javascript程序設計h

3、tml代碼所表示的文檔是一種靜態(tài)文檔，幾乎沒有交互功能，很難使頁面成為動態(tài)頁面。增加腳本語言，可使數(shù)據(jù)發(fā)送到服務器之前先進行處理和校驗，動態(tài)地創(chuàng)建新的Web內(nèi)容，更重要的是，引入腳本語言使我們有了事件驅(qū)動的軟件開發(fā)環(huán)境。 javascript就是一種腳本語言。1.1了解javascript腳本語言要想學好javascript技術，必先了解javascript的概念。 javascript簡介javaScript的原名叫LiveScript，是NetScape公司在引入Sun公司有關Java的程序設計概念后，重新設計而更名的。JavaScript是一種可以嵌入HTML文檔的，基于對象并

4、具有某些面向?qū)ο筇卣鞯哪_本語言。 說明：瀏覽器端腳本語言除了JavaScript，還有VBScript和Jscript，后兩個是Microsoft公司設計的，欲了解相關內(nèi)容，可到Microsoft公司網(wǎng)站查詢。本教材只介紹JavaScript。 javascript的特點javaScript是一種基于對象(Object-Based)和事件驅(qū)動(Event Driven)，由瀏覽器解釋執(zhí)行的，具有安全性能的客戶端腳本語言。使用它的目的是與HTML、Java Applet（Java小程序）一起實現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互作用，從而可以開發(fā)客戶端的應用程序等。它是通

5、過嵌入在HTML語言中實現(xiàn)的。它的出現(xiàn)彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個基本特點：  是一種腳本語言 ：采用小程序段的方式實現(xiàn)編程，以嵌入的方式，與HTML標識結合在一起，方便用戶的使用操作。  基于對象的語言：這里的對象，是指客戶機、瀏覽器、網(wǎng)頁文檔。也就是說，JavaScript以類似C、Java的語法，以客戶機、瀏覽器、網(wǎng)頁文檔、文檔內(nèi)部各種以標記表示的HTML元素為對象，以控制這些對象為目標，進而控制整個客戶端的一種客戶端腳本編程語言。  簡單 ：首先它是一種基于Java基本語句和控制流之上的簡單而

6、緊湊的設計, 從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數(shù)據(jù)類型。  安全 ：正常情況下，它不允許訪問服務器本地的硬盤，因此不能將數(shù)據(jù)存入到服務器上；不允許對網(wǎng)絡文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。 動態(tài) ：它可以直接對用戶的輸入做出響應，無須經(jīng)過Web服務程序。它對用戶的響應，是采用以事件驅(qū)動的方式進行的。事件(Event)可分為兩類，一是用戶對瀏覽器進行的某種操作，比如按下鼠標、移動窗口、選擇菜單等，可以視為用戶事件；二是系統(tǒng)事件，如時間的時刻變化等。當事件發(fā)生后，會向瀏

7、覽器發(fā)送相應的消息（用戶消息或系統(tǒng)消息），根據(jù)消息，瀏覽器可能會做出相應的響應，這種響應稱為事件驅(qū)動，也叫消息驅(qū)動。  跨平臺 ：JavaScript代碼由瀏覽器解釋執(zhí)行，與操作環(huán)境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執(zhí)行，從而實現(xiàn)了“編寫一次，走遍天下”的夢想。實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務器通道，通過自己的電腦即可完成所有的事情。 JavaScript 和 Java 很類似，但并不一樣。Java 是一種比JavaScr

8、ipt 更復雜許多的程序語言，而 JavaScript 則是相當容易了解的語言。許多 Java 的特性在 Java Script 中并不支持。 JavaScript的工作原理 javaScript編程可以完成諸如構造動畫，動態(tài)菜單等使頁面更加生動、活潑的任務，還可以對客戶機文件系統(tǒng)、注冊表等進行操作，如對文件夾、文件的建立，復制，刪除，修改注冊表，鎖定注冊表，鎖定瀏覽器等等，有許多隨著網(wǎng)頁打開而運行的病毒就是含在網(wǎng)頁中的javaScript程序在作怪。由此可見，javaScript是控制客戶機的精靈。 在B/S程序中，為了均衡負載，減輕服務器的計算負擔，凡是不需要

9、服務器程序做的工作，可盡量交給客戶端程序（如javaScript程序）去做。我們用HTML標記構造出用戶界面，用戶通過界面輸入數(shù)據(jù)，向瀏覽器請求數(shù)據(jù)等操作。在用戶輸入數(shù)據(jù)，或者是輸入完畢，將數(shù)據(jù)向服務器提交的時候，對數(shù)據(jù)的檢驗等任務完全可交給JavaScript程序來完成。html+javascript的瀏覽器與服務器的交互原理 簡單的javascript程序開發(fā)步驟(見1-1案例源碼)打開記事本，輸入如下的代碼<html><head><script language="javascript">function c3() alert(&q

10、uot;第一次學習javascript，我一定會加油！");</script></head><body><input type="button" id="bt" onclick="c3()" value="點擊"/></body></html>在記事本中輸完以后，打開保存對話框，選擇保存路徑，文件名命名為”li1.html”，點擊保存。打開該html文件，就可以看到運行的效果了。分析：<script language="

11、;javascript"></script>是javascript框架代碼，定義函數(shù)function c3()alert("第一次學習javascript，我一定會加油！");，在html中，onclick為單擊事件，調(diào)用c3()函數(shù)。擴展知識：javascript程序使用js文件(見1-2案例源碼)把上面的javascript程序改為使用js文件，效果一樣。js文件:function c3() alert("第一次學習javascript，我一定會加油！");html文件:<html><head>&l

12、t;script src="2-1.js"></script></head><body><input type="button" id="bt" onclick="c3()" value="點擊"/></body></html>1.2 javascript語法基礎本節(jié)介紹javascript基本語法，包括數(shù)據(jù)類型、變量、注釋和運算符等，了解這些基本語法是使用javascript編程的基礎。 數(shù)據(jù)類型類型具體描述unde

13、fined當聲明的變量未初始化時，該變量的默認值是 undefinednull空值，如果引用一個沒有定義的變量，則返回空值boolean布爾類型，包含true和false；也可以用1和0表示。string字符串類型，由單引號或雙引號括起來的字符number數(shù)值類型，可以是32位、64位整數(shù)或浮點數(shù)javascript原始的數(shù)據(jù)類型 變量變量是內(nèi)存中命名的存儲位置，其主要作用是存取數(shù)據(jù)，提供存放信息的容器。javascript變量名的命名規(guī)則：Ø 第一個字符必須是字母、下劃線（_）或美元符號（$）。Ø 其他字符可以是下劃線（_）、美元符號（$）、任何字母或數(shù)字字符。Ø

14、; 不能使用javascript中的關鍵字作為變量名。定義變量的方法有兩種：Ø 在變量第一次賦值時定義。如name=”name”;alert(name);Ø 使用var關鍵字定義變量。如var name=”name”,age=23;/定義兩個變量用逗號隔開。變量分為局部變量和全局變量：Ø 局部變量是在函數(shù)內(nèi)部定義，作用域為局部變量定義的地方開始到該函數(shù)結束而結束。Ø 全局變量是在函數(shù)外部定義，作用域為全局變量定義的地方開始到javascript結束而結束。如果在程序中出現(xiàn)相同名的局部變量和全局變量，在函數(shù)中局部變量起作用。項目練習（見案例源碼1-3）&l

15、t;html><head><script language="javascript"> var x=0;/定義一個全局變量function c3() var x=1;/定義一個局部變量 alert(x);/出現(xiàn)相同的全局變量和局部變量，局部變量起作用。</script></head><body><input type="button" id="bt" onclick="c3()" value="點擊"/></bo

16、dy></html>運行效果為:擴展知識：使用typeof運算符可以獲得變量的數(shù)據(jù)類型。var temp;document.write(typeof temp);/輸出”undefined”。temp=”hello”;document.write(typeof temp);/輸出”String”。temp=100;document.write(typeof temp);/輸出”Number”。分析：document表示網(wǎng)頁對象，document.write()表示在網(wǎng)頁上輸出括號中的數(shù)據(jù)。 注釋注釋部分不參與程序運行，只起到對代碼的解釋作用。/是單行注釋，從”/”開始到行尾均

17、表示注釋。/*/是多行注釋，從”/*”開始到”*/”結束。見如下的代碼：var temp;document.write(typeof temp);/輸出”undefined”。temp=”hello”;document.write(typeof temp);/*給temp賦值為字符串”hello”，就知道temp為字符串變量了，輸出typeof temp的類型為String*/。 運算符運算符可以指定變量和值的運算符操作，是構成表達式的重要元素。優(yōu)先級 運算符 描述結合性由高到低排序()括號從左到右+ -遞增或遞減從右到左!邏輯非從右到左*   

18、;/   %乘法、除法、取模從左到右+   -加法、減法從左到右+拼接從左到右<     <=小于、小于等于從左到右>     >=大于、大于等于從左到右= =     !=等于、不等于從左到右= = =     != =等同（類型相同）、不等同從左到右&按位與從左到右|按位或 按位異或 

19、;按位非 <<按位左移 >>按位右移 >>>按位右移，左邊以0填充 &&邏輯與從左到右| |邏輯或從左到右?:三元條件表達式從右到左=  +=  -=  *=  %=  <<=  >>=賦值從右到左一元運算符位運算符具體描述delete刪除對以前定義的對象屬性或方法的引用。例如：var o = new Object; / 創(chuàng)建Object對象odelete

20、 o; / 刪除對象ovoid出現(xiàn)在任何類型的操作數(shù)之前，作用是舍棄運算數(shù)的值，返回undefined作為表達式的值。var x=1,y=2;document.write(void(x+y); /輸出：undefined+增量運算符。了解C語言或Java的讀者應該認識此運算符。它與C語言或Java中的意義相同，可以出現(xiàn)在操作數(shù)的前面（此時叫做前增量運算符），也可以出現(xiàn)在操作數(shù)的后面（此時叫做后增量運算符）。+運算符對操作數(shù)加1.，如果是前增量運算符，則返回加1后的結果；如果是后增量運算符，則返回操作數(shù)的原值，再對操作數(shù)執(zhí)行加1操作。例如：var iNum = 10;document.write

21、(iNum+);/輸出 "10"document.write(+iNum);/輸出 "12"-減量運算符。它與增量運算符的意義相反，可以出現(xiàn)在操作數(shù)的前面（此時叫做前減量運算符），也可以出現(xiàn)在操作數(shù)的后面（此時叫做后減量運算符）。-運算符對操作數(shù)減1.，如果是前減量運算符，則返回減1后的結果；如果是后減量運算符，則返回操作數(shù)的原值，再對操作數(shù)執(zhí)行減1操作。例如：var iNum = 10;document.write(iNum-);/輸出 "10"document.write(-iNum);/輸出 "8"+一元加法

22、運算符，可以理解為正號。它把字符串轉換成數(shù)字。例如：var sNum = "100"document.write(typeof sNum);/輸出 "string"var iNum = +sNum;document.write(typeof iNum);/輸出 "number"-一元減法運算符，可以理解為負號。它把字符串轉換成數(shù)字，同時對該值取負。例如：var sNum = "100"document.write(typeof sNum);/輸出 "string"var iNum = -sNum

23、;document.write(iNum);/輸出 "-100"document.write(typeof iNum);/輸出 "number"算術運算符+ - * /賦值運算符復合賦值運算符具 體 描 述*=乘法/賦值，例如：var iNum = 10;iNum *= 2;document.write(iNum);/輸出 "20"/=除法/賦值，例如：var iNum = 10;iNum /= 2;document.write(iNum);/輸出 "5"%=取模/賦值，例如：var iNum = 10;iNum

24、%= 7;document.write(iNum);/輸出 "3"+=加法/賦值，例如：var iNum = 10;iNum += 2;document.write(iNum);/輸出 "12"-=減法/賦值，例如：var iNum = 10;iNum -= 2;document.write(iNum);/輸出 "8"<<=左移/賦值，關于位運算符將在稍后介紹>>=有符號右移/賦值>>>=無符號右移/賦值關系運算符關系運算符具 體 描 述=等于運算符（兩個=）。例如a=b，如果a等于b，則返回

25、True；否則返回False=恒等運算符（3個=）。例如a=b，如果a的值等于b，而且它們的數(shù)據(jù)類型也相同，則返回True；否則返回False。例如：var a=8;var b="8"a=b; /truea=b; /false!=不等運算符。例如a!=b，如果a不等于b，則返回True；否則返回False!=不恒等，左右兩邊必須完全不相等（值、類型都相等）才為true< 小于運算符> 大于運算符<=小于等于運算符>=大于等于運算符位運算符運算符函數(shù)示例運算規(guī)則&位與x & y如果兩個相應位都為1則該位返回1|位或x

26、 | y如果兩個相應位有一個為1則返回1位異或x y如果兩個相應位只有一個為1則返回1位非x將運算符按位取反，將1變0，0變1<<左移x << y將二進制數(shù)x向左移y位，右邊補0>>右移x >> y將二進制數(shù)x向右移y位，移出位丟棄，左邊以符號為填充>>>右移補零x >>> b將二進制數(shù)x向右移y位，移出位丟棄，左邊以0填充邏輯運算符邏輯運算符具 體 描 述&&邏輯與運算符。例如a && b，當a和b都為True時等于True；否則等于False|邏輯或運算符。例如a | b，當

27、a和b至少有一個為True時等于True；否則等于False!邏輯非運算符。例如!a，當a等于True時，表達式等于False；否則等于True條件運算符格式：條件表達式？表達式：表達式    示例：x ? y : z   如果x為真，表達式的值為y，否則表達式的值變?yōu)閦    big = (x > y) ? x : y   如果x大于y，則將x賦給變量big，否則將y賦給變量big數(shù)據(jù)類型轉換String()  轉換為字符串類型Number()  轉換為數(shù)字類型Boolean()  轉換為布爾類型

28、 例如： var result = Number(num1)+Number(num2) /將num1和num2轉為為數(shù)字類型后相加后的值賦給result parseInt：將字符串轉換為整數(shù)。從字符串的開頭開始解析，在第一個非整數(shù)的位置停止解析，并返回前面讀到所有的整數(shù)。如果字符串不是以整數(shù)開頭的，將返回NaN。如：parseInt（“150 hi”）返回的值是：150，parseInt("hi")返回的值是：NaN。 parseFloat：將字符串轉換為浮點數(shù)。 從字符串的開頭開始解析，在第一個非整數(shù)的位置停止解析，并返回前面讀到所有的整數(shù)。

29、如果字符串不是以整數(shù)開頭的，將返回NaN。如：parseFloat("15.5 hi") 返回的值是：15.5，parseFloat("hi 15.5")返回的值是：NaN。 eval：將字符串作為javascript表達式進行計算，并返回執(zhí)行結果，如果沒有結果則返回undefined。例如：var str="5+4" var num1=eval(str); /eval()函數(shù)將"5+4"作為javascript指令計算字符串表達式。變量num1的值 常用語句javascript的常用語句包括分支語句和循

30、環(huán)語句。分支語句if語句語法：if (條件)   條件成立時執(zhí)行代碼案例：<script type="text/javascript">var d=new Date();var time=d.getHours();if (time<10) document.write("<b>早上好！</b>");</script>if.else語句語法：if (條件)條件成立時執(zhí)行此代碼else條件不成立時執(zhí)行此代碼案例：<script type="

31、text/javascript">var d = new Date();var time = d.getHours();if (time < 10) document.write("早上好!")；elsedocument.write("中午好或者下午好!")；</script>If.else if.else 語句語法：if (條件1)條件1成立時執(zhí)行代碼else if (條件2)/隱含前面條件的反條件條件2成立時執(zhí)行代碼else條件1和條件2均不成立時執(zhí)行代碼案例：<script type=&q

32、uot;text/javascript">var d = new Date();var time = d.getHours();if (time<10)document.write("<b>早上好！</b>");else if (time>10 && time<16)document.write("<b>中午好</b>");elsedocument.write("<b>下午好!</b>");</script&

33、gt;Switch 語句語法：switch(n)      case 1:     執(zhí)行代碼塊 1     break   case 2:     執(zhí)行代碼塊 2     break   default:     如果n即不是1也不是2，則執(zhí)行此代碼 

34、0; 執(zhí)行原理：switch 后面的 (n) 可以是表達式，也可以（并通常）是變量。然后表達式中的值會與 case 中的數(shù)字作比較，如果與某個 case 相匹配，那么其后的代碼就會被執(zhí)行。break 的作用是防止代碼自動執(zhí)行到下一行。案例：<script type="text/javascript">var d=new Date();theDay=d.getDay();switch (theDay) case 5: document.write("Finally Friday"); break; case 6: document.write(

35、"Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!");</script>循環(huán)語句javascript提供如下幾種循環(huán)語句：while語句語法：while(條件) 循環(huán)主體案例：輸出1到5<script type="text/javascript"> var i =

36、0 ;while (i <= 5) document.write("數(shù)字是 " + i) ;document.write("<br>") ;i+ ; </script>dowhile語句語法：do 循環(huán)主體while(條件)案例：輸出1到5<script type="text/javascript"> i = 0 ;do document.write( i + "<br>") ;i+ ; while (i <= 5) </script>for語

37、句語法：for(表達式1;表達式2;表達式3) 循環(huán)主體;分析：第一次循環(huán)執(zhí)行順序：表達式1、表達式2；以后每次執(zhí)行循環(huán)順序：表達式3、表達式2。如果表達式2為真，執(zhí)行循環(huán)主體，否則退出循環(huán)。做循環(huán)語句的時候，掌握一定的方法，分為如下的三步：第一步：分析出循環(huán)變量。第二步：分析出循環(huán)變量的范圍。第三步：分析出循環(huán)主體及與循環(huán)變量的關系。案例：輸出1到5<script type="text/javascript"> for (i = 0; i <= 5; i+) document.write("數(shù)字是 " + i) document.wr

38、ite("<br>") </script>forin語句語法：for(變量 in 集合) 循環(huán)主體案例：<script type="text/javascript"> var x ;/這樣定義數(shù)組也可以var mycars=“寶馬”,” 奔馳”,” 賓利”;var mycars = new Array() ;mycars0 = "寶馬" ;mycars1 = "奔馳" ;mycars2 = "賓利" ;for (x in mycars) document.wr

39、ite(mycarsx + "<br>") ; </script>擴展：在循環(huán)語句中使用break和continue語句。continue語句為結束本次循環(huán)繼續(xù)下一次循環(huán)。break語句為結束這個循環(huán)語句。案例：<script type="text/javascript"> for (i = 0; i <= 10; i+) if(i%2!=0) continue; if(i=8) break;document.write("數(shù)字是 " + i) document.write("<

40、;br>") </script>運行結果為：數(shù)字是 0數(shù)字是 2數(shù)字是 4數(shù)字是 6 函數(shù)函數(shù)是由事件驅(qū)動的或者當它被調(diào)用時執(zhí)行的可重復使用的代碼塊。定義函數(shù)的語法格式：function 函數(shù)名() 函數(shù)主體分析：定義函數(shù)的關鍵字為function，函數(shù)名要符合命名規(guī)則，函數(shù)名后要跟一對括號。帶參數(shù)的函數(shù)語法格式為：function 函數(shù)名(參數(shù)1,參數(shù)2，) 函數(shù)主體分析：函數(shù)的參數(shù)之間用逗號(，)隔開。有返回值的函數(shù)語法格式：function 函數(shù)名() var x=5; return x;分析：使用return返回函數(shù)的值。案例：輸出兩個數(shù)字的乘積(見案例源碼

41、1-4)<html><head><script type="text/javascript"> function cj(x,y)/定義了cj函數(shù) return x*y; var kk=cj(5,6);/調(diào)用了cj函數(shù),變量kk為全局變量。 document.write(kk);</script></head></html>1.3 javascript對象對象是帶有屬性和方法的特殊數(shù)據(jù)類型（屬性稱為變量，方法稱為函數(shù)）。訪問對象的屬性語法為：對象屬性。訪問對象的方法語法為：對象方法()。對象的知識在后面的

42、學習中慢慢接觸，在這里就不作詳細說明了。第二章jquery基礎2.1 jquery的基本概念jquery是一個javascript框架，其主要思想是，通過選擇器查找到對應的節(jié)點，然后對這個節(jié)點進行封裝(封裝成一個jquery對象)。通過調(diào)用jquery對象的屬性或者方法來實現(xiàn)對節(jié)點的操作。這樣做的好處是：第一，將不同的瀏覽器之間的差異屏蔽起來了。第二，代碼更加簡潔，維護方便。 jquery步驟使用選擇器查找節(jié)點，并把節(jié)點轉換成對象。調(diào)用jquery對象的屬性和方法。 jquery對象與dom節(jié)點轉換關系dom節(jié)點轉換成jquery對象調(diào)用$()函數(shù)，比如$(obj);jquery對象轉換成do

43、m節(jié)點方式一:  jquery對象.get(0)方式二: jquery對象.get()02.2 選擇器jquery模仿css選擇器語法，創(chuàng)建的一套用于查找節(jié)點的規(guī)則?；具x擇器選擇表達式說明舉例#id根據(jù)給定的ID匹配一個元素用#$("#testDiv2")  獲取ID為testDiv2的元素.class根據(jù)給定的類匹配元素(也就是取class的值)用.$(".myDiv")    獲取class為myDiv的一組元素element根據(jù)給定的元素名匹配所有元素,直接寫上元素名例如(p,a,input,di

44、v等)$("div")    獲取所有的div元素selector1,selector2,selectorN將每一個選擇器匹配到的元素合并后一起返回,選擇器可以是id,class,element用,隔開$("#testDiv2,p") $("p,span,div.myDiv") 獲取所有的p,span和class為myDiv的元素*選擇所有的元素$("*")案例代碼<input type="text" id="ID" value="

45、;根據(jù)ID選擇" /><a>根據(jù)元素名稱選擇</a><input type="text" class="classname" value="根據(jù)元素css類名選擇" />$("#ID").val();$("a").text();$(".classname").val();層疊選擇器選擇表達式說明舉例前元素 后元素在前元素的子孫里篩選出后元素$(“div span”)從div的子孫里篩選出所有span元素前元素>后元素在

46、前元素的兒子里篩選出后元素$(“div>span”)從div的兒子里篩選出所有span元素前元素+后元素選取前元素的直接下一個后元素兄弟$(“.one+div”)選取class為one的直接下一個<div>兄弟元素前元素后元素從前元素的后面兄弟里篩選出后元素$(“#twodiv”)選取Id為two的元素后面的所有<div>兄弟元素。案例代碼<div id="divTest">        <input type="text" value

47、="投資" />        <input id="next" type="text" />        <input type="text"  value="擔當" />        <input type="text&quo

48、t; title="學習" value="學習" />        <a>1</a>        <a>2</a></div>/得到div中的a標簽內(nèi)容 結果為12$("#divTest a").text();/輸出div直接子節(jié)點 結果為投資$("#divTest>input").val();/輸出i

49、d為next的后一個同級別元素 結果為擔當$("#next+input").val();/同上，并且是有title的元素 結果為學習$("#nexttitle").val();2.2.3 過濾選擇器基本過濾選擇器(見案例代碼2-3.htm)選擇表達式說明舉例:first匹配找到的第一個元素$("div:first"):last匹配找到的最后一個元素$("div:last"):eq(index)匹配一個給定索引值的元素,當然要存在才可以找得到,索引從0開始$("div:eq(1)"):gt(ind

50、ex)匹配所有大于給定索引值的元素$("div:gt(0)")    查找第1個以后的元素:lt(index)匹配所有小于給定索引值的元素$("div:lt(2)")     查找第一行和第二行的元素:even匹配所有索引值為偶數(shù)的元素，從 0 開始計數(shù)$("div:even") 查找第1,3,5個div:odd匹配所有索引值為奇數(shù)的元素，從 0 開始計數(shù)$("div:odd") 查找第2,4個div:not(selector)去除所有與給定選擇

51、器匹配的元素selector為表達式,可以是屬性里面的一個值$("input:not(:checked)") 查找所有未選中的input 元素注 :checked為自定義篩選選擇器,后面會講到:header匹配如 h1, h2, h3之類的標題元素$(":header").css("background", "#EEE"); 添加樣式:animated匹配所有正在執(zhí)行動畫效果的元素暫無例子案例代碼<div id="divTest">    <ul&

52、gt;        <li>投資</li>        <li>理財</li>        <li>成熟</li>        <li>擔當</li>     

53、60;  <input type="radio" value="學習" checked="checked" />        <input type="radio" value="不學習" />    </ul></div>/第一個li內(nèi)容 結果為投資$("li:first").text();/最后一個li內(nèi)容 結果為

54、擔當$("li:last").text();/input未被選中的值 結果為不學習$("li input:not(:checked)").val();/索引為偶數(shù)的li 結果為投資 成熟$("li:even").text();/索引為奇數(shù)的li 結果為理財 擔當$("li:odd").text();/索引大于2的li的內(nèi)容 結果為擔當$("li:gt(2)").text();/索引小于1的li的內(nèi)容 結果為投資$("li:lt(1)").text();內(nèi)容過濾選擇器選擇表達式

55、說明舉例:contains(text)匹配包含給定文本的元素,只要里面出現(xiàn)即可$("p:contains('段落')") 找?guī)в卸温渥謽拥膒元素:empty匹配所有不包含子元素或者文本的空元素$("div:empty"):has(selector)匹配含有選擇器所匹配的元素的元素$("div:has('p')"):parent匹配含有子元素或者文本的元素$("div:parent")案例代碼<div id="Test">  

56、0; <ul>        <li>hyip投資</li>        <li>hyip</li>        <li></li>        <li>理財</li>   &

57、#160;    <li><a>投資</a></li>    </ul></div>   /包含hyip的li的內(nèi)容 結果為hyip投資 hyip$("li:contains('hyip')").text();/內(nèi)容為空的li的后一個li內(nèi)容 結果為理財$("li:empty+li").text();/包含a標簽的li的內(nèi)容 結果為投資$("li:has(a)"

58、;).text();可見性過濾選擇器選擇器說明舉例:hidden匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會被匹配到$("div:hidden") :visible匹配所有的可見元素$("div:visible")/元素來匹配$(".divH:visible")/根據(jù)class來匹配 案例代碼<ul>    <li>可見</li>    <li style="di

59、splay:none;">不可見</li></ul>/不可見的li的內(nèi)容 結果為不可見$("li:hidden").text();/可見的li的內(nèi)容 結果為可見$("li:visible").text();屬性過濾選擇器名稱說明舉例attribute匹配包含給定屬性的元素查找所有含有 id 屬性的 div 元素: $("divid")attribute=value匹配給定的屬性是某個特定值的元素查找所有 name 屬性是 newsletter 的 input 元素:$("in

60、putname='newsletter'").attr("checked", true);attribute!=value匹配給定的屬性是不包含某個特定值的元素查找所有 name 屬性不是 newsletter 的 input 元素: $("inputname!='newsletter'").attr("checked", true);attribute=value匹配給定的屬性是以某些值開始的元素$("inputname='news'")attr

61、ibute$=value匹配給定的屬性是以某些值結尾的元素查找所有 name 以 'letter' 結尾的 input 元素: $("inputname$='letter'")attribute*=value匹配給定的屬性是以包含某些值的元素查找所有 name 包含 'man' 的 input 元素: $("inputname*='man'")attribute1attributeN復合屬性選擇器，需要同時滿足多個條件時使用。找到所有含有 id 屬性，并且它的 name

62、屬性是以 man 結尾的: $("inputidname$='man'")案例代碼<input type="text" name="hyipinvest" value="hyip投資" /><input type="text" name="investhyip" value="投資hyip" /><input type="text" name="google"

63、value="HYIP" />/name為hyipinvest的值 結果為hyip投資alert($("inputname='hyipinvest'").val();/name以hyip開始的值 結果為hyip投資alert($("inputname='hyip'").val();/name以hyip結束的值 結果為投資hyipalert($("inputname$='hyip'").val();/name包含oo的值 結果為HYIPalert($("

64、inputname*='oo'").val();子元素過濾選擇器名稱說明舉例: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-chi

65、ld(3n+2)在每個 ul 查找第 2 個li: $("ul li:nth-child(2)"):first-child匹配第一個子元素':first' 只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素在每個 ul 中查找第一個 li: $("ul li:first-child"):last-child匹配最后一個子元素':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素在每個 ul 中查找最后一個 li: $("ul li:last-child")

66、:only-child如果某個元素是父元素中唯一的子元素，那將會被匹配如果父元素中含有其他元素，那將不會被匹配。在 ul 中查找是唯一子元素的 li: $("ul li:only-child")案例代碼表單對象屬性過濾選擇器名稱說明解釋:input匹配所有 input, textarea, select 和 button 元素查找所有的input元素: $(":input"):text匹配所有的文本框查找所有文本框: $(":text"):password匹配所有密碼框查找所有密碼框: $(":password"):radio匹配所有單選按鈕查

溫馨提示

  • 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. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論