jquery_02選擇器_第1頁
jquery_02選擇器_第2頁
jquery_02選擇器_第3頁
jquery_02選擇器_第4頁
jquery_02選擇器_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、1. 一切從選擇器開始 操作之前，必先選中！ 選擇器語法： $(expression 表達式 )jQuery內部提供了9種選擇器n 基本選擇器n 層級選擇器n 基本過濾選擇器n 內容過濾選擇器n 可見性過濾選擇器n 屬性過濾選擇器n 子元素過濾選擇器n 表單過濾選擇器n 表單對象屬性過濾選擇器如果CSS3 選擇器有基礎 ，JQuery選擇器 非常好學！ 1.1. 基本選擇器 基本選擇器，是jquery所有選擇器的基礎，通過元素標簽的id屬性、class屬性、標簽名稱進行選擇。l #id 根據(jù)id屬性查找一個元素 例如：$("#mydiv")l .class 根據(jù)class屬

2、性查找元素 例如：$(".myClass"); l element 根據(jù)元素標簽名稱查找所有元素 例如： $("div"); l * 匹配所有元素 例如 $("*"); l selector1,selector2,selectorN 將每一個選擇器匹配到的元素合并后一起返回 例如：$(“div, p); $(“#itcast”) 選擇id屬性為itcast的元素$(“.dellink”) 選擇class屬性為dellink的元素$(“p”) 選擇標簽名稱為p的元素$(“p,div”) 選擇頁面所有p元素和div元素 【示例練習】HTM

3、L代碼：<body><div>DIVAAAA</div><div class="itcast">DIVBBBB</div><div>DIVCCCC</div><div>DIVDDDD</div><div class="itcast">DIVEEEE</div><div id="foo">DIVFFFF</div><p>PAAAA</p><p class

4、="itcast">PBBBB</p><p>PCCCC</p></body>需求：/ 1通過each() 在每個div元素前 加入 “傳智播客”/ 2通過size() / length 打印頁面中 class屬性為 itcast 的元素數(shù)量/ 3通過index() 打印 id屬性為foo 的div標簽 是頁面內的第幾個div標簽腳本代碼：1.2. 層次選擇器層次選擇器是根據(jù)DOM元素的層級關系，通過后代元素、子元素、兄弟元素進行選擇兩個元素位置關系 n 祖先n 后代n 父元素n 子元素n 兄弟元素l ancestor d

5、escendant 獲取ancestor元素下邊的所有元素 $("form input") l parent > child 獲取parent元素下邊的所有直接child 子元素 $("form > input") l prev + next 獲取緊隨pre元素的后一個兄弟元素 $("label + input") l prev siblings 獲取pre元素后邊的所有兄弟元素 $("form input") 空格 ： 后代元素（直接子元素、間接子元素 ）大于> ： 直接子元素 + 緊隨下一個兄

6、弟元素 所有后邊的兄弟元素 【事例代碼】HTML代碼：<body><div class="itcast"><a>div link</a><p>info <a>p link</a></p></div><a>link</a><p class="itcast"><a>p link</a></p><a>link</a></body>需求：/ 1將cl

7、ass屬性值為itcast的元素下所有a元素字體變?yōu)榧t色/ 2將class屬性值為itcast的元素下直接a元素字體變?yōu)樗{色/ 3將div元素后所有兄弟a元素，字體變?yōu)辄S色，大小變?yōu)?0px腳本代碼：1.3. 過濾器過濾器 在基本選擇器和層次選擇器 選中一批元素后，通過過濾選擇器縮小選中范圍 ！通常語言： 編寫 “:” 添加過濾條件 按照不同的過濾規(guī)則，過濾選擇器被分為七類l 基本過濾選擇器l 內容過濾選擇器l 可見性過濾選擇器l 屬性過濾選擇器l 子元素過濾選擇器l 表單過濾選擇器l 表單對象屬性過濾選擇器1.3.1. 基本過濾選擇器 大部分都是根據(jù)元素位置 索引，縮小選中范圍 l :fir

8、st 選取第一個元素 $("tr:first") l :last 選取最后一個元素 $("tr:last") l :not(selector) 去除所有與給定選擇器匹配的元素 $("input:not(:checked)") l :even 選取所有元素中偶數(shù)索引的元素，從 0 開始計數(shù) $("tr:even") l :odd 選取所有元素中奇數(shù)索引的元素 ，從 0 開始計數(shù) $("tr:odd") l :eq(index) 選取指定索引的元素 $("tr:eq(1)") l

9、 :gt(index) 選取索引大于指定index的元素 $("tr:gt(0)") l :lt(index) 選取索引小于指定index的元素 $("tr:lt(2)") l :header 選取所有的標題元素 如：h1, h2, h3 $(":header")l :animated 匹配所有正在執(zhí)行動畫效果的元素【示例代碼】HTML代碼：<h1>表格信息</h1><h2>這是一張商品表</h2><table border="1" width="60

10、0"><tr><th>商品編號</th><th>商品名稱</th><th>售價</th><th>數(shù)量</th></tr><tr><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr><tr><td>002</td><td>洗衣機</td&

11、gt;<td>2000</td><td>50</td></tr><tr><td>003</td><td>熱水器</td><td>1500</td><td>20</td></tr><tr><td>004</td><td>手機</td><td>2188</td><td>200</td></tr><

12、/table><div>slideDown(speed, callback) 概述通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調函數(shù)。這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery1.3中，上下的padding和margin也會有動畫，效果更流暢。 參數(shù)speedString,Number三種預定速度之一的字符串("slow", "normal", or"fast")或表示動畫時長的毫秒數(shù)值(如：1000) callback (可選)Func

13、tionFunction在動畫完成時執(zhí)行的函數(shù)</div><div>fadeOut(speed, callback) 概述通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果，并在動畫完成后可選地觸發(fā)一個回調函數(shù)。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。 參數(shù)speedString,Number三種預定速度之一的字符串("slow", "normal", or"fast")或表示動畫時長的毫秒數(shù)值(如：1000) callback (可選)Function在動畫完成時執(zhí)行的函數(shù)&

14、lt;/div>需求：/ 1設置表格第一行，顯示為紅色/ 2設置表格除第一行以外 顯示為藍色/ 3設置表格奇數(shù)行背景色 黃色/ 4設置表格偶數(shù)行背景色 綠色/ 5設置頁面中所有標題 顯示為灰色/ 6設置頁面中正在執(zhí)行動畫效果div背景黃色，不執(zhí)行動畫div背景綠色腳本代碼：1.3.2. 內容過濾選擇器 根據(jù)元素或者子元素內部文本內容進行選中 l :contains(text) 選取包含text文本內容的元素 $("div:contains('John')") l :empty 選取不包含子元素或者文本節(jié)點的空元素 $("td:empty&qu

15、ot;) l :has(selector) 選取含有選擇器所匹配的元素的元素 l $("div:has(p)").addClass("test"); l :parent 選取含有子元素或文本節(jié)點的元素 $("td:parent") 建議 :contains(text) 、:empty【示例代碼】HTML代碼：<div>今天是個晴天</div><div>明天要去傳智播客學 java</div><div><span>JavaScript</span> 是網

16、頁開發(fā)中腳本技術</div><div>Ajax 是異步的 JavaScript和 XML</div><div><p>jQuery</p>是 JavaScript一個 輕量級框架</div><div></div>需求：/ 1設置含有文本內容 ”傳智播客” 的 div 的字體顏色為紅色/ 2設置沒有子元素的div元素 文本內容 ”這是一個空DIV“/ 3設置包含p元素 的 div 背景色為黃色/ 4設置所有含有子元素的span字體為藍色腳本代碼：1.3.3. 可見度過濾選擇器 選中可見或不可

17、見【隱藏】的元素 l :hidden 選取所有不可見元素 $("tr:hidden") 匹配所有 display:none 、input hidden 元素區(qū)分 display 和 visibility 區(qū)別l :visible 選取所有可見的元素 $("tr:visible") 擴展： CSS如何設置一個元素不可見 display:none; 頁面沒有體積visibility :hidden ; 頁面有體積 可見度過濾選擇器 ： 匹配所有display:none 或者 input hidden 元素 【示例代碼】HTML代碼：<form>&

18、lt;input type="hidden" /> <input type="text" name="xxx"style="display: none;" /></form><table><tr><td>洗衣機</td></tr><tr><td>熱水器</td></tr><tr style="display: none"><td>電冰箱

19、</td></tr></table>需求：1 為表單中所有隱藏域 添加 class屬性，值為itcast 2 設置table所有 可見 tr 背景色 黃色3 設置table所有 隱藏tr 字體顏色為紅色，顯示出來 ，并輸出tr中文本值腳本代碼：1.3.4. 屬性過濾選擇器 基于元素屬性過濾 l attribute 選取擁有此屬性的元素 $("divid") l attribute=value 選取指定屬性值為value的所有元素: $("divid=mydiv") l attribute !=value 選取屬性值不為

20、value的所有元素 l attribute = value 選取屬性值以value開始的所有元素 l attribute $= value 選取屬性值以value結束的所有元素 l attribute *= value 選取屬性值包含value的所有元素 l selector1 selector2selectorN 復合性選擇器，首先經selector1選擇返回集合A，集合A再經過selector2選擇返回集合B，集合B再經過selectorN選擇返回結果集合 【事例代碼】HTML代碼：<div>AAAA</div><div id="mydiv&quo

21、t; class="itcast1">BBBB</div><div class="itcast2">CCCC</div><div id="mydiv2">DDDD</div><div class="divclass">EEEE</div><div id="xxx" class="itcast3">FFFF</div><p class="p-itca

22、st">PPPPPP</p>需求：/ 1.設置所有含有id屬性的div，字體顏色紅色/ 2.設置所有class屬性值 含有itcast元素背景色為黃色/ 3.對所有既有id又有class屬性div元素，添加一個點擊事件，打印div標簽中內容腳本代碼：最常用 <input name=”username” /> - $(“inputname=username”)1.3.5. 子元素過濾選擇器 l 對某元素中的子元素進行選取l :nth-child(index/even/odd) 選取索引為index的元素、索引為偶數(shù)的元素、索引為奇數(shù)的元素 - index

23、從1開始 區(qū)別 eql :first-child 此選擇符將為每個父元素匹配第一個子元素 l :last-child 此選擇符將為每個父元素匹配最后一個子元素 l :only-child 選取唯一子元素，它的父元素只有它這一個子元素【示例代碼】HTML代碼：<table border="1" width="400" id="mytable"><tr><td>1</td><td>冰箱</td></tr><tr><td>2</

24、td><td>洗衣機</td></tr><tr><td>3</td><td>熱水器</td></tr><tr><td>4</td><td>電飯鍋</td></tr><tr><td>5</td><td>電磁爐</td></tr><tr><td>6</td><td>豆?jié){機</td>&l

25、t;/tr><tr><td>7</td><td>微波爐</td></tr><tr><td>8</td><td>電視</td></tr><tr><td>9</td><td>空調</td></tr><tr><td>10</td><td>收音機</td></tr><tr><td>11&l

26、t;/td><td>排油煙機</td></tr><tr><td>12</td><td>加濕器</td></tr><tr><td>13 電暖氣</td></tr></table>需求：/ 1.在每個表格 下3的倍數(shù)行，字體顏色為紅色/ 2.每個表格 奇數(shù)行 背景色 黃色/ 3.每個表格 偶數(shù)行 背景色 灰色/ 4.每個tr 只有一個td的 字體為 藍色腳本代碼：1.3.6. 表單過濾選擇器 l 選取表單元素的過濾選擇器 l

27、:input 選取所有<input>、<textarea>、<select >和<button>元素 l :text 選取所有的文本框元素 l :password 選取所有的密碼框元素 l :radio 選取所有的單選框元素 l :checkbox 選取所有的多選框元素 l :submit 選取所有的提交按鈕元素 l :image 選取所有的圖像按鈕元素 l :reset 選取所有重置按鈕元素 l :button 選取所有按鈕元素 l :file 選取所有文件上傳域元素 l :hidden 選取所有不可見元素 $(“inputtype=check

28、box”) -等于 :checkbox【示例代碼】HTML代碼：<form action="login">用戶名 <input type="text" name="username" /> <br/>密碼 <input type="password" name="password" /> <br/><input type="button" value="提交" /></form&

29、gt;需求：1 對所有text框和password框，添加離焦事件，校驗輸入內容不能為空2 對button 添加 點擊事件，提交form表單腳本代碼:blur(function) 離焦事件val() 可以獲取表單元素value屬性attr() 可以獲取對象屬性 1.3.7. 表單對象屬性過濾選擇器表單過濾選擇器 根據(jù)元素類型進行選擇 表單對象屬性過濾選擇器，根據(jù)元素特殊屬性值選擇 l 選取表單元素屬性的過濾選擇器 l :enabled 選取所有可用元素 l :disabled 選取所有不可用元素 l :checked 選取所有被選中的元素，如單選框、復選框 l :selected 選取所有被選中項元素，如下拉列表框、列表框 問題： disabled 和 readonly 不同？ disabled 被禁用后的元素，不會隨表單提交 （用于放置form重復提交）readonly 不可修改， 會隨表單提交 【示例代碼】HTML代碼：<body><form>性別 <input type="radio" value="男" name="

溫馨提示

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

評論

0/150

提交評論