jQuery 筛选元素

最新推荐文章于 2022-09-08 13:13:17 发布
最新推荐文章于 2022-09-08 13:13:17 发布
阅读量117 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57835615/article/details/117637109
版权

1.jQuery first() 方法：返回被选元素的首个元素。

示例：

设置第一个li元素的字体颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li").first().css("color","blue");
        })
    </script>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
    </ul>
</body>
</html>

效果图：

2.jQuery last() 方法：返回被选元素的最后一个元素。

示例：

设置最后一个p元素字体颜色：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").last().css("color", "green");
        })
    </script>
</head>

<body>
    <p>段落一</p>
    <p>段落二</p>
    <p>段落三</p>
    <p>段落四</p>
    <p>段落五</p>
</body>

</html>

3.jQuery eq() 方法：返回被选元素中带有指定索引号的元素。

示例：

设置索引号为2的li元素的字体颜色：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("li").eq(2).css("color", "violet");
        })
    </script>
</head>

<body>
    <ol>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
        <li>列表项五</li>
        <li>列表项六</li>
    </ol>
</body>

</html>

4.jQuery filter() 方法：返回符合某个标准的所有元素。

示例：

设置带有指定类名的p元素的字体颜色：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").filter(".para").css("color", "blue");
        })
    </script>
</head>

<body>
    <p>段落一</p>
    <p>段落二</p>
    <p class="para">段落三</p>
    <p class="para">段落四</p>
    <p>段落五</p>
</body>

</html>

5.jQuery not() 方法：返回不符合某个标准的所有元素。

示例：

设置不带有指定类名的p元素的字体颜色：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").not(".para").css("color", "blue");
        })
    </script>
</head>

<body>
    <p>段落一</p>
    <p>段落二</p>
    <p class="para">段落三</p>
    <p class="para">段落四</p>
    <p>段落五</p>
</body>

</html>

「已注销」
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
概述jQuery的元素筛选
10-21
首先，我们来看`eq()`方法，它根据提供的索引值筛选元素。例如，`$("p").eq(1)`会选择所有`<p>`元素中索引值为1的元素，即第二个元素（索引从0开始）。如果使用负值，如`eq(-1)`，则会选择最后一个元素，因为-1表示...
JQUERY 筛选效果
10-24
1. `$(selector)`：这是jQuery的基本用法，通过选择器（如ID、类、标签等）来筛选DOM元素。 2. `.eq(index)`：根据索引值选取一个元素。索引是从0开始的。 3. `.first()` 和 `.last()`：分别选取集合中的第一个和...
jQuery之元素筛选
ajwqb06628的专栏
12-09 177
jQuery之元素筛选 1、eq()　　 筛选指定索引号的元素2、first()　　筛选出第一个匹配的元素3、last()　　 筛选出最后一个匹配的元素4、hasClass()　　检查匹配的元素是否含有指定的类5、filter()　　筛选出与指定表达式匹配的元素集...
jQuery筛选元素
liliy__的博客
02-28 296
一、筛选奇数行或偶数行 jQuery中筛选奇数行（偶数行）有两种方法： 同css选择器一致： 选择器:even–选中奇数行 选择器:odd–选中偶数行 $(function() { $("ul li:even").css("backgroundColor", "skyblue"); $("ul li:odd").css("backgroundColor", "or...
jQuery的元素的筛选
越努力越幸运的博客
06-27 335
jQuery的元素的筛选 前面介绍了很多的过滤器，现在统一一下，把他们变成一种方法，然后再加上一些特有的方法，这就是本章所要讲的内容。 比如：原先的$(div:eq（index）)，其实我们也可以直接通过调用方法替代这种花里胡哨的写法——$(“div”).eq(index)。 下面给出几个例子： eq（index）：获取第N个元素 first ：获取第一个元素 last：获取最后一个元素 filter(expr/ obj/ ele/ fn):筛选出与指定表达式匹配的元素集合，用逗号分割多个表达式
jquery 筛选元素 (2)
weixin_34381666的博客
10-26 102
.add() 　　创建一个新的对象，元素添加到匹配的元素集合中。 　　.add(selector) 　　　　selector 一个字符串表示的选择器表达式。找到更多的元素添加到匹配的元素集合。 　　　　　　$("p").add("div") 　　.add(html) 　　　　html 　　　　　　HTML片段添加到匹配的元素集合中。 　　　　　　　　$('li').add(...
jquery的筛选元素,更新
weixin_30384031的博客
11-28 129
last() <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5&...
jQuery 筛选器简单操作示例
10-16
主要介绍了jQuery 筛选器简单操作,结合实例形式详细分析了jQuery筛选器针对元素、字符串、属性等操作常见技巧与操作注意实行,需要的朋友可以参考下
JQuery筛选
05-01
**jQuery筛选**是一种在网页开发中广泛使用的技巧，它允许开发者高效地操作DOM（文档对象模型）中的元素，实现各种动态效果和数据处理。在这个场景中，我们关注的是如何使用jQuery来实现城市名称按首字母排序的功能...
Jquery关于元素筛选
Vivianluolita的专栏
10-25 346
http://www.cnblogs.com/kissdodog/archive/2012/12/09/2809787.html （对于筛选父类元素的某个兄弟节点的div，其他兄弟不筛选。可以用not（））
jQuery的筛选操作2
qq_15652607的博客
09-23 377
 jQuery 的筛选常用函数： not, 排除指定的元素  slice， 选取指定元素的一个子集 find，选择一个元素，和空格操作相同，例如 $("p span")相同。 next, nextAll, nextUntil， 查找相邻的同辈元素（unitl的操作，不包含最终的那个元素） parent, parents, parentsUntil 查找当前元素的祖先元素 prev, p...
jquery 筛选元素方法
青天诀的专栏
12-15 1032
jQuery常用的元素查找方法总结 1.基础 $("#myELement")     选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素  $("div")           选择所有的div标签元素，返回div元素数组  $(".myClass")       选择使用myClass类的css的所有元素 
jQuery 知识点 (三) —— jQuery 元素筛选
wuxinwudai的专栏
09-09 376
<html> <head> <meta chartset="utf-8"> <title>jQuery 元素筛选</title> </head> <body> <div class="c1"> <ul id="colorlist"> <li><span>红色</span></li> <li><span>黄色</s
jQuery关于元素筛选问题
Alen的专栏
05-13 690
各位大虾，我是jQuery初学者，在学习过程中，遇到了一点问题希望大家能够帮忙解决下。下面是例子的代码和问题说明 在此说明一下，我用得是jQuery-1.7.2   问题：当我在查找div中类为.mini的非最后一个div元素时，为什么这样写就是在div和.mini中间加一个空格才能正确排除最后一个div元素$("div .mini:not(:last)").css("background"
jquery元素筛选和事件
huangql517的博客
06-20 340
1&gt;元素筛选方法 $(function(){ //jquery的遍历方法 .each() $('ul').children().each(function(index,ele){ console.log(index); console.log(ele); va...
Jquery筛选一览
Byte_Dance的博客
02-16 402
首先我们要搞清楚,筛选和选择器的区别 :选择器是直接返回选中的对象，比如$("hid") ,这么做是使用id选择器直接返回一个对象而筛选则是从已经找到的对象中进一步做一些选取操作,简单来说就是选择器操作的是HTML标签, 而筛选操作的是已经选取了的Jquery对象 , first()是从集合中返回需要的对象，不更改原来的集合，你可以对集合进行更过的过滤操作，而选择器你只能重新另外选对象了筛选 1....
jQuery元素的筛选
默默无闻但不碌碌无为
09-08 312
expr]
[JQuery]：jQuery筛选元素方法、操作CSS样式和处理事件方式
我只是个程序员。
10-01 1222
jQuery筛选DOM元素的常用方法，另外有在线的jQueryAPI文档和学习教程链接。
Jquery 筛选
饭桶一生奋斗
01-15 756
//is()函数用于判断当前jQuery对象所匹配的元素是否符合指定的表达式 //这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象、函数 //这里的expr 表示表达式 jQueryObject.is( expr )//eq()函数用于获取当前jQuery对象所匹配的元素中指定索引的元素 jQueryObject.eq( index )//first()函数用于获取
jquery 按照元素类筛选
最新发布
06-01
你可以使用 jQuery 中的 `.class` 选择器来按照元素类进行筛选。例如，如果你想选择所有类名为 `my-class` 的元素，可以使用以下代码： ```javascript $(".my-class") ``` 你还可以将类名与其他选择器组合使用，例如： ```javascript $("div.my-class") // 选择所有 div 元素中类名为 my-class 的元素 $(".parent .my-class") // 选择所有类名为 my-class 的元素，它们是类名为 parent 的元素的子元素 ``` 除了 `.class` 选择器之外，还有其他的 CSS 选择器可以用于按照元素类进行筛选。你可以查看 jQuery 的文档以了解更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值