三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>阅谁问君诵,水落清香浮</h1> <div> <p>这是 div 中的一个段落。</p> </div> <div> <p>这是另外一个 div 中的一个段落。</p> </div> <p>这是一个段落。</p> <script src="jquery-1.10.1.min.js"></script> <script> $(function() { /* * jQuery first() 方法 * first() 方法返回被选元素的首个元素。 * 下面的例子选取首个 <div> 元素内部的第一个 <p> 元素: */ $("div p").first().css("background-color", "red"); }); </script> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>阅谁问君诵,水落清香浮</h1> <div> <p>这是 div 中的一个段落。</p> </div> <div> <p>这是另外一个 div 中的一个段落。</p> </div> <p>这是一个段落。</p> <script src="jquery-1.10.1.min.js"></script> <script> $(function() { /* * jQuery last() 方法 * last() 方法返回被选元素的最后一个元素。 * 下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素: */ $("div p").last().css("background-color","red"); }); </script> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>阅谁问君诵,水落清香浮</h1> <div> <p>这是 div 中的一个段落。</p> </div> <div> <p>这是另外一个 div 中的一个段落。</p> </div> <p>这是一个段落。</p> <script src="jquery-1.10.1.min.js"></script> <script> $(function() { /* * jQuery eq() 方法 * eq() 方法返回被选元素中带有指定索引号的元素。 * 索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1): */ $("p").eq(1).css("background-color","yellow"); }); </script> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>阅谁问君诵,水落清香浮</h1> <div> <p class="url">这是 div 中的一个段落。</p> </div> <div> <p class="url">这是另外一个 div 中的一个段落。</p> </div> <p>这是一个段落。</p> <script src="jquery-1.10.1.min.js"></script> <script> $(function() { /* * jQuery filter() 方法 * filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。 * 下面的例子返回带有类名 "url" 的所有 <p> 元素: */ $("p").filter(".url").css("background-color","blue"); }); </script> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>阅谁问君诵,水落清香浮</h1> <div> <p class="url">这是 div 中的一个段落。</p> </div> <div> <p class="url">这是另外一个 div 中的一个段落。</p> </div> <p>这是一个段落。</p> <script src="jquery-1.10.1.min.js"></script> <script> $(function() { /* * jQuery not() 方法 * not() 方法返回不匹配标准的所有元素。 * 提示:not() 方法与 filter() 相反。 * 下面的例子返回不带有类名 "url" 的所有 <p> 元素: */ $("p").not(".url").css("background-color","blue"); }); </script> </body> </html>
效果图:
相关推荐
JQ CSS3过滤动画效果代码rar
NULL 博文链接:https://onestopweb.iteye.com/blog/2290081
NULL 博文链接:https://onestopweb.iteye.com/blog/2290070
关于JSP的购物车jq维护+结算过滤器 不错的资料好好看看
NULL 博文链接:https://onestopweb.iteye.com/blog/2288908
NULL 博文链接:https://onestopweb.iteye.com/blog/2392744
NULL 博文链接:https://onestopweb.iteye.com/blog/2290078
JQ+CSS3过滤动画效果代码.zip
主要介绍了jquery数组过滤筛选方法grep()简介,需要的朋友可以参考下
NULL 博文链接:https://onestopweb.iteye.com/blog/2290076
NULL 博文链接:https://onestopweb.iteye.com/blog/2290062
使用jquery实现的类似京东商品的多条件过滤功能
该项目实现了JQ过滤器语言的子集,旨在用于JavaScript中的简单过滤作业,其中JavaScript由用户提供。 它是如何工作的? 它使用语法将JQ表达式转换为一系列“操作码”,每个操作码代表一个JQ过滤器操作。 每个操作...
jquery ztree实现模糊查询功能,给树上的结点添加过滤器
jquery按字母顺序过滤列表是一款jquery listnav分类插件按英文字母顺序图片分类和文字列表分类。
一款采用数组去重的方法过滤重复的水果图片效果代码,jQuery水果图片重复筛选去除代码。
oq:一种高性能的便携式jq包装器,用于简化JSON格式以外的格式的使用和输出; 使用jq过滤器转换数据
jq 允许你直接在命令行下对 JSON 进行操作,包括分片、过滤、转换等等。 让我们通过几个例子来说明 jq 的功能: 一、输出格式化,漂亮的打印效果 如果我们用文本编辑器打开 JSON,有时候可能看起来会一团糟,但是...
jQuery过滤关键字插件。jquery.fastLiveFilter.js