jQuery03

已于 2022-03-20 19:09:31 修改
阅读量646 收藏
点赞数
于 2022-03-19 21:06:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63667859/article/details/123602745
版权

jquery 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#aa{
				width: 200px;
				height: 200px;
				background-color: darkolivegreen;
				position: absolute;/* 绝对定位 */
				top: 50px;/* 顶部 */
				left: 50px;/* 左边 */
			}
			#bb{
				width: 100px;
				height: 100px;
				background-color: darkkhaki;
				position: absolute;
				top: 50px;/* 顶部 */
				left: 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","red");
				//$("ul li:first").css("background","red");


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


				// 找到指定的某一个元素，例如第3个
				//$("ul li").eq(2).css("background","red");
				//$("ul li:eq(2)").css("background","red");



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

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

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

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

				//1.2 查找

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

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

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


				// 查找第三个li标签前面所有的兄弟标签
				//$("li:eq(2)").prevAll().css("background","red");

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


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


				/* 二、 文档处理  */

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

				//   插入到最前面(给ul中第一个li中插入一个a标签)
				//$("ul li:first").prepend("<a>1</a>");
				//$("<a>1</a>").prependTo("ul li:first");


				//--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				//$("ul>li").filter("[title=b]").before("<a>大炮</a>")
				
				
				//   在属性title为b的li后面插入一个a标签
				//$("ul>li").filter("[title=b]").after("<a>大炮</a>")


				//2.2 改				
				//把li下面所有的span标签替换为<a>标签
				//$("ul li span").replaceWith("<a>大炮</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.如何来获取鼠标距离上面的滚动距离
				$("#btna").click(function(){
					//拿值
					/* var as=$("html,body").scrollTop();
					alert(as); */
					
					//返回顶部
					$("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="btna">返回顶部</button>
	</body>
</html>

ケイ907
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery文档03
06-20
jquery文档03
03_JQuery.zip
08-06
《jQuery 1.7：深度探索与应用指南》 jQuery，作为一款强大的JavaScript库，以其简洁的API和广泛的浏览器兼容性赢得了全球开发者的喜爱。在本文中，我们将深入探讨jQuery 1.7版本，该版本在jQuery的发展历程中占据...
jQuery03(筛选&文档处理)
yifei_345678的博客
03-17 660
目录 筛选 过滤操作 ​查找操作 文档处理 增加操作 删除操作 修改操作 表格删除 菜单功能 筛选 过滤操作 first()：获取匹配的第一个元素 last()：获取匹配的最后一个元素 eq()：获取匹配的第N或-N个元素 filter(selector)：筛选出与指定表达式匹配的元素集合 has(selector)：筛选出包含特定特点的元素集合 not(selector)：筛选出不包含特定特点的元素集合 ...
jquery遍历筛选数组的几种方法和遍历解析json对象
weixin_30512043的博客
07-25 320
jquerygrep()筛选遍历数组 $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); ...
jQuery 03 效果：隐藏与显示
qq_40924514的博客
10-30 184
隐藏与显示：show()、hide() <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>效果展示。</p> <bu
jQuery对象的筛选
职业炮灰的博客
08-16 1323
一、筛选之过滤 1，概述 在jQuery对象中的元素对象数组中过滤出一部分元素来 first() last() eq(index | -index) filter(selector) not(selector) has(selector) 2，使用示例 操作区域： &lt;ul&gt; &lt;li&gt;AAAAA&lt;/li&gt; &lt;li title="hel...
jQuery过滤器：筛选jquery对象数组中的DOM对象
m0_53881899的博客
09-02 601
jQuery过滤器：筛选jquery对象数组中的DOM对象
jquery第03天.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
jQuery源码分析-03构造jQuery对象-工具函数
10-28
在jQuery库中，工具函数（utility functions）是其强大功能的重要组成部分，它们提供了一系列便捷的操作，使得开发者可以更高效地处理DOM操作、数据处理、事件处理等任务。本篇文章主要聚焦于jQuery源码中的工具函数...
DAY03_jQuery.md
05-10
第一部分
jQuery之筛选&文档处理
qq_62881798的博客
03-18 941
回顾上一节： ①Style属性方式 xx.style.fontSize ②js调用css this.className="aa" ③制作随鼠标滚动的广告图片 onscroll document.documentElement.scrollTop/Left 本节内容： 数字：\d [0-9] 合法字符：\w [0-9a-zA-Z_] 空格：\s 取反：[^abc] 至少出现1次：+ 出现1次或者0次：? 出现任意次：* 真正的点：\. 或者：| [a-g]{3}:在a-g中任选1个
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
weixin_33782386的博客
10-27 287
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解一、Jquery遍历筛选数组1、jquery grep()筛选遍历数组 $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){...
jQery筛选数组对象
一个草根敲键盘的故事
03-28 1079
看函数setFilter()内的nodes属性，数据格式json。 思路：复制一份需要的新数据数组；可添加过滤扩展。操作demo图：
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
最新发布
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
pi_heif-0.17.0-cp39-cp39-macosx_14_0_arm64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jQuery源码分析系列全览
在03构造jQuery对象的章节中，作者会详细解析jQuery构造函数的实现，包括如何创建jQuery对象、源码结构和核心函数的工作原理。这部分内容可能涉及到DOM元素的选择、封装以及jQuery对象的初始化过程。 03构造jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值