day11

最新推荐文章于 2023-05-09 23:45:45 发布

Neolemen

最新推荐文章于 2023-05-09 23:45:45 发布

阅读量73

点赞数

本文链接：https://blog.csdn.net/qq_43145816/article/details/100999657

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<style>
			body>div{
				border: #333 1px solid;
				margin: 10px;
			}
		</style>
	</head>

	<body>
		<div id="Q1" style="height: 100px;">
			<button onclick="Q1()">变色</button>
		</div>
		<div id="Q2">
			<button onclick="Q2()">改字</button>
			<p></p>

		</div>

		<div id="Q3" style="">
			<button onclick="Q3()">改第二个p背景</button>
			<p>第一个p</p>
			<p>第二个p</p>
			<p>第三个p</p>
		</div>
		<div id="Q4" style="">
			<button onclick="Q4()">删除最后一个li</button>
			<ul>
				<li>li1</li>
				<li>li2</li>
				<li>li3</li>
				<li>li4</li>
				<li>li5</li>
				<li>li6</li>
			</ul>
		</div>
		
		<div id="Q5">
			<p>p1</p>
			<p>p2</p>
			<p>p3</p>
			<p>p4</p>
			<p>p5</p>
		</div>
		
		<div id="Q6">
			<button id="btn" onclick="Q6()">往左动</button>
			<div class="box" style="width: 50px;height: 50px;background: red;left: 500px;position: relative;"></div>
			</div>
		<script>
			function Q1() {
				$('#Q1').css('background', 'red');
			}

			function Q2() {
				$('#Q2 p').text('我是子元素');
			}

			function Q3() {
				$('#Q3 p:eq(1)').css('background', 'orange')
			}

			function Q4() {
				$('#Q4 li:last').remove();
			}

			$('#Q5 p').click(function(){
				alert($('#Q5 p').index(this));
			})
			
			function Q6(){
				$('.box').animate({left:'0'})
			}
		</script>
	</body>

</html>

Neolemen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day11

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <...
复制链接

扫一扫