jQuery基礎–選擇器
- 2019 年 10 月 10 日
- 筆記
2. 選擇器
2.1. 什麼是jQuery選擇器
jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象。
jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，並且jQuery還添加了很多更加複雜的選擇器。【查看jQuery文檔】
jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器。
2.2. 基本選擇器
|
名稱 |
用法 |
描述 |
|---|---|---|
|
ID選擇器 |
$(「#id」); |
獲取指定ID的元素 |
|
類選擇器 |
$(「.class」); |
獲取同一類class的元素 |
|
標籤選擇器 |
$(「div」); |
獲取同一類標籤的所有元素 |
|
並集選擇器 |
$(「div,p,li」); |
使用逗號分隔，只要符合條件之一就可。 |
|
交集選擇器 |
$(「div.redClass」); |
獲取class為redClass的div元素 |
總結：跟css的選擇器用法一模一樣。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li id="four">4</li> <li>5</li> <li class="green yellow">6</li> <li class="green">7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <div class="green">111</div> <div class="green">111</div> <div class="green">111</div> <div class="green">111</div> <script src="jquery-1.12.4.js"></script> <script> //入口函數 $(function () { //jquery如何設置樣式 //css(name, value) //name:樣式名 value：樣式值 //id選擇器 $("#id") //$("#four").css("backgroundColor", "red"); //$(".green").css("backgroundColor", "green"); //$("li").css("color", "red"); //交集 並集 //$("#four,.green").css("backgroundColor", "pink"); //$("li.green").css("backgroundColor", "red"); $(".green.yellow").css("backgroundColor", "pink"); }); </script> </body> </html>
2.3. 層級選擇器
|
名稱 |
用法 |
描述 |
|---|---|---|
|
子代選擇器 |
$(「ul>li」); |
使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素 |
|
後代選擇器 |
$(「ul li」); |
使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等 |
跟CSS的選擇器一模一樣。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="father"> <div>11</div> <div>22 <p>111</p> <p>222</p> <p>333</p> </div> <div>33</div> <div>44</div> <div>55</div> <p>66</p> <p>77</p> <p>88</p> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //$("s1,s2")// 並集選擇器 //$("s1 s2")// 後代選擇器 //$("s1>s2")// 子代選擇器 //$("li.green") //$("s1s2") //交集選擇器 //$("#father>p").css("backgroundColor", "red"); $("#father p").css("backgroundColor", "red"); }); </script> </body> </html>
2.4. 過濾選擇器
這類選擇器都帶冒號:
|
名稱 |
用法 |
描述 |
|---|---|---|
|
:eq（index） |
$(「li:eq(2)」).css(「color」, 」red」); |
獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始。 |
|
:odd |
$(「li:odd」).css(「color」, 」red」); |
獲取到的li元素中，選擇索引號為奇數的元素 |
|
:even |
$(「li:even」).css(「color」, 」red」); |
獲取到的li元素中，選擇索引號為偶數的元素 |
【案例：隔行變色】
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>我是第1個li</li> <li>我是第2個li</li> <li>我是第3個li</li> <li>我是第4個li</li> <li>我是第5個li</li> <li>我是第6個li</li> <li>我是第7個li</li> <li>我是第8個li</li> <li>我是第9個li</li> <li>我是第10個li</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { //下標為偶數，過濾 $("li:even").css("backgroundColor", "red"); $("li:odd").css("backgroundColor", "cyan"); $("li:lt(1)").css("fontSize", "32px"); }); </script> </body> </html>
2.5. 篩選選擇器(方法)
篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法。
|
名稱 |
用法 |
描述 |
|---|---|---|
|
children(selector) |
$(「ul」).children(「li」) |
相當於$(「ul>li」)，子類選擇器 |
|
find(selector) |
$(「ul」).find(「li」); |
相當於$(「ul li」),後代選擇器 |
|
siblings(selector) |
$(「#first」).siblings(「li」); |
查找兄弟節點，不包括自己本身。 |
|
parent() |
$(「#first」).parent(); |
查找父親 |
|
eq(index) |
$(「li」).eq(2); |
相當於$(「li:eq(2)」),index從0開始 |
|
next() |
$(「li」).next() |
找下一個兄弟 |
|
prev() |
$(「li」).prev() |
找上一次兄弟 |
【案例：下拉菜單】this+children+mouseenter+mouseleave 【案例：突出展示】siblings+find 【案例：手風琴】next+parent 【案例：淘寶精品】index+eq
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-image: url(imgs/bg.jpg); } .wrap li { background-image: url(imgs/libg.jpg); } .wrap > ul > li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style> <script src="../jquery-1.12.4.js"></script> <script> $(function () { //mouseover：鼠標經過事件 //mouseout:鼠標離開事件 //mouseenter:鼠標進入事件 //mouseleave：鼠標離開事件 var $li = $(".wrap>ul>li"); //給li註冊鼠標經過事件，讓自己的ul顯示出來 $li.mouseenter(function () { //找到所有的兒子，並且還得是ul $(this).children("ul").show(); }); $li.mouseleave(function () { $(this).children("ul").hide(); }); }); </script> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0);">一級菜單1</a> <ul class="ul"> <li><a href="javascript:void(0);">二級菜單11</a></li> <li><a href="javascript:void(0);">二級菜單12</a></li> <li><a href="javascript:void(0);">二級菜單13</a></li> </ul> </li> <li> <a href="javascript:void(0);">一級菜單2</a> <ul> <li><a href="javascript:void(0);">二級菜單21</a></li> <li><a href="javascript:void(0);">二級菜單22</a></li> <li><a href="javascript:void(0);">二級菜單23</a></li> </ul> </li> <li> <a href="javascript:void(0);">一級菜單3</a> <ul> <li><a href="javascript:void(0);">二級菜單31</a></li> <li><a href="javascript:void(0);">二級菜單32</a></li> <li><a href="javascript:void(0);">二級菜單33</a></li> </ul> </li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } body { background: #000; } .wrap { margin: 100px auto 0; width: 630px; height: 394px; padding: 10px 0 0 10px; background: #000; overflow: hidden; border: 1px solid #fff; } .wrap li { float: left; margin: 0 10px 10px 0; } .wrap img { display: block; border: 0; } </style> <script src="../jquery-1.12.4.js"></script> <script> $(function () { $(".wrap>ul>li").mouseenter(function () { $(this).css("opacity", "1").siblings().css("opacity", "0.4"); }); $(".wrap").mouseleave(function () { //讓所有的li都變亮 //$("li"); //$(".wrap li"); //$(".wrap>ul>li") //$(this).children().children("li"); $(this).find('li').css("opacity", 1); }); }); </script> </head> <body> <div class="wrap"> <ul> <li><a href="#"><img src="images/01.jpg" alt=""/></a></li> <li><a href="#"><img src="images/02.jpg" alt=""/></a></li> <li><a href="#"><img src="images/03.jpg" alt=""/></a></li> <li><a href="#"><img src="images/04.jpg" alt=""/></a></li> <li><a href="#"><img src="images/05.jpg" alt=""/></a></li> <li><a href="#"><img src="images/06.jpg" alt=""/></a></li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * {padding: 0;margin: 0;} ul { list-style-type: none;} .parentWrap { width: 200px; text-align:center; } .menuGroup { border:1px solid #999; background-color:#e0ecff; } .groupTitle { display:block; height:20px; line-height:20px; font-size: 16px; border-bottom:1px solid #ccc; cursor:pointer; } .menuGroup > div { height: 200px; background-color:#fff; display:none; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { //思路分析： //1. 給所有的span註冊點擊事件，讓當前span的兄弟div顯示出來 $(".groupTitle").click(function () { //下一個兄弟：nextElementSibling //鏈式編程：在jQuery裏面，方法可以一直調用下去。 $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200); }); }); </script> </head> <body> <ul class="parentWrap"> <li class="menuGroup"> <span class="groupTitle">標題1</span> <div>我是彈出來的div1</div> </li> <li class="menuGroup"> <span class="groupTitle">標題2</span> <div>我是彈出來的div2</div> </li> <li class="menuGroup"> <span class="groupTitle">標題3</span> <div>我是彈出來的div3</div> </li> <li class="menuGroup"> <span class="groupTitle">標題4</span> <div>我是彈出來的div4</div> </li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } a { text-decoration: none; } .wrapper { width: 298px; height: 248px; margin: 100px auto 0; border: 1px solid pink; overflow: hidden; } #left, #center, #right { float: left; } #left li, #right li { background: url(images/lili.jpg) repeat-x; } #left li a, #right li a { display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; line-height: 27px; text-align: center; color: black; } #left li a:hover, #right li a:hover { background-image: url(images/abg.gif); } #center { border-left: 1px solid pink; border-right: 1px solid pink; } </style> <script src="../jquery-1.12.4.js"></script> <script> $(function () { //找不到對象 $(function () { $("#left>li").mouseenter(function () { $("#center>li:eq(" + $(this).index() + ")").show().siblings().hide(); }); $("#right>li").mouseenter(function () { $("#center>li").eq($(this).index() + 9).show().siblings().hide(); }); }) }); // $("#left>li").mouseenter(function () { // //讓center中對應下標的li顯示，其他li隱藏 // var idx = $(this).index(); // $("#center>li:eq(" + idx + ")").show().siblings().hide(); // }); // // $("#right>li").mouseenter(function () { // var idx = $(this).index() + 9; // $("#center>li").eq(idx).show().siblings().hide(); // // //$("#center>li").eq(idx) :jq對象 // //$("#center>li").get(idx);：js對象 // }); // }); </script> </head> <body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女褲</a></li> <li><a href="#">羽絨服</a></li> <li><a href="#">牛仔褲</a></li> </ul> <ul id="center"> <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女褲.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/羽絨服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/牛仔褲.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮帶.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/圍巾.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li> </ul> <ul id="right"> <li><a href="#">女包</a></li> <li><a href="#">男靴</a></li> <li><a href="#">登山鞋</a></li> <li><a href="#">皮帶</a></li> <li><a href="#">圍巾</a></li> <li><a href="#">皮衣</a></li> <li><a href="#">男毛衣</a></li> <li><a href="#">男棉服</a></li> <li><a href="#">男包</a></li> </ul> </div> </body> </html>
虹吸燈
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京東商城</title> <style> * { margin: 0; padding: 0; list-style: none; } .slider { height: 340px; width: 790px; margin: 100px auto; position: relative; } .slider li { position: absolute; display: none; } .slider li:first-child { display: block; } .arrow { display: none; } .slider:hover .arrow { display: block; } .arrow-left, .arrow-right { font-family: "SimSun", "宋體"; width: 30px; height: 60px; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 50%; margin-top: -30px; cursor: pointer; text-align: center; line-height: 60px; color: #fff; font-weight: 700; font-size: 30px; } .arrow-left:hover, .arrow-right:hover { background-color: rgba(0, 0, 0, .5); } .arrow-left { left: 0; } .arrow-right { right: 0; } </style> </head> <body> <div class="slider"> <ul> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> <li><a href="#"><img src="images/4.jpg" alt=""></a></li> <li><a href="#"><img src="images/5.jpg" alt=""></a></li> <li><a href="#"><img src="images/6.jpg" alt=""></a></li> <li><a href="#"><img src="images/7.jpg" alt=""></a></li> <li><a href="#"><img src="images/8.jpg" alt=""></a></li> </ul> <!--箭頭--> <div class="arrow"> <span class="arrow-left"><</span> <span class="arrow-right">></span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { var $li = $(".slider>ul>li"); var count = 0; $(".arrow-right").click(function () { count++; if(count == $li.length){ count = 0; } $li.eq(count).fadeIn(1000).siblings().fadeOut(1000); }); $(".arrow-left").click(function () { count--; if(count == -1){ count = $li.length - 1; } $li.eq(count).fadeIn(1000).siblings().fadeOut(1000); }); }); </script> </body> </html>
