初识jQuery的案例-白红宇的个人博客

初识jQuery的案例

发布日期：2021-05-14 13:19:13 浏览次数：27 分类：原创文章

本文共 2235 字，大约阅读时间需要 7 分钟。

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>		<script type="text/javascript">			$(function(){				/*按钮的单击事件*/				$("#btn").click(function(){					/*单击按钮添加div1_style样式*/					$("#div1").addClass("div1_style");				});				/*单击div1*/				$("#div1").click(function(){					/*给div2添加div2_style样式*/					$("#div2").addClass("div2_style")				});								/*单击h2标题的收*/				$("h1").click(function(){					$("h1").css("background","red").next().css("display","block");									});				/*测试next方法，是紧邻同级元素的下一个，下下个不包括*/				$(".test_next li").click(function(){					$(".test_next_li1").next().css("color","red");				});				/*单击图片在图片外边显示边框*/				$(".img1").click(function(){					$(this).css("border","2px solid black");				})				/*使用js获取dom_test元素*/				var dom_test = document.getElementById("dom_test");				//转换成jquery元素				var $dom_test  = $(dom_test);				//单击他的时候改变字体颜色				$("#dom_test").click(function(){					$dom_test.css("color","red");				});								/*默认惊喜是隐藏的，鼠标悬浮的时候显示*/				$("#show_test2").hide();				$("#show_test1").hover(function(){					$("#show_test2").show();				},function(){					$("#show_test2").hide();				});			})		</script>		<style type="text/css">			.div1_style{				width: 200px;				height: 200px;				background: red;			}			.div2_style{				width: 200px;				height: 200px;				background: green;			}			p{				display: none;			}			#show_test1{				width: 150px;				height: 150px;				border-radius: 50% 50%;				background: red;			}			#show_test2{				width: 100px;				height: 100px;				background: greenyellow;			}		</style>	</head>	<body>		<div id="div1">			div1		</div>		<div id="div2">			div2		</div>		<button id="btn">按钮</button>		<br/>		<h1>什么是受益人？</h1>		<p>			<strong>解答：</strong>			受益人是所有的人积分看电视剧什么的深白名单额等，等等的接口上多久爱好讲课的撒。的罕见的设计导航萨克和风刀霜剑开户费的手机号发动机书法家看电视		</p>		测试next方法		<ul class="test_next">			<li class="test_next_li1">第1个li</li>			<li class="test_next_li2">第2个li</li>			<li class="test_next_li3">第3个li</li>		</ul>		单击图片，在图片的外围显示边框：<br />		<img src="img/img1.jpg" class="img1"/>		DOM对象转换测试：<br />		<span id="dom_test">DOM对象</span>		测试show方法和hide方法		<br />		<div id="show_test1">			悬浮上去显示惊喜		</div>		<div id="show_test2">			惊喜！		</div>	</body></html>

上一篇：初识jQuery

下一篇：jdk的安装与环境变量的配置

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章