网页元素操作与交互示例-优快云博客

本文通过几个实例展示了如何使用jQuery进行网页元素的操作及事件处理，包括背景切换、元素动画效果、动态添加内容等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="css/animate.min.css"></link>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
	*{	margin:0px auto; padding:0px;}
	#b1{
		width:100%;
		height:1024px;
		background:url(images/1.jpg);		
		}
	#bgg{
		width:100%;
		height:250px;
		/*background-color:#FF9;*/
		position:fixed;
		top:100px;
		display:none;
		}
	#bg{
		width:600px;
		height:250px;
		padding-top:20px;
		
		}
		#bg img{
				width:100px;
				height:100px;
				float:left;
				}
	#dj{
		width:50px;
		height:30px;
		background-color:#6FF;
		color:#FFF;
		text-align:center;
		vertical-align:middle;
		line-height:30px;
		position:absolute;
		top:100px;
		border-radius:70px;
		opacity:0.5;
		}
</style>
<script>
	$(function(){
		$("#dj").click(function(event){
			//$("#bgg").fadeIn("3000","linear");
			//$("#bgg").slideDown("slow","linear");
			$("#bgg").show("1000");//点击显示
			//$("#bgg");
			event.stopPropagation();//停止其他任意地方的点击事件
		});
		
		$(document).click(function() {
			$("#bgg").hide(1000);//点击任意地方隐藏
		});
		$("#bg").on("click", ".img", function(event) {	
			//$("#b1").attr("style","background");	
			var c =$(this).attr("c");  //this 表示点击哪里就是哪里
			$("#b1").css("background","url(images/"+ c +".jpg)");	
			event.stopPropagation();//停止其他任意地方的点击事件
			
		});

	});
</script>
</head>

<body>
 <div id="b1">
    <div id="bgg">
		<div id="bg">
    	<img class="img" src="images/0-0.jpg" c="0">
        <img class="img" src="images/1-1.jpg" c="1">
        <img class="img" src="images/2-2.jpg" c="2">
        <img class="img" src="images/3-3.jpg" c="3">
        <img class="img" src="images/4-4.jpg" c="4">
        <img class="img" src="images/5-5.jpg" c="5">
        <img class="img" src="images/6-6.jpg" c="6">
        <img class="img" src="images/7-7.jpg" c="7">
        <img class="img" src="images/8-8.jpg" c="8">
        <img class="img" src="images/9-9.jpg" c="9">
        <img class="img" src="images/10-10.jpg" c="10">
        <img class="img" src="images/11-11.jpg" c="11">
    	</div>
    </div>
   <div id="dj"><b>换肤</b></div> 
   </div>
</body>

</html>

<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Document</title>
		<link type="text/css" rel="stylesheet" href="css/animate.min.css"></link>
//这个的应用
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(function() {
				// infinite
				$("#btn").click(function() {
					$("div").addClass("infinite animated rotateOutDownLeft");
				});
				
			});
		</script>
	</head>

<body>
<div style="width:100px;height:100px;border:1px red solid;"></div>
<hr>
<button id="btn">按钮</button>
</body>
</html>

<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Document</title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(function() {
				var count = 0;
				$("#btn_append").click(function() {
					count++;
					$("<b>一句话</b>").appendTo("#d1");//往后面加
				});
				$("#btn_prepend").click(function() {
					count++;
					$("#d1").prepend("这是第"+count+"句话");  //往前面加
				});			
			});
		</script>
	</head>

<body>
<button id="btn_append">appendTo</button>
<button id="btn_prepend">prependTo</button>
<hr>
<div id="d1" style="width:500px;height:300px;border:1px red solid;"></div>
</body>
</html>

转载于:https://www.cnblogs.com/ziyanxiaozhu/p/8196283.html