【无标题】

最新推荐文章于 2023-06-16 20:36:22 发布
```
最新推荐文章于 2023-06-16 20:36:22 发布
阅读量54
点赞数
CC 4.0 BY-SA版权
文章标签： jquery
本文链接：https://blog.youkuaiyun.com/csnbb/article/details/123584141
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#aa {
				width: 200px;
				height: 200px;
				background-color: pink;
				position: absolute;
				/*绝对定位*/
				left: 50px;
				/*左边*/
				top: 50px;
				/*上部*/
			}

			#bb {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				/*绝对定位*/
				left: 50px;
				/*左边*/
				top: 50px;
				/*上部*/
			}
		</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","yellow");
			// $("ul>li").first().css("background","yellow");

			// 找到最后一个元素
			// $("ul>li:last").css("background","yellow");
			// 找到指定的某一个元素，例如第3个
			// $("ul>li:eq(2)").css("background","yellow");
			// $("ul>li").eq(-2).css("background","yellow");//倒数第几个

			//--过滤出指定表达式匹配的元素集合
			// 找到属性title为a的元素
			// $("ul>li").filter("[title=a]").css("background","yellow");

			//找到属性title不为a的元素
			// $("ul>li").filter("[title][title!=a]").css("background","yellow");

			// 筛选出有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.2 查找

			// 查找ul的所有子标签,并且指定为li子标签
			// $("ul>li").css("background","yellow");
			// $("ul").children("li").css("background","yellow");
			// 查找ul下面所有的span标签
			// $("ul span").css("background","yellow");
			// $("ul").find("span").css("background","yellow");

			// 查找b标签的父元素标签
			// $("b").parent().css("background","yellow");
			// 查找第三个li标签前面所有的兄弟标签
			// $("ul>li").eq(2).prevAll().css("background","yellow");
			// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
			// $("ul>li").eq(2).nextAll("li").css("background","yellow");

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

			/* 二、 文档处理  */

			//2.1 增
			//--内部插入(前面和后面)
			//   插入到最后面(给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>");
			//   在属性title为b的li后面插入一个a标签
			// $("ul>li").filter("[title=b]").after("<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.left);
			// var b=$("#aa").position();//父容器
			// console.info(b.top,b.left);

			// var a=$("#bb").offset();//大容器
			// console.info(a.top,a.left);
			// var b=$("#bb").position();//父容器
			// console.info(b.top,b.left);

			//2.获取顶部距离=返回顶部
			/* $("#btn").click(function(){
				//获取顶部距离
				/* var a=$("body,html").scrollTop();
				alert(a); */

			//赋值
			// $("body,html").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>
jQuery_03笔记
自己理解才是王道