JQuery選擇器案例

2024-04-27 15:06:55

字體：大中小

來源：轉載

供稿：網友

jQuery選擇器之id選擇器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <div id="aaron"> <p>id="aaron"</p> <p>選中</p> </div> <div id="imooc"> <p>id="imooc"</p> <p>jQuery選中</p> </div> <div id="imooc"> <p>id="imooc"</p> <p>jQuery未選中</p> </div> <script type="text/javascript"> //通過原生方法處理 var div = document.getElementById('aaron'); div.style.border = "3px solid blue"; </script> <script type="text/Javascript"> //通過jQuery直接傳入id //id的唯一，只選擇到了第一個匹配的id為imooc的div節點 $('#imooc').CSS("border", "3px solid red"); </script></body></html>

jQuery選擇器之類選擇器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body> <div class="aaron"> <p>class="aaron"</p> <p>選中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>選中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery選中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery選中</p> </div> <script type="text/javascript"> //通過原生方法處理 //樣式是可以多選的，所以得到的是一個合集 //需要通過循環給合集中每一個元素修改樣式 var divs = document.getElementsByClassName('aaron'); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> //通過jQuery直接傳入class //class選擇器可以選擇多個元素 $('.imooc').css("border", "3px solid red"); </script></body></html>

jQuery選擇器之元素選擇器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body> <div class="aaron"> <p>class="aaron"</p> <p>選中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>選中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery選中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery選中</p> </div> <script type="text/javascript"> //通過原生方法處理 //獲取到所有的節點標記名為div的元素 //給每一個div加上藍色的邊框 var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> //通過jQuery直接傳入標簽名p //標簽是可以多個的，所以得到的同樣也是一個合集 $("p").css("border", "3px solid red"); </script></body></html>

jQuery選擇器之全選擇器（*選擇器）

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <div class="aaron"> <p>class="aaron"</p> <p>選中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>選中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery選中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery選中</p> </div> <script type="text/javascript"> //獲取頁面中所有的元素 var elements1 = document.getElementsByTagName('*'); </script> <script type="text/javascript"> //獲取頁面中所有的元素 var elements2 = $("*") ; //原生與jQuery方法比較 //===表示數據和類型都相等 if(elements2.length === elements1.length){ elements2.css("border","1px solid red"); } </script></body></html>

jQuery選擇器之層級選擇器

jQuery選擇器之內容篩選選擇器

jQuery選擇器之可見性篩選選擇器

jQuery選擇器之屬性篩選選擇器

jQuery選擇器之子元素篩選選擇器

jQuery選擇器之表單元素選擇器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <style> input{ display: block; margin: 10px; padding:10px; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>子元素篩選選擇器</h2> <h3>input、text、pass Word、radio、checkbox</h3> <h3>submit、image、reset、button、file</h3> <div class="left first-div"> <form> <input type="text" value="text類型"/> <input type="password" value="password"/> <input type="radio"/> <input type="checkbox"/> <input type="submit" /> <input type="image" /> <input type="reset" /> <input type="button" value="Button" /> <input type="file" /> </form> </div> <script type="text/javascript"> //查找所有 input, textarea, select 和 button 元素 //:input 選擇器基本上選擇所有表單控件 $(':input').css("border", "3px groove blue"); </script> <script type="text/javascript"> //匹配所有input元素中類型為text的input元素 $('input:text').css("background", "#A2CD5A"); </script> <script type="text/javascript"> //匹配所有input元素中類型為password的input元素 $('input:password').css("background", "yellow"); </script> <script type="text/javascript"> //匹配所有input元素中的單選按鈕,并選中 $('input:radio').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的復選按鈕,并選中 $('input:checkbox').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的提交的按鈕,修改背景顏色 $('input:submit').css("background", "#C6E2FF"); </script> <script type="text/javascript"> //匹配所有input元素中的圖像類型的元素,修改背景顏色 $('input:image').css("background", "#F4A460"); </script> <script type="text/javascript"> //匹配所有input元素中類型為按鈕的元素 $('input:button').css("background", "red"); </script> <script type="text/javascript"> //匹配所有input元素中類型為file的元素 $('input:file').css("background", "#CD1076"); </script></body></html>

jQuery選擇器之表單對象屬性篩選選擇器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <style> input { display: block; margin: 10px; padding: 10px; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>子元素篩選選擇器</h2> <h3>enabled、disabled</h3> <form> <input type="text" value="未設置disabled" /> <input type="text" value="設置disabled" disabled="disabled" /> <input type="text" value="未設置disabled" /> </form> <script type="text/javascript"> //查找所有input所有可用的（未被禁用的元素）input元素。 $('input:enabled').css("border", "2px groove red"); </script> <script type="text/javascript"> //查找所有input所有不可用的（被禁用的元素）input元素。 $('input:disabled').css("border", "2px groove blue"); </script> <h3>checked、selected</h3> <form> <input type="checkbox" checked="checked"> <input type="checkbox"> <input type="radio" checked> <input type="radio"> <select name="garden" multiple="multiple"> <option>imooc</option> <option selected="selected">慕課網</option> <option>aaron</option> <option selected="selected">博客園</option> </select> </form> <script type="text/javascript"> //查找所有input所有勾選的元素(單選框,復選框) //移除input的checked屬性 $('input:checked').removeAttr('checked') </script> <script type="text/javascript"> //查找所有option元素中,有selected屬性被選中的選項 //移除option的selected屬性 $('option:selected').removeAttr('selected') </script></body></html>

jQuery選擇器之特殊選擇器this

綜合案例

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery標簽切換效果</title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body><div id="menu">  <div id="menu_female"> <h3>女裝</h3> <div class="tag" style="display: block;"> <dl> <dd> <p>第一類</p> <a>1.襯衫</a> <a>2.T恤</a> <a>3.雪紡衫</a> <a>4.針織衫</a> <a>5.短外套</a> <a>6.衛衣</a> <a>7.小西褲</a> <a>8.風衣</a> <a>9.吊帶背心</a> <a>10.連衣裙</a> <a name="setColor">11.蕾絲連衣裙</a> <a>12.復古連衣裙</a> <a>13.印花連衣裙</a> <a>14.真絲連衣裙</a> <a>更多</a> </dd> </dl> </div> <div class="tag_More" style="display:block"> <dl> <dd> <p>第二類</p> <a>1.背帶褲</a> <a>2.哈倫褲</a> <a>3.牛仔褲</a> <a>4.休閑褲</a> <a>5.小腳褲</a> <a>6.西裝褲</a> <a>7.打底褲</a> <a>8.闊腳褲</a> <a>9.短褲</a> <a>10.馬甲/背心</a> <a>11.羽絨服</a> <a>12.棉服</a> <a>13.夾克</a> <a>14.POLO衫</a> <a>更多</a> </dd> </dl> </div>> </div> <div id="menu_con"> <h3>男裝</h3> <div class="tag" style="display:block"> <dl> <dd> <p>第一類</p> <a>1.襯衫</a> <a>2.T恤</a> <a>3.牛仔褲</a> <a>4.休閑褲</a> <a>5.短褲</a> <a>6.針織衫</a> <a>7.西服</a> <a>8.西褲</a> <a>9.嘻哈褲</a> <a>10.西服套裝</a> <a>11.馬甲/背心</a> <a name="setColor">12.羽絨服</a> <a>13.棉服</a> <a>14.夾克</a> <p>更多</p> </dd> </dl> </div> <div class="tag_More" style="display:block"> <dl> <dd> <p>第二類</p> <a>1.襯衫</a> <a>2.T恤</a> <a>3.牛仔褲</a> <a name='setColor'>4.休閑褲</a> <a>5.短褲</a> <a>6.針織衫</a> <a>7.西服</a> <a>8.西褲</a> <a>9.嘻哈褲</a> <a>10.西服套裝</a> <a>11.馬甲/背心</a> <a>12.羽絨服</a> <a>13.棉服</a> <a>14.夾克</a> <p>更多</p> </dd> </dl> </div>> </div></div><script type="text/javascript"> //找到男裝下第一類衣服中的第一個p元素，并改變顏色 //可以通過子類選擇器 p:first-child 篩選出第一個p元素 $("#menu_con div.tag dd > p:first-child").css('color','#9932CC');</script><script type="text/javascript"> //找到男裝下第一類衣服把a元素從順序1-4加上顏色 //可以通過基本篩選器lt,選擇匹配集合中所有索引值小于給定index參數的元素 //注意了index是從0開始計算，所以選在1-4,為對應的index就是4 $("#menu_con div.tag dd :eq(0)> a:lt(4) ").css('color','red');</script><script type="text/javascript"> //找到男裝所有a元素中屬性名name="setColor"的元素，并設置顏色 //這里用的屬性選擇器[attribute='value']選擇指定屬性是給定值的元素 $("#menu_con a[name=setColor]").css('color','blue');</script><script type="text/javascript"> //不分男女，選中第一類衣服中第9個a元素，并改變顏色 //這里用了nth-child 選擇的他們所有父元素的第n個子元素 $('#menu div.tag dd a:nth-child(10)').css('color','#66CD00');</script><script type="text/javascript"> //找到女裝下第一類衣服，把a元素中包含文字"更多"的節點，改變顏色 $("#menu_female div.tag a:contains('更多')").css('color','#C71585');</script></body></html>

上一篇：Struts框架（一）——簡介

下一篇：2.11.2 footer 元素和 hgroup 元素

學習交流

硬盤分區如何設置準確的分區空間

硬盤分區如何設置準確的分區空間...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注