(6)Jquery1.8.3快速入門
阿新 • • 發佈：2018-06-02
ima jquery ade 過濾器 偶數 head function dex PE
一、Jquery的基本過濾選擇器：
基本過濾選擇器：
1、 :first 選取第一個元素
2、 :last 選取最後一個元素
3、:not(selector) 去除所有與給定的選擇器匹配的元素
4、:even 選取索引時偶數的所有元素,索引從0開始
5、:odd 選取索引時奇數的所有元素,索引從0開始
6、:eq(index) 選取索引等於index的元素,索引從0開始
7、:gt(index) 選取索引大於index的元素,索引從0開始
8、:lt(index) 選取索引小於index的元素,索引從0開始
9、:header 選取所有的標題元素 如：h1 ,h2等
10、:animated 選取當前執行 動畫的所有元素
效果：
源碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery 學習1</title> <!-- 導入jquery庫 --> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ function sanmatt(){ $("#d5").slideToggle("fast",sanmatt); } sanmatt(); $("#btn1").click(function(){ $("div:first").css("background","#FFBBAA"); }); $("#btn2").click(function(){ $("div:last").css("background","#FFBBAA"); }); $("#btn3").click(function(){ $("div:even").css("background","#FFBBAA"); }); $("#btn4").click(function(){ $("div:odd").css("background","#FFBBAA"); }); $("#btn5").click(function(){ $("div:eq(2)").css("background","#FFBBAA"); }); $("#btn6").click(function(){ $("div:gt(2)").css("background","#FFBBAA"); }); $("#btn7").click(function(){ $("div:lt(2)").css("background","#FFBBAA"); }); $("#btn8").click(function(){//選取不等於某個元素的所有 $("div:not(‘#d1‘)").css("background","#FFBBAA"); }); $("#btn9").click(function(){//選取所有的header元素 $(":header").css("background","#FFBBAA"); }); $("#btn10").click(function(){//選取所有的header元素 $(":animated").css("background","#FFBBAA"); }); }) </script> </head> <body> Jquery的基本過濾器： 基本過濾器選擇： <br> 1、 :first 選取第一個元素 <br> 2、 :last 選取最後一個元素 <br> 3、:not(selector) 去除所有與給定的選擇器匹配的元素 <br/> 4、:even 選取索引時偶數的所有元素,索引從0開始 <br/> 5、:odd 選取索引時奇數的所有元素,索引從0開始 <br/> 6、:eq(index) 選取索引等於index的元素,索引從0開始 <br/> 7、:gt(index) 選取索引大於index的元素,索引從0開始 <br/> 8、:lt(index) 選取索引小於index的元素,索引從0開始 <br/> 9、:header 選取所有的標題元素 如：h1 ,h2等 <br/> 10、:animated 選取當前執行 動畫的所有元素 <br/> <hr> <button id="btn1">獲取第一個div</button> <button id="btn2">獲取最後一個div</button> <button id="btn3">選取偶數列</button> <button id="btn4">選取奇數列</button> <button id="btn5">索引等於2(從0開始)</button> <button id="btn6">索引大於2的div</button> <button id="btn7">索引小於2的div</button> <button id="btn8">不等於某個選擇器的所有元素</button> <button id="btn9">選取所有的標題header</button> <button id="btn10">選取當前執行的動畫</button> <p> 子層 <div id="d1"> 孫子層d1 </div> <span> 這是一個行信息</span> <div> div 孫子層 </div> </p> <h1>這是h1 不在div內</h1> <hr> <div id="d3"> <h2>這是h2 在div內</h2> 子層2 <div style="background:#FFFFFF"> 孫子層2 </div> <br/> <span> 這是一個行信息2</span> <div id="d2"> div 孫子層2 </div> </div> <br/> <div> 這是第三個div層 </div> <br/> <span>這是第四個span</span> <p> <div id="d5"> 這是第5個層</div> </p> </body> </html>
(6)Jquery1.8.3快速入門