【无标题】

最新推荐文章于 2025-05-03 10:56:02 发布
巴枝子
最新推荐文章于 2025-05-03 10:56:02 发布
阅读量44
点赞数
文章标签： java
本文链接：https://blog.youkuaiyun.com/fddggghrr/article/details/123619495
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		#aa{
			width:200px;
			height:200px;
			background-color: brown;
			position: absolute;/* 绝对位置 */
			top:50px;/* 顶部 */
			left:50px;/* 左边 */
		}
		#bb{
			width:100px;
			height:100px;
			background-color:cadetblue;
		}
		
		
		
		</style>
		<!-- 引入外部js -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		
		<script type="text/javascript">
			$(function(){
				/* 一、 在jQuery对象数组中，筛选出一部分元素 */
				
				//1.1 过滤

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

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

				//1.2 查找

				// 查找ul的所有子标签,并且指定为li子标签
				// $("ul").children().css("background","pink");

				// 查找ul下面所有的span标签
				// $("ul span").css("background","pink");
				// $("ul").find("span").css("background","pink");

				// 查找b标签的父元素标签
				// $("b").parent().css("background","pink");

				// 查找第三个li标签前面所有的兄弟标签
				// $("ul>li").eq(2).prevAll().css("backfround","pink");

				// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
				// $("ul>li").eq(2).nextAll("li").css("backfround","pink");

				// 查找第三个li标签所有的兄弟标签
				// $("ul>li").eq(2).siblings().css("background","pink");


				/* 二、 文档处理  */

				//2.1 增
				//--内部插入(前面和后面)
				//   插入到最后面(给ul中最后一个li中插入一个a标签)
				// $("ul>li:last").append("<a href='#'>打包</a>")
				// $("<a href='#'>打包</a>").appendTo($("ul>li:last"))

				//   插入到最前面(给ul中第一个li中插入一个a标签)
				// $("ul>li:last").prepend("<a href='#'>打包</a>")

				//--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				// $("ul>li").filter("title=b").before("<a href='#'>打包</a>")
				//   在属性title为b的li后面插入一个a标签
                  // $("li span").replaceWith("<a href='#'>打包</a>")
				//2.2 改				
				//把li下面所有的span标签替换为<a>标签
				// $("li span").replaceWith("<a href='#'>打包</a>)

				//2.3 删				
				//清空ul中所有li的内容
				// $("ul>li").empty();

				//移除ul中所有的li
				// $("ul li").remove();
				
				// 补充知识点：位置
				// 1.区分大容器和大容器
				/* var a=$("#aa").offset();//大容器
				console.info(a.top,a.length)
				var a=$("#aa").position();//父容器
				console.info(b.top,b.length) */
				
				var a=$("#bb").offset();//大容器
				console.info(a.top,a.length)
				var a=$("#bb").position();//父容器
				console.info(b.top,b.length)
				// 2.获取距离上面的滚动距离 返回顶部功能
				$("#btn").click(function(){
					/* 拿值
					var a=$("html,body").scrollTop();
					alert(a);
					*/
				   //返回顶部
				   $("html,body").scrollTop(0);
				})
			})
		</script>
	</head>
	
	<body>
		<h2>补充知识点：位置</h2>
		<div id="aa">
			<div id="bb"></div>
		</div>
		<h2>jQuery03：筛选、文档处理</h2>
		<!-- 筛选和查找案例 -->
		<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>
		<button id="btn">返回顶部</button>
	</body>
</html>