jquery基础04

最新推荐文章于 2022-08-29 19:55:28 发布
最新推荐文章于 2022-08-29 19:55:28 发布
阅读量63 收藏
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58451019/article/details/124205856
版权

1.

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//parent 找到目标元素的父元素，也就是他被谁包裹
//				$("span").parent().css("background-color","#FF6600")
				//parents  找到目标元素的所有祖先
				//parents("li") 当父元素过多的时候，找到需要的父元素内容
				//$("span").parents().css("background-color","#FF6600")
				//从span开始， 到ul结束（这俩都不包含）  中间所有的父元素内容
//				$("span").parentsUntil("ul").css("background-color","#FF6600")
				
				//找儿子 找到目标元素 下 所有的儿子
				//.children("span")  过滤需要的儿子
//				$("li").children("span").css("background-color","#FF6600")
//				find 不能单独使用， 必须要传递进去需要找到的 元素内容
//				$("li").find("span,b").css("background-color","#FF6600")
//				* 代表所有
//				$("li").find("*").css("background-color","#FF6600")
			})
		</script>
	</head>
	<body>
		<div >
			<ul>
				<li> <span>1</span> <span>2</span> </li>
				<li> <b>bbb</b> </li>
				<li>  <a href="">aaa</a>  </li>
				<li> 
					<div>
						<span>2</span><sup>3</sup> = <b>8</b>
						
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

2.

代码如下（示例）：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				//找到除了自己以外同级的  元素
//				$("h3").siblings().css("background-color","saddlebrown")

				//next() 方法返回被选元素的下一个同胞元素。
				//$("h3").next().css("background-color","saddlebrown")
				//nextAll() 方法返回被选元素的所有跟随的同胞元素。
				//$("h3").nextAll().css("background-color","saddlebrown")
				//nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
				//$("h1").nextUntil("p").css("background-color","saddlebrown")
				
				//上一个和下一个用法一模一样，只不过 next 改为 prev
				//$("h3").prev().css("background-color","saddlebrown")
				//$("h3").prevAll().css("background-color","saddlebrown")
				$("p").prevUntil("h1").css("background-color","saddlebrown")
			})
		</script>
		
	</head>
	<body>
		
		<h1>1</h1>
		<h2>2</h2>
		<h3>3</h3>
		<div >
			ddd
		</div>
		<p>
			pppp
		</p>
		<hr />
		<style type="text/css">
			#main{
				width: 400px;
				margin: 0 auto;
			}
			img{
				width: 100px;
			}
			#main > div{
				width: 100px;
				height: 100px;
				padding: 10px;
				border: 1px red solid;
				float: left;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$("#main>div").mouseover(function(){
					$(this).css("opacity","1").siblings().css("opacity","0.3")
				})
			})
		</script>
		<div id="main">
			<div > <img src="img/2.jpg"/> </div>
			<div> <img src="img/2.jpg"/> </div>
			<div> <img src="img/2.jpg"/> </div>
			<div> <img src="img/2.jpg"/> </div>
			<div> <img src="img/2.jpg"/> </div>
			<div> <img src="img/2.jpg"/> </div>
			<div> <img src="img/2.jpg"/> </div>
			<div> <img src="img/2.jpg"/> </div>
			<div> <img src="img/2.jpg"/> </div>
		</div>
		
	</body>
</html>

3.

代码如下（示例）：

OCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
//				$("h3").first().css("background-color","#FF0000")
//				
//				$("h3").last().css("background-color","#FF0000")
//				//filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
//				$("h3").filter(".cc").css("background-color","#FF0000")
//				not() 方法返回不匹配标准的所有元素。
				$("h3").not(".cc").css("background-color","#FF0000")
				
			})
		</script>
	</head>
	<body>
		<h1>1</h1>
		<h2>2</h2>
		<h3>3</h3>
		<h3>3</h3>
		<h3 class="cc">3</h3>
		<h3>3</h3>
		<h3>3</h3>
		
		<div class="cc">
			ddd
		</div>

		<p>
			pppp
		</p>
		
	</body>
</html>

4.

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//在指定元素的内部(也就是子元素对应新增)   最后面增加 新的元素内容 
				$("div").append("<span>  append</span>")
				//在指定元素的内部   最前面增加 新的元素内容
				$("div").prepend("<span>  prepend</span>")
				$("div").prepend("<span>  11p1repend</span>")
				
				//在指定元素的外部(也就是兄弟元素对应新增)   后面增加 新的元素内容 
				$("div").after("<span> after1</span>")
				//在指定元素的外部(也就是兄弟元素对应新增)   前面增加 新的元素内容 
				$("div").before("<span> before</span>")
				
				$("h3").click(function(){
					//删除元素节点  节点自身也删除
					$(this).remove()
				})
				$("div").click(function(){
					//删除元素节点  保留节点本身，所有的后代元素 都删除
					$(this).empty()
				})
			})
		</script>
	</head>
	<body>
		<h1>1</h1>
		<h2>2</h2>
		<h3>3</h3>
		<h3>3</h3>
		<h3 class="cc">3</h3>
		<h3>3</h3>
		<h3>3</h3>
		<div >
			ddd
		</div>
		<p>
			pppp
		</p>
	</body>
</html>

Junju_
关注
专栏目录
jQuery基础知识04
Fallen__down的博客
11-08 204
1.jQuery css() 方法 css() 方法设置或返回被选元素的一个或多个样式属性。 返回 CSS 属性 如需返回指定的 CSS 属性的值，请使用如下语法： css(“propertyname”); 下面的例子将返回首个匹配元素的 background-color 值： 实例 $(“p”).css(“background-color”); 设置 CSS 属性 如需设置指定的...
jQuery基础
WangZhang_521的博客
05-06 510
01-jQuery属性操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
04JQuery基础
m0_70083523的博客
08-29 208
jQuery是一个快速、简洁的框架。jQuery由美国人John Resig于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do more（写的更少，做的更多）
jQuery基础04-jQuery事件
weixin_44224089的博客
04-29 113
1.基础事件 1.window事件 即页面中的DOM元素全部加载完毕时所触发的事件，该事件对应的方法是ready()。 2.鼠标事件 click() 单击鼠标时所触发的事件方法； mouseover() 鼠标悬浮在某个元素上时触发的事件方法； mouseout() 鼠标移出某个元素时触发的事件方法。 3.键盘事件 略。（不重要，可百度）。 4.表单事件 focus() 获取焦点...
前端基础04 Jquery 总结
Xs943的博客
03-26 2034
一、jquery 1.简介 A.就是对js的一个简单的封装 优化Html文档操作 事件处理 动画设计 ajax交互 B.适配了各种主流的浏览器 C.轻量级的前端框架 2.下载 官网下载地址：https://jquery.com/ 二、引入jquery 1.1 step01 将jquery.js放入到js文件夹下 step03 新建html界面 引入js文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8
JQuery基础练习
qq_39095899的博客
04-03 285
Jquery练习 基本选择器练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery基本选择器</title> <script src="js/jquery-3.4.1.js" type="text/javascript" c...
04 JQuery基础笔记
aecwa04280的博客
06-03 67
1.jquery文件包 官方网站：www.jquery.com 2.加载到网页 <script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js"></script> 常用的方法 [调ID] $("#id名") 相当于document.getElem...
JQuery_基础
种一颗十年前的树
11-15 145
02_JQuery_概念 jQuery是什么? 是个js的框架； 03_JQuery_快速入门 jQuery-3.3.1.min.js和jQuery-3.3.1.js有什么区别？ jQuery-3.3.1.min.js：体积小，无缩进；生产环境中 jQuery-3.3.1.js：体积大，格式练好；调试环境中； 04_JQuery对象和JS对象区别与转换 jQuery对象和javascript对象的...
jQuery04
tooHar的博客
05-23 209
笔记目录小概一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 小概 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
jquery第04天.zip
12-21
在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师，还是只是想了解一些基本概念和...
jquery基础教程04
08-23
### jQuery基础教程04知识点详解 #### 一、jQuery简介 - **定义**：jQuery是一款优秀的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。 - **特点**： - 简洁的语法，提高了开发效率。 ...
Jquery综合案例小练习——巩固jquery基础知识
春和的博客
03-07 1294
学习玩jquery的基础知识 做一些小的案例练习巩固一下基础知识的运用 在学了jquery后对比发现jquery的功能十分的强大！ 一、隔行换色 1.1、原生js实现隔行换色 原生js实现隔行换色 首先要获取到表格 在获取到表格中的每一行 通过%2判断是奇数行还是偶数行 再通过控制样式实现背景色的变换 准备一个表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g.
JavaWeb（JQuery基础、JQuery基础案例）
MysEaiZYH的博客
04-05 139
今日内容一、JQuery基础1.JQuery概念2.JQuery快速入门3.JQuery对象和JS对象区别与转换4.JQuery事件绑定&入口函数&样式控制事件绑定：入口函数：样式控制5.JQuery选择器_基本选择器效果：6.JQuery选择器_层级选择器后代选择器：子选择器：效果：7.JQuery选择器_属性选择器效果：8.JQuery选择器_过滤选择器效果：9.JQuery选择器_表单过滤选择器效果：10.JQueryDOM操作_内容操作11.JQueryDOM操作_属性操作_通用..
美修大数据：2022母婴洗护品类洞察报告(2).pdf
11-03
美修大数据：2022母婴洗护品类洞察报告(2).pdf
VB程序实例-图片剪切.zip
11-03
VB程序实例-图片剪切.zip
PyMySQL-0.7.9-py3-none-any.whl
最新发布
11-03
PyMySQL-0.7.9-py3-none-any.whl
VB程序实例-运行记事本.zip
11-03
VB程序实例-运行记事本.zip
VB程序实例-显示多列菜单.zip
11-03
VB程序实例-显示多列菜单.zip
springboot083-基于web的景区管理系统.zip
11-03
项目资源包含：可运行源码+sql文件 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 项目具有较高的学习借鉴价值，也可拿来修改、二次开发。 有任何使用上的问题，欢迎随时与博主沟通，博主看到后会第一时间及时解答。 开发语言：Java 框架：springboot 技术：Vue JDK版本：JDK1.8 服务器：tomcat7 数据库：mysql 5.7（一定要5.7版本） 数据库工具：Navicat11 开发软件：eclipse/myeclipse/idea Maven包：Maven3.3.9 系统是一个很好的项目，结合了后端服务（SpringBoot）和前端用户界面（Vue.js）技术，实现了前后端分离。 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html
jQuery实现TextArea高度自适应
"jQuery实现文本区域（TextArea）的高度自适应插件" 在Web开发中，尤其是在用户需要输入大量文本的...上述代码提供了一个基础实现，开发者可以根据实际需求进行调整和扩展，例如添加动画效果或兼容更多浏览器特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值