(8)Jquery1.8.3快速入門
阿新 • • 發佈：2018-06-03
isa PE tex utf pla 技術 doctype input meta
一、Jquery的可見性選擇器：
可見性選擇器：
1、:visable 篩選可以見的元素
2、 :hidden 篩選不可見的元素
效果：
源碼：
<!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(){ $("#btn1").click(function(){ $("div:visible").css("background","#FFBBAA"); }); $("#btn2").click(function(){ //show 返回jquery對象本身，繼續可以調用jquery的方法 $("div:hidden").show(1000).css("background","#FFBBAA"); }); $("#btn3").click(function(){ alert($("input:hidden").val()); }); }) </script> </head> <body> Jquery的可見性選擇器： 可見性選擇器： <br> 1、:visable 篩選可以見的元素 <br> 2、 :hidden 篩選不可見的元素 <br> <hr> <button id="btn1">獲取可見的div</button> <button id="btn2">獲取不可見的div</button> <button id="btn3">獲取隱藏域的值</button> <input type="hidden" value="這是個隱藏域12"> <p> 子層<div id="d1" style="display:none"> 孫子層d1 </div> <span> 這是一個行信息</span> <div> div 孫子層 </div> </p> <h1>這是h1 不在div內</h1> <hr> <div id="d33"> <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 style="background:#FF00FF "></div> <div id="d5"> 這是第5個層</div> </p> </body> </html>
(8)Jquery1.8.3快速入門