jquery基础_02.2

于 2022-04-15 22:05:07 发布
阅读量204 收藏
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58451019/article/details/124204947
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">

	</style>
	<script type="text/javascript">
		$(function() {
			$('tr:even').css("background-color","#e8f3d1")
			$('tr:odd').css("background-color","#f9fcef")	
			$('tr:first').css("background-color","#b6df48")
			$("button").click(function() {
				//parent 是 元素中有子内容或者文本的
				$("td:parent").css("color","greenyellow")
				//contains 指定元素包含指定内容 模糊匹配
				$("td:contains('张三')").css("color","red")
				//empty 是 元素中没有子内容或者文本的
				$("td:empty").html("暂无查询内容！").css("color","red")
				
			})
		})
	</script>

	<body>

		<button> 标注 </button>

		<table width="60%" border="1" align="center" cellpadding="0" cellspacing="1">
			<tr id="qq">
				<td width="11%" height="27">编号</td>
				<td width="25%">内容</td>
				<td width="12%">留言人</td>
				<td width="30%">发送时间</td>
			</tr>
			<tr>
				<td height="27">1</td>
				<td>今天天气真好啊</td>
				<td>张三</td>
				<td>2021-08-15 13:06:06</td>
			</tr>
			<tr>
				<td height="27">2</td>
				<td>是啊，太阳太好了</td>
				<td>李四</td>
				<td>2021-08-15 15:06:09</td>
			</tr>
			<tr>
				<td height="27">3</td>
				<td></td>
				<td>张三1</td>
				<td>2021-08-15 17:11:26</td>
			</tr>
			<tr>
				<td height="27">4</td>
				<td></td>
				<td>王五</td>
				<td>2021-08-16 09:05:11</td>
			</tr>
		</table>

	</body>

</html>

例二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
		
		$(function(){
			$("button").click(function(){
				//[]代表属性的选择    [属性=属性值]进行确定的匹配  
				//:checked 选中被选择的内容
				console.log( $("input[name='t01']:checked") )
				//$("input[name='t01']").attr("checked", true);
			})
		})
		
	</script>
	
	<body>
		
		<input type="checkbox" name="t02" id="" value="射击类1" /> 射击类1
		
		<input type="checkbox" name="t01" id="" value="射击类" /> 射击类
		<input type="checkbox" name="t01" id="" value="RPG" /> RPG
		<input type="checkbox" name="t01" id="" value="休闲" /> 休闲
		<input type="checkbox" name="t01" id="" value="吃鸡类" /> 吃鸡类
		
		<button >获取</button>
		
		<div id="show1">
			
		</div>
		
	</body>
</html>

例三：

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
				height: 100px;
				width: 150px;
				text-align: center;
			}
		</style>
		
		
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			$(function(){
				$("button").click(function(){
					//找到所有 被s01 选中的内容
					// #s01 > option:selected  找到 第一个select 下的 option 被选中的 :selected
					//$("#s01 > option:selected")  返回的是找到的元素节点内容
					
					$("#s02").append( $("#s01 > option:selected") )
					
				})
				
			})
			
		</script>
		
	</head>
	<body>
		
		
		选中对应的权限进行添加内容
		 multiple="multiple"  可以允许  select 有多个选项内容
		<div>
		<button> 添加权限 </button>
		<select id="s01" multiple="multiple">
			
			<option> 查看 </option>
			<option> 添加 </option>
			<option> 修改 </option>
			<option> 删除 </option>
		</select>
		
		<select id="s02" multiple="multiple"></select>
		
		</div>
		
	</body>
</html>

例四：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			img{
				width: 150px;
			}
			
		</style>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
//					$("img").css("display","inline")
					$("img").css("width","300px").show(2000)
				})
				
				$("img").click(function(){
//					$(this).css("display","none")
					//向左下脚隐藏
//					$(this).hide(3000);
					//淡出式 隐藏
//					$(this).fadeOut(3000);
					//向下压缩隐藏
					$(this).slideUp(3000);
					
				})
			})
		</script>
	</head>
	<body>
		
		<button > 显示 </button>
		
		<img src="img/3.jpg"/>
		
		<img src="img/微信图片_20220224234509.jpg"/>
		<img src="img/微信图片_20220224224357.jpg"/>
		
		<img src="img/微信图片_20220224234411.jpg"/>
		
		<img src="img/微信图片_20220224234506.jpg"/>
		
		
	</body>
</html>

例五：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			img{
				width: 150px;
			}
			
		</style>
		
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			$(function(){
				$("button").click(function(){
//					$("img").css("display","inline")
					//如果是隐藏的则显示，如果是显示的则隐藏
//					$("img").toggle(2000)
//					$("img").fadeToggle(2000)
					$("img").slideToggle(2000)
				})
//				$("img").click(function(){
					$(this).css("display","none")
					$(this).hide(3000);
					$(this).fadeOut(3000);
//					$(this).slideUp(3000);
//					
//				})
				
			})
		</script>
	</head>
	<body>
		
		<button > 显示 </button>
		
		<img src="img/3.jpg"/>
		
		<img hidden="hidden"  src="img/微信图片_20220224234454.jpg"/>
		
		<img src="img/微信图片_20220224234509.jpg"/>
		<img hidden="hidden"  src="img/微信图片_20220224224357.jpg"/>
		
		<img src="img/微信图片_20220224234411.jpg"/>
		
		<img hidden="hidden" src="img/微信图片_20220224234506.jpg"/>
		
		
		
		
		
		
	</body>
</html>

Junju_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
树懒_day02.2_Javascript基础笔记
07-19
移动开发初学者小白树懒学习web中的JavaScript的学习笔记...
table表格cellpadding和cellspacing设置
shuangyvshenshi的专栏
10-27 1992
表格的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式： 很多朋友会说表现在结构中，这样不符合标准，那如何将这个表现拿出来，有些朋友或许很迷惑。我们可以用table的border-collapse: collapse;属性 来代替cellspacing="0"，用th,td的padding: 0; 属性来代替cellpadding="0"。 table
用js算出页面高度和点击合并
忽而今夏 qianxiaochi
01-23 867
/**页面js**/ $(function(){  //计算高度  var BHeight = $("body").height();  $("#flow_right,.flow_line").css("height",BHeight-49);  //计算宽度  var BWidth = $("body").width();  var leftWidth = parseInt(BWidth*0
2021-08-04 jQuery基础整理 17-30 代码复制即可运行
blackkerword的博客
08-04 121
17. jQuery 操作样式方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <script> $(function ()
NOD32view5_02.2 2012年8月10日更新官方最新稳定版
08-30
此版本为官方最新版 5.02.2.以前版本已不可用 更新时间2012年8月30日
PAF_LabSheet02.2-Items-Management
03-17
PAF_LabSheet02.2-Items-Management
controller PPC R02.2 - 4mm_java_HomeHome_
10-04
output window house home
Linux系统基础教程视频
12-03
02.2 Linux系统安装-系统分区.mp4 02.3 Linux系统安装-Linux系统安装.mp4 02.4 Linux系统安装-远程登录管理工具.mp4 03.1 给初学者的建议-注意事项.mp4 03.2 给初学者的建议-服务器管理和维护建议.mp4
minepy-1.2.6-cp310-cp310-win_amd64.zip
06-17
使用说明：whl是python离线安装包，使用时候只需要pip install x.whl其中x.whl为自己whl路径名
恒色风格-中医简历模板.zip
06-17
在求职的征途上，一份出色的简历是你通往梦想职位的敲门砖。我们精心准备了一系列面试求职简历模板，旨在帮助你以最佳形象站在潜在雇主面前。这些简历模板不仅设计精美，而且注重内容的清晰呈现，使招聘经理一目了然地看到你的能力和经验。 我们的模板集合了多种风格与布局，无论你是应届毕业生、职场跳槽者还是行业专家，都能在这里找到适合你职业形象的简历设计。每一个模板都经过精心设计，确保你的简历在众多求职者中脱颖而出，同时保持足够的专业度和可读性。 不仅如此，我们的简历模板易于编辑，你可以根据具体职位需求快速调整内容，展现你的个人优势和职业成就。使用这些模板，将大大提高你的面试机会，并帮助你更好地表达自己的价值和潜力。 别让传统且缺乏创意的简历阻碍你迈向成功的道路。立即下载这些精美的简历模板，让你的求职之路更加顺畅，向心仪的工作迈进吧！记住，一个良好的开始是成功的一半，而一份精致的简历，正是你成功的起点。
protobuf-3.15.1-cp36-cp36m-macosx_10_9_x86_64.whl
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
pyzmq-23.2.0-cp37-cp37m-win_amd64.whl
最新发布
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
absl_py-0.15.0-py3-none-any.whl.zip
06-17
whl是python离线安装包，使用时候只需要pip install x.whl其中x.whl为自己whl路径名
absl_py-1.1.0-py3-none-any.whl.zip
06-17
whl是python离线安装包，使用时候只需要pip install x.whl其中x.whl为自己whl路径名
Visual Basic.docx
06-17
如何将代码编辑器用于 Visual Basic
社区论坛社区校园APP源码分享.zip
06-17
这个项目大部分代码是近一年前开发写的，由于 React Native 生态不够完善，社区组件总有各种各样的差强人意，许多基础的组件 (SlideInMenu、Toast、ContextMenu等) 都是自己写动画手撸的(也借鉴了许多开源项目)。 另外，在写这个项目之前，我对 JavaScript 的掌握程度仅仅是勉强能使用 Jquery 和 Ajax，但 React 使用到了 ES6 的内容，因此许多 JS 的代码都是参照官网和Github上源码照猫画虎写的，并非专业前端，代码写的水平不高见笑了。没有使用到 Redux，都是很普通很基础的 JS 代码，稍微了解 ES6 的类及箭头函数就能看懂代码。
简历模板简洁风蓝色极简【封面+简历+自荐信】.zip
06-17
在竞争激烈的职场中，一份专业且引人注目的简历是你通往梦想工作的黄金钥匙。我们特别为你呈现精选的面试求职简历模板，每一款都设计独特、格式清晰，帮助你在众多候选人中脱颖而出。 这些简历模板采用多种风格与布局，无论是创新、传统还是现代简约，都能满足不同行业与职位的需求。它们不只拥有吸引人的外表，更重要的是其实用性强，使得招聘经理能一眼捕捉到你的核心竞争力与职业亮点。 模板的易编辑性让你能快速个性化地调整内容，针对性地展现你的才华和经验。使用这些模板，你将更容易获得面试机会，并有效地向雇主展示你的潜力和价值。 不要让平凡无奇的简历阻挡你的职场前进之路。立即下载这些令人眼前一亮的简历模板，开启你的职场新旅程。记住，美好的第一印象是成功的开始，而一份精心制作的简历，就是你赢得梦想工作的第一块敲门砖。
大学生电赛风力摆控制系统
06-17
本系统采用 STM32F103V 开发板作为控制中心，与万向节、摆杆、直流风 机（无刷电机+扇叶）、激光头、反馈装置一起构成摆杆运动状态与风机速度分 配的双闭环调速系统。单片机输出可变的 PWM 波给电机调速器，控制 4 个方向上 风机的风速，从而产生大小不同的力。利用加速度计模块 MPU6050，准确测出摆 杆移动的位置与中心点位置之间的关系，采样后反馈给单片机，使风机及时矫正， 防止脱离运动轨迹。使用指南针模块判别方向，控制系统向指定方向偏移。控制 方式采用 PID 算法，比例环节进行快速响应，积分环节实现无静差，微分环节减 小超调，加快动态响应。从而使该系统具有良好的性能，能很好地实现自由摆运 动、快速制动静止、画圆、指定方向偏移，具有很好地稳定性
rexroth plc ppc-r02.2n 手册
07-21
Rexroth PLC PPC-R02.2N 手册是一本关于该型号PLC的详细说明书。该手册提供了关于设备的技术参数、功能描述、硬件配置、编程指南以及故障排除方法等信息。 手册首先介绍了PPC-R02.2N PLC的特点和应用领域。它具有高...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值