jQuery选择器

起床了
126 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

1.jQuery 是 JS的一个方法库，里面是由JS代码封装好的各种函数， 可以利用这些函数实现对页面中元素的操作，如操作css样式，也可以操作从后台获取数据等等

2.jQuery宗旨,写得少做的多

3。jQuery 能做什么

QQ截图20220530134413.png

4。jQuery提供了很多方法可以直接去使用，操作DOM 元素，但一定要先引入，在操作

二。获取元素

1.选择器查找 $("选择器")

①。css选择器怎么用，jQuery就怎么用

2.css中后代选择器（子元素过滤）

①。：first-child()第一个子元素

   <div class="two">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>
<script>
    // dom语句

    $(".one>ul>li:first-child").css({
        color: "red"
    })
    
    $(".two>ul>li:first-child").css(
     "color","pink"
    )
    
    这两种写法写出来的效果一样
</script>

QQ截图20220530140050.png

②。last:child()最后一个子元素

  <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:last-child").css({
        color: "red"
    })
</script>

QQ截图20220530140732.png

③。:nth-child(2n)子元素为偶数

    <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:nth-child(2n)").css({
        color: "red"
    })
</script>

QQ截图20220530141022.png

④。：only-child()

     <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:only-child").css({
        color: "red"
    })
</script>

QQ截图20220530141321.png

3。jQuery新增选择器

①:first

   <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li：first").css({
        color: "red"
    })
</script>

QQ截图20220530141539.png

②。:last-child

        <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:last").css({
        color: "red"
    })
</script>

QQ截图20220530142402.png

③。eq(i) i为下标 等于

  <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:eq(2)").css({
        color: "pink"
    })
</script>

QQ截图20220530142840.png

④：lt(i) 小于

    <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:lt(2)").css({
        color: "pink"
    })
</script>

QQ截图20220530144141.png

⑤。gt(i) 大于

  <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:gt(2)").css({
        color: "pink"
    })
</script>

QQ截图20220530144302.png

⑥。：even() 偶数 从0开始计算

       <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:even").css({
        color: "pink"
    })
</script>

QQ截图20220530144507.png

⑦。：odd()奇数

    <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>

    </ul>
    <ul>
        <li>al</li>
    </ul>
</div>

<script>

    $(".one>ul>li:even").css({
        color: "pink"
    })
</script>

QQ截图20220530144623.png

4.通过元素方法查找

(1).子元素

①。当前元素的上一个 prev（）

   <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
 </div>

<script>

    $(".a").prev().css({
        color: "pink"
    })
</script>

QQ截图20220530145202.png

②。获取当前元素上面的所有兄弟元素

prevAll( "可以获得指定的元素")

QQ截图20220530145954.png

prevUntile( "可以获得之间的元素，不包括头部和尾部")

QQ截图20220530150012.png

        <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".a").prevAll().css({
        color: "pink"
    })
</script>

QQ截图20220530145312.png

③。当前元素的下一个 next（）

         <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".b").next().css({
        color: "pink"
    })
</script>

QQ截图20220530150336.png ④。获取当前元素后的所有兄弟元素

nextAll( )

     <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".b").nextAll().css({
        color: "pink"
    })
</script>

QQ截图20220530150644.png

nextAll( "可以获得指定的元素")

   <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".a").nextAll(".c").css({
        color: "pink"
    })
</script>

QQ截图20220530150629.png nextUntile( "可以获得之间的元素，不包括头部和尾部")

      <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".b").nextUntil(".c").css({
        color: "pink"
    })
</script>

QQ截图20220530150443.png

⑤。同级的兄弟元素 siblings()

      <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul>
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".b").siblings().css({
        color: "pink"
    })
</script>

QQ截图20220530151001.png

⑥。所有子元素 children( )

     <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul class="uls">
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".uls").children().css({
        color: "pink"
    })
</script>

（2）父元素：

①。当前元素的父元素 parent()

       <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul class="uls">
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".a").parent().css({
        backgroundColor: "pink"
    })
</script>

②。获取所有的父元素 parents("指定的父元素")

<!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul class="uls">
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".a").parents(".one").css({
        backgroundColor: "pink"
    })
</script>

QQ截图20220530160318.png

③。父元素的子元素 parents("body").children("u'l")

      <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul class="uls">
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>ul
    </ul>
</div>

<script>

    $(".a").parents("body").children(".one").css({
        border:"1px solid black"
    })
</script>

QQ截图20220530161743.png ④父元素的后代元素 parents("body").find("ul")

      <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul class="uls">
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    $(".a").parents("body").find(".a").css({
        border:"1px solid black"
    })
</script>

QQ截图20220530161945.png

⑤。获取到该元素在其父元素里面的下标位置，找不到返回-1 index（） $("#san").index()

   <!-- 引入jQuery -->
<script src="./jquery.js"></script>
<div class="one">
    <ul class="uls">
        <li class="b">1</li>
        <li>2</li>
        <li class="a">3</li>
        <li>a</li>
        <li class="c">b</li>
        <li>c</li>
    </ul>
</div>

<script>

    let a=$(".a").index()
    console.log(a)
</script>

QQ截图20220530162446.png

三。显示和隐藏方法

  // 显示
    $(".a").click(function () {
      $(".box").show()
    })
    $(".b").click(function () {
      //隐藏 
        $(".box").hide()
   })
    $(".c").click(function () {
        // 显示和隐藏
        $(".box").toggle()
    })
    $(".d").click(function () {
        // 下拉显示
        $(".box").slideDown()
    })
    $(".e").click(function () {
        // 上拉隐藏
        $(".box").slideUp()
    })
    $(".f").click(function () {
        // 下拉框效果(下拉显示，上拉隐藏)
        $(".box").slideToggle()
    })
    $(".g").click(function () {
        // 淡入
        $(".box").fadeIn()
    })
    $(".h").click(function () {
        // 淡出
        $(".box").fadeOut()
    })
    $(".i").click(function(){
       // 淡入淡出
         $(".box").fadeToggle()
    })

QQ截图20220530165408.png

avatar
文章
阅读
粉丝