jQuery选择器 之 基本过滤选择器

最新推荐文章于 2024-10-01 09:00:00 发布
最新推荐文章于 2024-10-01 09:00:00 发布
阅读量995 收藏 8
点赞数 3
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141949669
版权

语法说明

https://api.jquery.com/category/selectors/basic-filter-selectors/

  • :first 选择器：选择第一个匹配的DOM元素，例如$('div:first')
  • :last 选择器：选择最后一个匹配的元素，例如$('div:last')
  • :not() 选择器：选择所有不匹配给定选择器的元素，例如$('div:not(".one")')
  • :even 选择器：选择偶数索引的元素（从零开始计数）例如$('div:even')
  • :odd 选择器：选择奇数索引的元素（从零开始计数），例如 $('div:odd')
  • :eq() 选择器：选择匹配集中索引为n的元素，例如$('div:eq(3)')
  • :gt() 选择器：选择匹配集中索引大于index的所有元素，例如$('div:gt(3)')
  • :lt() 选择器：选择匹配集中索引小于index的所有元素，例如$('div:lt(3)')
  • :header 选择器：选择所有标题元素，如h1、h2、h3等，例如$(':header')
  • :animated 选择器：选择在运行选择器时处于动画过程中的所有元素。

示例

:first 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变第一个div元素的背景色为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div:first').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:last 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变最后一个div元素的背景色为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div:last').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:not() 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变class不为one的所有div元素的背景色为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div:not(".one")').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:even 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变索引值为偶数的div元素的背景色为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div:even').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:odd 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变索引值为奇数的div元素的背景色为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div:odd').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:gt() 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变索引值大于3的div元素的背景色为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div:gt(3)').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:eq() 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变索引值等于3的div元素的背景色为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div:eq(3)').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:lt() 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变索引值小于3的div元素的背景色为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div:lt(3)').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:header 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮,改变所有的标题元素的背景色为红色"><br><br>
  <h1>h1的内容：千里之行，始于足下</h1>
  <h3>h3的内容：中秋节、国庆节的脚步越来越近了</h3>

  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $(':header').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

听海边涛声
关注
jquery基本过滤选择器
10-24
jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇
jQuery选择器之基本过滤选择器用法实例分析
12-02
本文实例讲述了jQuery选择器之基本过滤选择器用法。分享给大家供大家参考，具体如下： 前面一篇介绍了层次选择器，今天我们学习一下jQuery的另一种选择器：基本过滤选择器。过滤选择器可以过滤掉自己不想要的东西，...
jQuery内容过滤选择器
liufeifei5211_163的专栏
10-20 285
1. :contains()选择器 用于选择包含给定文本的所有元素，格式： 代码如下: $("selector1:contains(text)") 如: 代码如下: $("p:contains('text')").css("background", "#FCF"); 2. :has()选择器 用于筛选含有给定子元素的元素，格式：
前端必知必会-JQuery过滤器
最新发布
qq_24018193的博客
10-01 473
本文介绍了JQuery过滤器的使用，如有问题欢迎私信和评论。
jQuery选择器——基本过滤选择器
十一的博客
06-18 246
索引是从0开始实例：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;..
jquery选择器之基本过滤选择器
Golden的专栏
11-02 133
&lt;style type="text/css"&gt; /*高亮显示*/ .highlight{ background-color: gray } &lt;/style&gt; &lt;body&gt; &lt;h3&gt;各省市行政区划&lt;/h3&gt; &lt;table border="1" width=&quot
jQuery基本过滤选择器
weixin_34061555的博客
09-06 93
&lt;script type="text/javascript"&gt; $(document).ready(function(){ //选择第一个div元素. $('#btn1').click(function(){ $('div:first').css("background","#bfa"); }) ...
JQuery中过滤选择器
你今天真好看呀
11-01 400
过滤选择器 首元素选择器 语法： :first 获得选择的元素中的第一个元素 尾元素选择器 语法： :last 获得选择的元素中的最后一个元素 非元素选择器 语法： :not(selector) 不包括指定内容的元素 偶数选择器 语法： :even 偶数，从 0 开始计数 奇数选择器 语法： :odd 奇数，从 0 开始计数 等于索引选择器 语法： :eq(index) 指定索引元素 大于索引选...
jquery选择器之基本过滤选择器详解
12-07
代码如下:<style type=”text/css”> /*高亮显示*/ .highlight{ background-color: gray } </style> 代码如下:<body> 各省市行政区划 ”1″ width=”50%”>   北京 上海 商丘    ...
jquery选择器之层级过滤选择器详解
10-26
本文将深入探讨jQuery选择器中的层级过滤选择器，这些选择器能够帮助开发者根据层级关系来选取页面中的特定元素。在开始之前，需要明确层级选择器是通过父子、兄弟等层级关系来定位页面元素的一种方式。 在jQuery中...
jquery选择器之内容过滤选择器详解
10-26
内容过滤选择器是jQuery选择器的一个重要类别，它们允许开发者根据元素的内容来筛选和操作元素。本文将详细解析jQuery中的四个主要内容过滤选择器：`:contains(text)`、`:empty`、`:has(selector)`和`:parent`。 1....
jquery选择器之属性过滤选择器详解
10-26
jQuery选择器是一种非常强大的工具，它允许开发者通过各种规则快速地选择和操作网页中的HTML元素。本文将详细介绍jQuery中的属性过滤选择器。属性过滤选择器主要基于HTML元素的属性来进行元素筛选，是日常开发中常用...
jQuery过滤选择器-属性过滤选择器
10-10 132
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。 选择器 描述 返回 示例 [attribute] 选择拥有此属性的元素 集合元素 $(“div[id]“)选取拥有属性id的元素 [attribute=value] 选取属性的值为value的元素 集合元素 $(“div[title=test]...
jQuery-基本过滤选择器
Anna
09-19 847
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤器、内容过滤器、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。 基本一些实例如下所示： 基本过滤选择器 div,span,p {
10分钟-jQuery过滤选择器
寂寞的博客
04-01 1419
1.:first过滤选择器本次我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？在下面的示例代码中你可能注意到我们会使用 $(“li:first”)注意：书写时以“：”号开头。例子：鉴于：first和:last功能相近，使用:last给最后的li标签
JQuery 基本过滤选择器
分享我的点点滴滴，在成长路上与你同行！
10-09 399
HTML页面结构: first   last  not  even  odd  eq(1)  gt(1)  lt(1)  header(h1-h6)  animated  :first选取第一个元素 $("#a1").click(function(){ $("input:first").css("border","2px solid blue"); });
JQuery 选择器、过滤器介绍
12-10
JQuery 是一个流行的 JavaScript 库，它极大地简化了DOM操作，遵循“write less, do more”的原则。在JavaScript中操作DOM通常复杂...了解并熟练掌握JQuery选择器和过滤器，是提升JavaScript Web开发技能的关键步骤。
jQuery基本过滤选择器使用介绍
12-12
简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：...
jQuery的基本过滤选择器
越努力越幸运的博客
06-27 448
jQuery的基本过滤选择器 基本过滤选择器有很多，通过在元素后加冒号：表示，简略介绍如下： ：first 指代第一个（div：first表示第一个div） ：last 指代最后一个（div：last表示最后一个div） ：not（selector） 指代去除所有与给定选择器匹配的元素（input：not（：checked）表示所有未选中的input） ：even 指代所有索引值为偶数的元素，从0开始计数（tr：even表示第0、2、4、6…的tr元素） ：odd 指代所有索引值为奇数的元素，从0开始计数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值