jQuery 選擇器

時間 2020-10-04

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

原文原文鏈接

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

1. 基礎選擇器

$("選擇器")   // 裏面選擇器直接寫 CSS 選擇器便可，可是要加引號

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>

3. 篩選選擇器

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

4. 知識鋪墊

jQuery 設置樣式this

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

隱式迭代spa

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

案例代碼3d

<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>

5.篩選方法

重點： jQuery中還有一些篩選方法，相似DOM中的經過一個節點找另一個節點，父、子、兄之外有所增強。blog

語法	用法	說明
parent()	$("li"). parent();	查找最近一個父級
children(selector)	$("u1"). children("li");	至關於$("ul>1i"),最近一級(親兒子)
find(selector)	$("u1"). find("li");	至關於$("ul li"),後代選擇器
siblings(selector)	$(" . first").siblings("li");	查找兄弟節點，不包括本身自己
nextAll([expr])	$(".first"). nextAll()	查找當前元索以後全部的同輩元素
prevtAll([expr])	$(" .last"). prevAll()	查找當前元索以前全部的同輩元索
hasClass(class)	$(' div' ). hasClass(" protected" )	檢查當前的元素是否含有某個特定的類,若是有，則返回true
eq( index)	$("li").eq(2);	至關於$("li:eq(2)")，index從0開始

重點記住: parent() children() find() siblings() eq()索引

6.新浪下拉菜單案例

<script>
        $(function () {
            // 鼠標通過顯示
            $('.nav>li').mouseover(function () {
                // $(this) jQuery當前元素,this不要加引號
                $(this).children('ul').show();
           });
            // 鼠標離開隱藏
            $('.nav>li').mouseout(function () {
                $(this).children('ul').hide();
           });
       })
    </script>

7.jQuery 裏面的排他思想

// 想要多選一的效果，排他思想：當前元素設置樣式，其他的兄弟元素清除樣式。
$(this).css(「color」,」red」);
$(this).siblings(). css(「color」,」」);
//案例代碼
<script>
        $(function () {
            $('button').click(function () {
                $(this).css('background', 'pink');
                $(this).siblings('button').css('background', '');
           })
       })
 </script>

鏈式編程seo

// 鏈式編程是爲了節省代碼量，看起來更優雅。
$(this).css('color', 'red').sibling().css('color', '');

8. 案例：淘寶服飾精品案例

思路分析: 1.核心原理：鼠標通過左側盒子某個小li，就讓內容區盒子相對應圖片顯示，其他的圖片隱藏。 2.須要獲得當前小li 的索引號，就能夠顯示對應索引號的圖片 3.jQuery 獲得當前元素索引號 $(this).index() 4.中間對應的圖片，能夠經過 eq(index) 方法去選擇 5.顯示元素 show() 隱藏元素 hide()

<script>
    $(function(){
    // 1.鼠標通過左側的小li
  $("#left 1i").mouseover(function() {
   // 2.獲得當前小li的索引號
   var index = $(this).index();
   console.log(index);
   // 3.讓咱們右側的盒子相應索引號的圖片顯示出來
   $("#content div").eq(index).show();
   // 4.讓其他的圖片(就是其餘的兄弟)隱藏起來
   $("#content div").eq(index).siblings().hide();
  })
 })
</script>