jQuery03(筛选&文档处理)

首先我们先根据思维导图来了解我们今天的内容 ：

一、筛选：

1.1、过滤：

(1)、first():获取匹配的第一个元素

示例：获取ul中所有的li元素，然后找到第一个元素

代码：

代码可以分为上面两种写法，但是结果都是相同的

效果:

注意：如果是用第二种方式 .fisrt()的话 括号里面不能写入参数

(2)、last()：获得匹配的最后一个元素

示例：找到最后一个元素

代码：

 这个示例的代码分为上面两种方法

效果:

注意:第二种方式和上面.first()的用法一样 括号里面不能带参数

(3)、eq(N)：获取匹配的第N或-N个元素

示例：找到指定的某一个元素，例如第3个

代码：

效果：

注意:当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个。

(4)、filter(selector)：筛选出与指定表达式匹配的元素集合

方法用于:这个方法用于缩小匹配的范围。

示例：找到属性title为a的元素

代码方式:  

效果：

 

 注意：如果是属性的话双引号里面需要套上中括号 列如:"[title]"

(5)、has(selector)：筛选出包含特定特点的元素的集合

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

示例：筛选出有<span>标签的元素集合

方式：

效果：

 

(6)、not(expr|ele|fn)：筛选出不包含特定特点的元素的集合

expr:一个选择器字符串。

ele:一个DOM元素

fn:一个用来检查集合中每个元素的函数。this是当前的元素。

示例：筛选出没有title属性的元素集合

方式：

效果：

 

1.2、查找：

(1)、children([expr])：子标签中找

概述：

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

可以通过可选的表达式来过滤所匹配的子元素。

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

示例：查找ul的所有子标签,并且指定为li子标签

方式：

 用第一种方式或者用.children()都是可以的

 效果:

 

(2)、find(expr|obj|ele)：后代标签中找

概述：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

示例：查找ul下面所有的span标签

方式：

效果：

 

 

(3)、parent([expr])：父标签

概述：取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。

示例：查找b标签的父元素标签

方式：

效果：

(4)、prevAll([expr])：前面所有的兄弟标签

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

示例:查找第三个li标签前面所有的兄弟标签

思路：先找到第三个li标签的位置 然后再去找它前面的兄弟标签

方式：

 

效果：

 

(5)、nextAll()：后面所有的兄弟标签

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

思路：先找到第三个li标签的位置 然后再去找它后面的兄弟标签

方式：

效果：

 

(6)、siblings([expr])：前后所有的兄弟标签

概述：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

示例：查找第三个li标签所有的兄弟标签

思路：先找到第三个li标签的位置 然后再去找它其他的兄弟标签

方式：

效果：

 

二、文档处理

1、增

1.1、内部插入：

1.1.1后面插入:

(1)、append(content|fn)：将内容添加到指定的元素后面

概述:向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

方式： 效果：

 

(2)、appendTo()：和append()颠倒

概述: 把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

方式：

效果：

1.1.2、前面插入：

(1)、prepend()：将内容添加到指定元素前面

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

方式：

 效果：

 

(2)、prependTo():和prepend()颠倒

概述：把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

方式：

 效果：

 

1.2、外部插入：

(1)、after()：在匹配元素之后插入内容

方式：

 效果：

 

(2)、before()：在匹配元素之前插入内容

方式：

 

效果：

 

2、删

2.1、empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）

方式：

 

效果：

 

2.2、remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

方式：

效果：

3、改：replaceWith()：将所有匹配的元素替换成指定的内容

方式：

效果：

 

三、补充知识点：位置

返回顶部效果：

代码：

 效果：

 抱歉 由于没有录屏，所有返回顶部的效果不是很好，不过可以去尝试一下

四、总计：

以上就是今日的内容，我们下次再见 拜拜