jQuery 選擇器

時間 2020-10-07

標籤 css 編程數組 ide this spa code blog 索引 seo 欄目 JQuery 简体版

原文原文鏈接

1. jQuery 選擇器

原生 JS 獲取元素方式不少，很雜，並且兼容性狀況不一致，所以 jQuery 給咱們作了封裝，使獲取元素統一標準。css

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. 篩選選擇器

篩選選擇器，顧名思義就是在全部的選項中選擇知足條件的進行篩選選擇。常見以下 :ide

案例代碼this

<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中的經過一個節點找另一個節點，父、子、兄之外有所增強。spa

1.4 知識鋪墊

jQuery 設置樣式code

$('div').css('屬性', '值')

jQuery 裏面的排他思想blog

// 想要多選一的效果，排他思想：當前元素設置樣式，其他的兄弟元素清除樣式。 $(this).css(「color」,」red」); $(this).siblings(). css(「color」,」」);

隱式迭代索引

// 遍歷內部 DOM 元素（僞數組形式存儲）的過程就叫作隱式迭代。 // 簡單理解：給匹配到的全部元素進行循環遍歷，執行相應的方法，而不用咱們再進行循環，簡化咱們的操做，方便咱們調用。 $('div').hide(); // 頁面中全部的div所有隱藏，不用循環操做

鏈式編程seo

// 鏈式編程是爲了節省代碼量，看起來更優雅。 $(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>