各位猿友们晚上好！今天任然是努力秃头的一天q_q，今天小刘学习的是jQuery里的筛选&文档处理，今日的内容相对简单一点，所以小刘感觉自己掌握的还算可以哈
先来看看今天总的思维导图
其中包括筛选的过滤方法与查找方法以及文档处理的增删改，语法还是很简单的，那我们开始吧！
下面是我们的<body>部分以及运行结果
我们就用这些来完成今天的任务：(内含所需方法)
过滤
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");
以上就是过滤部分啦，还是很简单的吧，接下来是
查找
以下是今日查找所需的方法
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");以上就是筛选的全部内容 接下来是
二，文档处理
文档处理分为对文档的增删改，筛选即为查
先来看看 增
内部插入例子：
//--内部插入(前面和后面)
// 插入到最后面(给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>");
其次是外部插入
外部插入例子：
//--外部插入(之前和之后)
// 在属性title为b的li前面插入一个a标签
$("ul>li").filter("[title=b]").before("<a href='#'>加自习</a>");
接下来是 改
举例：把li下面所有的span标签替换(改)为<a>标签
代码展示：
$("li span").replaceWith("<a href='#'>嗨害嗨</a>");结果展示：可以从右边看看到span标签已经变成了<a>标签 而且检查出来的代码也发生了改变（具体可以对比开始的效果展示图）
最后就是删除了，删除分为两点：删除内容和删除节点
例：清空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,点击按钮时即可回到顶部。
