jQuery筛选与文档处理

文章目录

• 一、筛选
• 二、文档处理
• 总结

一、筛选 

（1）过滤
 概述：

        根据给定的ID匹配一个元素

 first
 概述：

        获取第一个元素

代码如下（示例）：

$('li').first()

$('li').first()
 last
概述：

       获取最后个元素

代码如下（示例）：

$('li').last()
eq(N)
概述：

      获取第N个元素

代码如下（示例）：

$("p").eq(1)
 filter
概述：

        筛选出与指定表达式匹配的元素集合。

        这个方法用于缩小匹配的范围。用逗号分隔多个表达式

代码如下（示例）：

$("p").filter(".selected")
has
概述：

      保留包含特定后代的元素，去掉那些不含有指定后代的元素。

      .has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

代码如下（示例）：

$('li').has('ul').css('background-color', 'red');
not
概述：

        删除与指定表达式匹配的元素

代码如下（示例）：

$("p").not( $("#selected")[0] )
 （2）查找
 概述：

回调列表中添加一个回调或回调的集合。

children
概述：

     取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

代码如下（示例）：

$("div").children()
 find
概述：

        搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

        所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

代码如下（示例）：

$("p").find("span")
parent
概述：

      在给定的父元素下匹配所有的子元素

代码如下（示例）：

$("form > input")
prevAll
概述：

          查找当前元素之前所有的同辈元素

          可以用表达式过滤。

代码如下（示例）：

$("div:last").prevAll().addClass("before");
nextAll
概述：

    查找当前元素之后所有的同辈元素。

    可以用表达式过滤

代码如下（示例）：

$('li').has('ul').css('background-color', 'red');
siblings
概述：

        取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

代码如下（示例）：

$("div").siblings()
案例：

 

二、文档处理
(1)增
内部插入
append
概述：

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

代码如下（示例）：

$("p").append("<b>Hello</b>");
appendTo
概述：

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

代码如下（示例）：

$("p").appendTo("div");
prepend
概述：

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

代码如下（示例）：

$("form > input")
prependTo
概述：

         把所有匹配的元素前置到另一个、指定的元素元素集合中。

代码如下（示例）：

$("p").prependTo("#foo");
外部插入
after
概述：

在每个匹配的元素之后插入内容。

代码如下（示例）：

$("p").after("<b>Hello</b>");
before
概述：

        在每个匹配的元素之前插入内容。

代码如下（示例）：

$("p").before("<b>Hello</b>");
(2)删
empty
概述：

    删除匹配的元素集合中所有的子节点。

代码如下（示例）：

$("p").empty();
remove
概述：

 从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

代码如下（示例）：

$("p").remove();
(3)改
replaceWith
概述：

  将所有匹配的元素替换成指定的HTML或DOM元素。

代码如下（示例）：

$("p").replaceWith("<b>Paragraph. </b>");
案例：

三、总结