css代码

.big{
				width: 400px;
				height: 400px;
				background: yellow;
				position: absolute;
				top:50px;
				left: 50px;			}
			.small{
				width: 200px;
				height: 200px;
				background: blue;
				position: absolute;
				top:50px;
				left: 50px;
			}

js代码

$(function(){

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

				//--过滤出指定表达式匹配的元素
				// 获取ul中所有的li元素，然后找到第一个元素
				// $("ul>li").first().css("background","green")
				// 找到最后一个元素
				// $("ul>li").last().css("background","green")
				// 找到指定的某一个元素，例如第3个
				// $("ul>li").eq(3).css("background","green")
				
				//--过滤出指定表达式匹配的元素集合
				// 找到属性title为a的元素
				// $("ul>li").filter("[title][title!=a]").css("background","green")
				// 筛选出有title属性的元素集合
				// $("ul>li").filter("[title]").css("background","green")
				// 筛选出有<span>标签的元素集合
				// $("ul>li").has("span").css("background","green")
				// 筛选出没有title属性的元素集合
				// $("ul>li").not("[title]").css("background","green")

				//1.2 查找

				// 查找ul的所有子标签,并且指定为li子标签
				// $("ul").children("li").css("background","green")
				// 查找ul下面所有的span标签
				// $("ul").find("span").css("background","green")
				// $("ul span").css("background","green")
				// 查找b标签的父元素标签
				// $("b").parent().css("background","green")
				// 查找第三个li标签前面所有的兄弟标签
				// $("ul>li").eq(2).prevAll().css("background","green")
				// $("ul>li:eq(2)").prevAll().css("background","green")
				// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
				// $("ul>li:eq(2)").nextAll("li").css("background","green")
				// 查找第三个li标签所有的兄弟标签
				// $("ul>li:eq(2)").siblings().css("background","yellow")


				/* 二、 文档处理  */

				//2.1 增
				//--内部插入(前面和后面)
				//   插入到最后面(给ul中最后一个li中插入一个a标签)
				// $("ul>li").last().append("<a href='#'>百度一哈</a>")
				// $("<a href='#'>百度一哈</a>").appendTo($("ul>li").last())
				//   插入到最前面(给ul中第一个li中插入一个a标签)
				// $("ul>li").first().prepend("<a href='#'>百度一哈</a>")
				//--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				// $("ul>li").filter("[title=b]").before("<a href='#'>百度一哈</a>")
				//   在属性title为b的li后面插入一个a标签
				// $("ul>li").filter("[title=b]").after("<a href='#'>百度一哈</a>")
				//2.2 改				
				//把li下面所有的span标签替换为<a>标签
				// $("li span").replaceWith("<a>哈哈</a>")
				//2.3 删				
				//删除ul中所有的li
				// $("ul").empty();//不包括自己
				// $("ul").remove()//包括
				
				
				//补充内容：位置
				//offset():相对大容器的位置
// 				var b = $(".big").offset();
// 				console.info(b.top,b.left)
				
				//position():相对于父容器的位置
// 				var b = $(".big").position();
// 				console.info(b.top,b.left)

// 				var s = $(".small").offset();
// 				console.info(s.top,s.left)
// 				var s = $(".small").position();
// 				console.info(s.top,s.left)

				$("#btn").click(function(){
					//获取滚动条的距离
// 					var t = $("html,body").scrollTop();
// 					console.info(t)

					$("html,body").scrollTop(0)
				})
				
			})

html代码

<!-- 筛选和查找案例 -->
		<ul>
			<li>1</li>
			<li title="a">2</li>
			<li title="b">3</li>
			<li title="a"><span><b>4</b></span></li>
			<li title="b"><span>5</span></li>
			<ol>
				<li>6</li>
				<li>7</li>
			</ol>
			<span>8</span>
		</ul>
		
		<div class="big">
			<div class="small"></div>
		</div>
		<input type="button"  value="返回顶部" id="btn"/>

结构图