其他分享
首页 > 其他分享> > jQuery03(筛选&文档处理)

jQuery03(筛选&文档处理)

作者：互联网

各位猿友们晚上好！今天任然是努力秃头的一天q_q，今天小刘学习的是jQuery里的筛选&文档处理，今日的内容相对简单一点，所以小刘感觉自己掌握的还算可以哈

先来看看今天总的思维导图

 其中包括筛选的过滤方法与查找方法以及文档处理的增删改，语法还是很简单的，那我们开始吧！

 下面是我们的<body>部分以及运行结果

 

 

 我们就用这些来完成今天的任务：(内含所需方法)

/* 一、 在jQuery对象数组中，筛选出一部分元素 *
                //1.1 过滤

                //--过滤出指定表达式匹配的元素
                // 获取ul中所有的li元素，然后找到第一个元素 —— .first

                // 找到最后一个元素——.last

                // 找到指定的某一个元素，例如第3个——.ea(参数)
                //--过滤出指定表达式匹配的元素集合——.filter(参数) 注：属性需加[ ] 如.filter("[ title=a]")
                // 找到属性title为a的元素

                // 筛选出有title属性的元素集合

                // 筛选出有<span>标签的元素集合

                // 筛选出没有title属性的元素集合
                

                //1.2 查找

                // 查找ul的所有子标签,并且指定为li子标签——.children(参数)

                // 查找ul下面所有的span标签——.find('span')

                // 查找b标签的父元素标签——.parent()

                // 查找第三个li标签前面所有的兄弟标签——.prevAll( )

                // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签——.prevAll()

                // 查找第三个li标签所有的兄弟标签——.siblings
                
                /* 二、 文档处理  */

                //2.1 增
                //--内部插入(前面和后面)
                //   插入到最后面(给ul中最后一个li中插入一个a标签)——.append

                //   插入到最前面(给ul中第一个li中插入一个a标签)——.prepend
                //--外部插入(之前和之后)
                //   在属性title为b的li前面插入一个a标签——.before

                //   在属性title为b的li后面插入一个a标签——.after
                //2.2 改                
                //把li下面所有的span标签替换为<a>标签——.replaceWith

                //2.3 删                
                //清空ul中所有li的内容——.empty()

                //移除ul中所有的li——.remove()

                                                        过滤

1.过滤出指定表达式匹配的元素
1.1 获取ul中所有的li元素，然后找到第一个元素（最后一个）

$("ul>li:first").css("background","yellow");//给第一个li元素添加背景颜色
$("ul>li").first().css("background","yellow");//第二种写法括号外.first()

// 找到最后一个元素同上(.last)
// $("ul>li:last").css("background","yellow");

效果展示(给第一个li元素添加背景颜色) 

1.2,找到指定的某一个元素，例如第3个以及倒数过滤方法（客户角度，即下标为2）

 $("ul>li:eq(2)").css("background","yellow");
 $("ul>li").eq(-2).css("background","yellow");//倒数第几个

 过滤出指定表达式匹配的元素集合
 1.3，找到属性title 为/不为 a的元素

$("ul>li").filter("[title=a]").css("background","yellow");//为a
$("ul>li").filter("[title][title!=a]").css("background","yellow");//不为a

小刘就不一一例举出来了，以下是剩余的过滤方法 (   二次提醒 属性记得加[ ] 如.filter("[ title=a]")   )

// 筛选出有title属性的元素集合
 $("ul>li").filter("[title]").css("background","yellow");

// 筛选出有<span>标签的元素集合
 $("ul>li").has("span").css("background","yellow");
				
// 筛选出没有title属性的元素集合
 $("ul>li").not("[title]").css("background","yellow");

以上就是过滤部分啦，还是很简单的吧，接下来是

                                        查找

以下是今日查找所需的方法

children([expr])

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

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

find(expr|obj|ele)

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

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

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

prevAll([expr])

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

可以用表达式过滤。

nextAll([expr])

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

可以用表达式过滤

siblings([expr])

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

$("ul>li").css("background","yellow");
$("ul").children("li").css("background","yellow");

1.5 查找ul下面所有的span标签 

$("ul span").css("background","yellow");
$("ul").find("span").css("background","yellow");

1.6 查找b标签的父元素标签

$("b").parent().css("background","yellow");

1.7 查找第三个li标签前面所有的兄弟标签

$("ul>li").eq(2).prevAll().css("background","yellow");

1.8 查找第三个li标签后面所有的兄弟标签,并且只能是li标签

$("ul>li").eq(2).nextAll("li").css("background","yellow");

1.9 查找第三个li标签所有的兄弟标签

$("ul>li").eq(2).siblings().css("background","yellow");

以上就是筛选的全部内容 接下来是

                                              二，文档处理

文档处理分为对文档的增删改，筛选即为查

先来看看  增

2.1 增：

增分为内部插入(前面和后面)与外部插入(之前和之后)

内部插入

append(content|fn)       — 插入到后面

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

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

appendTo(content)

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

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

prepend(content)        —插入到前面

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

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

prependTo(content)

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

同appendTo() 一样，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

 内部插入例子：

//--内部插入(前面和后面)
				// 插入到最后面(给ul中最后一个li中插入一个a标签)
				$("ul>li").last().append("<a href='http://www.baidu.com'>嘿嘿嘿</a>");
				$("<a href='http://www.baidu.com'>嘿嘿嘿</a>").appendTo($("ul>li").last());

//   插入到最前面(给ul中第一个li中插入一个a标签)
				$("ul>li").first().prepend("<a href='http://www.baidu.com'>嘿嘿嘿</a>");

 其次是外部插入

外部插入

after(content|fn)

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

before(content|fn)

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

 外部插入例子：

//--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				$("ul>li").filter("[title=b]").before("<a href='#'>加自习</a>");

接下来是 改

2.2  改        

replaceWith(content|fn)

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

举例：把li下面所有的span标签替换(改)为<a>标签

代码展示：

$("li span").replaceWith("<a href='#'>嗨害嗨</a>");

 结果展示：可以从右边看看到span标签已经变成了<a>标签 而且检查出来的代码也发生了改变（具体可以对比开始的效果展示图）

 最后就是删除了，删除分为两点：删除内容和删除节点

2.3 删

remove([expr])

从DOM中删除所有匹配的元素（删除元素后节点任然存在，只是变为空）

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

empty()

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

 例：清空ul中所有li的内容

 $("ul li").empty();

     移除ul中所有的li节点

$("ul li").remove();

 筛选和文档处理的所有内容就在这了，最后！再给大家来一波补充——

返回顶部

这波相对来说简单不少，emm虽然都挺简单的,请看操作

咱先做个一键返回顶部的按钮

 这是所需要的代码，比较的少，其实只需要方法里的最后赋值的一行即可

//2.获取顶部距离=返回顶部
				$("#btn").click(function(){//给按钮设置点击事件
					//获取顶部距离
					var a=$("body,html").scrollTop();
					alert(a);//查看距离长远
					
					//赋值
					$("body,html").scrollTop(0);
					
				})

方法中只需要用到scrollTop()

scrollTop()代表倒数第二张图中右侧的滚动条距离其顶部的距离

scrollTop()既可以用来拿值(接收即可)，也可以用来赋值，即在括号中放距离即可

所以我们这个操作需要做的只是把距离设为0,点击按钮时即可回到顶部。

OK，这就是小刘的今日学习了，就与大家分享到这里啦，有讲的不到位的和可改进的地方希望各位猿兄多指点，如果有从本章从有所收获可以关注一波，小刘需要你！最后祝自己也祝大家每天都能有所收获，每天进步一点点！向一名优秀程序猿进发！

标签：插入,标签,元素,yellow,li,ul,文档,筛选,jQuery03
来源： https://blog.csdn.net/weixin_64313980/article/details/123584577