`

jquery系列之三——筛选

 
阅读更多

1. 匹配第N个元素：.eq(index|-index)

注意：参数index指示元素基于0的位置,这个元素的位置是从0算起。

-index指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)

示例1：获取匹配的第二个元素 

html:
<p> This is just a test.</p>
<p> So is this</p>
jquery:
$("p").eq(1)

 结果:

<p> So is this</p>

示例二：获取匹配的倒数第二个元素 

html:

<p> This is just a test.</p>
<p> So is this</p>
jquery:
$("p").eq(-2)

 结果:

<p> This is just a test.</p>

 

2. 获取第一个元素：.first()

示例：获取匹配的第一个元素。  

html:
<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</li>
</ul>
jquery:
$('li').first()
 结果: 
[ <li>list item 1</li> ]

 

3. 获取最后一个元素：.last()

示例：获取匹配的最后一个元素。  

html:
<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</li>
</ul>
jquery:
$('li').last()
结果:
[ <li>list item 5</li> ]

 

4. 检查当前的元素是否含有某个特定的类，如果有，则返回true：.hasClass(class)

它等价于：is('.'+class)

示例：给包含有某个类的元素进行一个动画。 

html:
<div class="protected"></div>
<div></div>
jquery:
$("div").click(function(){
  if($(this).hasClass("protected") )
    $(this).animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});
 

5. 筛选包含指定元素的元素：.has(expr|ele)

示例：给含有ul的li加上背景色。  

html:
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
jquery:
$('li').has('ul').css('background-color', 'red');
 

6. 删除与指定表达式匹配的元素：.not(expr|ele)

示例：从p元素中删除带有id为select 的元素。  

html:
<p>Hello</p>
<p id="selected">Hello Again</p>
jquery:
$("p").not($("#selected"))
结果:
[ <p>Hello</p> ]

 

7. 选取匹配的子集：.slice(start, [end])

示例1：选择第一个p元素。  

html:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
jquery:
$("p").slice(0, 1);
结果:
[ <p>Hello</p> ]

示例2：选取第最后一个p元素。  

html:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
jquery:
$("p").slice(-1);
结果:
[ <p>World</p> ]

 

8. 查找子元素：.children([expr])

注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

示例1：查找div中的每个子元素。  

html:
<p>Hello</p>
<div>
   <span>Hello Again</span>
</div>
<p>And Again</p>
jquery:
$("div").children()
结果:
[ <span>Hello Again</span> ]

示例2：查找div中的.selected 的类子元素。  

html:
<div>
   <span>Hello</span>
   <p class="selected">Hello Again</p>
   <p>And Again</p>
</div>
jquery:
$("div").children(".selected")
结果:
[ <p class="selected">Hello Again</p> ]

 

9. 查找所有与指定表达式匹配的元素：.find(expr|obj|ele)

注意：

children() 方法返回被选元素的所有直接子元素。 

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

示例1：从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。  

html:
<p>
  <span>Hello</span>, how are you?
</p>
jquery:
$("p").find("span")
结果:
[ <span>Hello</span> ]

 

10. 查找当前元素后面的同辈元素：.next([expr])

示例1：找到每个段落的后面紧邻的同辈元素。  

html:
<p>Hello</p>
<p>Hello Again</p>
<div>
  <span>And Again</span>
</div>
jquery:
$("p").next()
结果:
[ 
  <p>Hello Again</p>, 
  <div>
     <span>And Again</span>
  </div> 
]

示例2：找到每个段落的后面紧邻的同辈元素中类名为selected的元素。 

html:
<p>Hello</p>
<p class="selected">Hello Again</p>
<div>
   <span>And Again</span>
</div>
jquery:
$("p").next(".selected")
结果:
[ 
  <p class="selected">Hello Again</p>
]

 

11. 查找当前元素后面所有的同辈元素：.nextAll([expr])

示例：给第一个div之后的所有元素加个类。  

html:
<div></div>
<div></div>
<div></div>
<div></div>
jquery:
$("div:first").nextAll().addClass("after");
结果:
[ 
  <div class="after"></div>
  <div class="after"></div>
  <div class="after"></div>
]

 

12. 查找所有与指定表达式匹配的父亲元素：.parent([expr])

示例1：查找每个段落的父元素。  

html:
<div>
   <p>Hello</p>
   <p>Hello</p>
</div>
jquery:
$("p").parent()
结果:
[ 
 <div>
   <p>Hello</p>
   <p>Hello</p>
 </div>
]

示例2：查找段落的父元素中每个类名为selected的父元素。

html:
<div>
   <p>Hello</p>
</div>
<div class="selected">
   <p>Hello Again</p>
</div>

 jquery:

$("p").parent(".selected")
结果:
[ 
  <div class="selected">
     <p>Hello Again</p>
  </div>
]

 

13. 查找所有与指定表达式匹配的祖先元素：.parents([expr])

注意：不包含根元素

示例1：找到每个span元素的所有祖先元素。  

html:
<html>
   <body>
      <div>
        <p>
          <span>Hello</span>
        </p>
        <span>Hello Again</span>
      </div>
   </body>
</html>
jquery:
$("span").parents()
结果:
[ 
 <body>
  <div>
    <p>
       <span>Hello</span>
    </p>
    <span>Hello Again</span>
   </div>
 </body>
]

示例2：找到每个span的所有是p元素的祖先元素。  

jquery:
$("span").parents("p")
结果:
[ 
  <p>
     <span>Hello</span>
  </p>
]

 

14. 查找当前元素之前紧邻的一个同辈元素：.prev([expr])

注意：只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

示例1：找到每个段落紧邻的前一个同辈元素。  

html:
<p>Hello</p>
<div>
   <span>Hello Again</span>
</div>
<p>And Again</p>
jquery:
$("p").prev()
结果:
[ 
 <div>
   <span>Hello Again</span>
 </div>
]

示例2：找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

html:
<div>
  <span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>

jquery:

$("p").prev(".selected")
结果:
[ <p class="selected">Hello Again</p> ]

 

15. 查找当前元素之前所有同辈元素集合：.prevAll([expr])

示例1：给最后一个之前的所有div加上一个类（注意，并不包括它本身）。  

html:
<div></div>
<div></div>
<div></div>
<div></div>
jquery:
$("div:last").prevAll().addClass("before");
结果:
[ 
  <div class="before"></div>,
  <div class="before"></div>,
  <div class="before"></div>
]

 

16. 查找当前元素的所有同辈元素集合：.siblings([expr])

示例1：找到每个div的所有同辈元素。  

html:
<p>Hello</p>
<div>
   <span>Hello Again</span>
</div>
<p>And Again</p>
jquery:
$("div").siblings()
结果:
[ 
  <p>Hello</p>,
  <p>And Again</p>
]

示例2：找到每个div的所有同辈元素。  

html:
<div>
  <span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>
jquery:
$("div").siblings(".selected")
结果:
[ 
  <p class="selected">Hello Again</p>
]

 

 

分享到：
| jquery系列之二——属性操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery商品分类多项筛选菜单.zip

    首先，我们来看"jQuery商品分类多项筛选菜单"的核心——jQuery-1.8.3.min.js。这是jQuery库的一个版本，包含了所有jQuery的基本功能和方法。在该筛选菜单的实现中，主要利用了jQuery的选择器、事件处理和DOM操作等...

    网页模板——jQuery金融贷款分类筛选查询代码.zip

    【标题】"网页模板——jQuery金融贷款分类筛选查询代码.zip" 涉及的知识点主要集中在前端开发领域，特别是关于使用jQuery实现动态的金融贷款分类筛选查询功能。在这个项目中，开发者可能使用了HTML、CSS和JavaScript...

    网页模板——jQuery实现搜索框输入文字过滤筛选特效源码.zip

    网页模板中的jQuery搜索框输入文字过滤筛选特效是前端开发中常用的一种交互设计，它能提升用户体验，使用户在大量数据中快速找到所需信息。这个源码包提供了实现这一功能的具体代码，下面将详细讲解相关知识点。 1....

    jquery——>api

    选择器是jQuery的核心功能之一，用于在DOM（文档对象模型）中查找元素。常见的选择器包括： 1. **ID选择器**: `$("#elementID")` - 通过元素的ID查找单个元素。 2. **类选择器**: `$(".className")` - 查找所有具有...

    jQuery带搜索筛选功能的下拉框美化插件.zip

    首先，我们来了解这个插件的核心——jQuery库。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个插件中，jQuery是实现动态交互的基础，通过它的API我们可以方便地...

    jquery.jqgrid最新版

    《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件，主要用于构建数据密集型Web应用程序，特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...

    网页模板——jQuery实现的去哪儿城市选择特效源码.zip

    网页模板中的jQuery实现去哪儿城市选择特效源码是一个用于构建交互式城市选择功能的代码资源，常见于旅游、出行类网站，旨在提供用户友好的目的地筛选体验。这个特效源码利用了jQuery库的强大功能，结合HTML、CSS和...

    ASP.NET源码——GridView+Jquery实现的TreeGrid.zip

    在本压缩包"ASP.NET源码——GridView+Jquery实现的TreeGrid.zip"中，我们聚焦于一个特定的功能：使用GridView控件和jQuery库来创建一个TreeGrid。TreeGrid是一种混合了树形结构和表格视图的用户界面元素，它允许用户...

    筛选过滤插件

    本文将深入探讨一款功能强大的jQuery筛选过滤插件——Filterizr，它支持单选、多选以及排序等多种功能。 **Filterizr简介** Filterizr是一款基于jQuery的轻量级插件，专为实现高效的数据过滤而设计。它允许用户...

    Js与JQUERY技术应用_ppt

    在"Js与JQUERY技术应用_ppt"这个压缩包中，包含了一系列关于JavaScript和jQuery的实战教程： 1. **CH01——JavaScript基础.pptx**： 这一部分主要讲解JavaScript的基础知识，可能涵盖了变量声明、数据类型（如字符...

    jquery.autocomplete.js资源压缩包下载

    在JavaScript的世界里，jQuery库为我们提供了实现这一功能的强大工具——`jquery.autocomplete.js`。本文将深入探讨这个资源压缩包，了解其工作原理，以及如何在项目中应用。 `jquery.autocomplete.js`是jQuery的一...

    jQuery权威指南-源代码

    《jQuery权威指南》除了理论知识丰富而全面外，它还有一个最大的特点就是注重实战，每个知识点都有一个完整的案例，包括需求分析、代码实现和结果展示三个部分，而且还包含两个综合性的案例，它的实践性之强是目前...

    Jquery中文帮助文档

    在提供的两个文件——`jquery 1.7 中文 api 修正版.chm`和`jquery 1.7 中文 api 修正版.chw`中，`.chm`是Windows帮助文件格式，包含结构化的帮助文档，用户可以通过索引、搜索等方式快速查找所需信息。`.chw`可能是...

    jquery.multiselect.filter.zip

    为了解决这一问题，开发者们引入了jQuery插件——jQuery Multiselect Filter，它不仅提供了多选功能，还内置了搜索过滤功能，极大地提升了用户在选择项时的效率。 jQuery Multiselect Filter插件是基于jQuery库的，...

    jquery搜索结果带智能提醒的input插件searchableSelect.js下载地址.rar

    这里我们关注的是一个基于jQuery的特定插件——searchableSelect.js，它为传统的HTML选择（select）元素提供了搜索功能和智能提示，极大地提升了用户在交互式表单中的体验。 首先，我们要理解`searchableSelect.js`...

    jQuery获取所有父级元素及同级元素及子元素的方法(推荐)

    ——————————————————————————– 2.获取同级元素 $("#id").next(selector) 获得匹配元素紧邻的下一个同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。 $("#id").nextAll...

    jquery的下拉框检索js

    《jQuery下拉框检索功能——Chosen插件详解》 在网页开发中，下拉框（Select）是一种常见的用户交互元素，它用于提供一组预定义的选项供用户选择。然而，原生的HTML下拉框在用户体验和功能扩展上存在局限，尤其是在...

    JQuery快速学一(强悍的选择器)

    **jQuery快速学——强悍的选择器** 在Web开发中，jQuery是一个强大的JavaScript库，极大地简化了DOM操作、事件处理和动画制作。本章我们将深入探讨jQuery的选择器，它们是jQuery库中的核心部分，允许我们高效地选取...

Magicbox
Global site tag (gtag.js) - Google Analytics