1. jQuery 選擇器
原生 JS 擷取元素方式很多，很雜，而且相容性情況不一緻，是以 jQuery 給我們做了封裝，使擷取元素統一标準。
1.1. 基礎選擇器
$("選擇器") // 裡面選擇器直接寫 CSS 選擇器即可，但是要加引号 複制
1.2. 層級選擇器
層級選擇器最常用的兩個分别為：後代選擇器和子代選擇器。
基礎選擇器和層級選擇器案例代碼
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body> 複制
1.3. 篩選選擇器
篩選選擇器，顧名思義就是在所有的選項中選擇滿足條件的進行篩選選擇。常見如下 :
案例代碼
<body>
<ul>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
</ul>
<ol>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
</ol>
<script>
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
</script>
</body> 複制
另: jQuery中還有一些篩選方法，類似DOM中的通過一個節點找另外一個節點，父、子、兄以外有所加強。
1.4 知識鋪墊
- jQuery 設定樣式
$('div').css('屬性', '值') 複制
- jQuery 裡面的排他思想
// 想要多選一的效果，排他思想：目前元素設定樣式，其餘的兄弟元素清除樣式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””); 複制
- 隐式疊代
// 周遊内部 DOM 元素（僞數組形式存儲）的過程就叫做隐式疊代。
// 簡單了解：給比對到的所有元素進行循環周遊，執行相應的方法，而不用我們再進行循環，簡化我們的操作，友善我們調用。
$('div').hide(); // 頁面中所有的div全部隐藏，不用循環操作 複制
- 鍊式程式設計
// 鍊式程式設計是為了節省代碼量，看起來更優雅。
$(this).css('color', 'red').sibling().css('color', ''); 複制
1.5 案例：淘寶服飾精品案例
思路分析: 1.核心原理：滑鼠經過左側盒子某個小li，就讓内容區盒子相對應圖檔顯示，其餘的圖檔隐藏。2.需要得到目前小li 的索引号，就可以顯示對應索引号的圖檔3.jQuery 得到目前元素索引号 $(this).index()4.中間對應的圖檔，可以通過 eq(index) 方法去選擇5.顯示元素 show() 隐藏元素 hide()
<script>
$(function () {
// 當滑鼠經過左側欄時相應的圖檔顯示出來
// 滑鼠經過事件
$("#left li").mouseover(function () {
//得到目前小li的索引号
var index = $(this).index();
// 滑鼠經過 相應圖檔顯示
$("#content div").eq(index).show();
// 其他(兄弟圖檔)圖檔隐藏
$("#content div").eq(index).siblings().hide();
});
});
</script> 複制