IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> jQuery 过滤 -> 正文阅读

[JavaScript知识库]jQuery 过滤

jQuery 的过滤方法可以允许我们根据特定元素在一组元素中的位置来选择该元素。关于 jQuery 过滤方法有以下几种,前三种是最基本的方法,后两种是其他方法,它们可以让我们选择与特定条件匹配或者是不匹配的元素:

方法描述
first()返回被选元素的首个元素
last()返回被选元素的最后一个元素
eq()返回被选元素中带有指定索引号的元素
filter()规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not()返回不匹配标准的所有元素

first()方法

first() 方法用于返回指定元素的第一个元素。

示例:

我们来看下面这个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("li").first().css({"background-color":"pink"});
  });
</script>
</head>
<body>
  <h3>我最喜欢吃的水果</h3>
  <div class="my">
    <ul>
      <li>西瓜</li>
      <li>哈密瓜</li>
      <li>菠萝</li>
      <li>水蜜桃</li>
      <li>草莓</li>
    </ul>
  </div>
  <div class="you">
    <p>你最喜欢吃的水果是什么呢?</p>
  </div>
</body>
</html>

上述代码中,first() 方法会帮我们找到第一个 <li> 元素,并且通过 css() 方法将找到的第一个 <li> 元素背景颜色设置为粉色。效果如下所示:

last()方法

last()方法刚好与 first() 方法作用相反,用于返回指定元素的最后一个元素。

示例:

例如假设我们要找到最后一个 <li> 元素,可以像下面这样写:

$(function(){
    $("li").last().css({"background-color":"pink"});
});

效果如下所示:

eq()方法

eq() 方法用于返回一个具有特定元素的特定索引号的元素。需要注意的是,首个元素的索引号是从 0 开始,而不是 1。

示例:

例如在前面的示例中,一共有五个 <li> 元素,那么第一个 <li> 元素的索引号为 0,第二个为 1,以此类推。

我们可以试着将索引号为 3<li> 元素背景颜色设置为粉色,代码如下所示:

$(function(){
    $("li").eq(3).css({"background-color":"pink"});
});

演示效果:

从上图中我们可以很清楚的看出,索引号为 3 的元素为"水蜜桃"。

filter()方法

filter() 方法允许我们指定一个条件,与条件不匹配的元素将从选择中删除,并返回匹配的元素。

示例:

例如下面代码中,选出 class 属性为 sweet<li> 元素,并将其背景颜色设置为粉色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("li").filter(".sweet").css({"background-color":"pink"});
  });
</script>
</head>
<body>
  <h3>我最喜欢吃的水果</h3>
  <div class="my">
    <ul>
      <li class="sweet">西瓜</li>
      <li class="sweet">哈密瓜</li>
      <li>菠萝</li>
      <li class="sweet">水蜜桃</li>
      <li>草莓</li>
    </ul>
  </div>
  <div class="you">
    <p>你最喜欢吃的水果是什么呢?</p>
  </div>
</body>
</html>

演示效果:

not()方法

not() 方法返回所有与条件不匹配的元素。作用正好与 filter() 方法相反。

示例:

选出 class 属性值不为 sweet<li> 元素:

$(function(){
    $("li").not(".sweet").css({"background-color":"pink"});
});

演示效果:

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-16 11:38:44  更:2021-08-16 11:39:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 8:42:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码