jQuery应用简单小习题元素查找

最新推荐文章于 2024-09-08 19:45:37 发布

最好结果

最新推荐文章于 2024-09-08 19:45:37 发布

阅读量173

点赞数 1

分类专栏： html 文章标签： jquery html css javascript js

本文链接：https://blog.csdn.net/qq_48307365/article/details/116074660

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery应用简单小习题

改变文本颜色寻找div 寻找元素

效果图！效果图！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" ></script>
		<script src="js/jquery-3.5.1.min.js" ></script>
	</head>
	<style>
	        div,span,p{
	            width:250px;
	            height:250px;
	            margin:5px;
	            border:1px solid blue;
	            float:left;
	        }
	        div.mini{
	            width:100px;
	            height:100px;
	        }
	    </style>
	<script>
		
	        $(document).ready(function () {
	            $("#btn1").click(function () {
	                $("#one").css('background-color', 'red');
	            });
	            $("#btn2").click(function () {
	                $(".mini").css('background-color', 'black');
	            });
	            $("#btn3").click(function () {
	                $("div").css('background-color', 'yellow');
	            });
	            $("#btn4").click(function () {
	                $("*").css('background-color', 'blueviolet');
	            });
	            $("#btn5").click(function () {
	                $("*").css('background', 'none');
	            });
	        });
	    </script>
	     <script>
	        $(document).ready(function () {
	            $("#btn1").click(function () {
	                $(".body div").css('background-color', 'red');
	            });
	            $("#btn2").click(function () {
	                $("div>div").css('background-color', 'black');
	            });
	            $("#btn3").click(function () {
	                $("#one+div").css('background-color', 'yellow');
	            });
	            $("#btn4").click(function () {
	                $("#two~*").css('background-color', 'blueviolet');
	            });
	            $("#btn5").click(function () {
	                $("*").css('background', 'none');
	            });
	        });
	    </script>

	<body>
		 <div id="one" class="one">
		        id为one,class为one的div
		        <div class="mini">
		            class为mini的div
		        </div>
		    </div>
		    <div id="two" class="one" title="test">
		        id为two，class为one，title为test的div
		        <div class="mini" title="other">
		            class为mini,title为other的div
		        </div>
		        <div class="mini" title="test">
		            class为mini，title为test的div
		        </div>
		    </div>
		    <div class="one">
		        <div class="mini">class为mini的div</div>
		        <div class="mini">class为mini的div</div>
		        <div class="mini">class为mini的div</div>
		        <div class="mini">class为mini的div</div>        
		    </div>
		    <div class="one">
		        <div class="mini">class为mini的div</div>
		        <div class="mini">class为mini的div</div>
		        <div class="mini">class为mini的div</div>
		        <div class="mini" title="test">class为mini，title为test的div</div>
		    </div>
		    <p>这是p标签</p>
		    <span>这是span标签</span>
		    <input type="button" value="改变id为one的背景颜色" id="btn1" />
		    <input type="button" value="改变class为mini的背景颜色" id="btn2" />
		    <input type="button" value="改变元素名为div的背景颜色" id="btn3" />
		    <input type="button" value="改变所有元素背景颜色" id="btn4" />
		    <input type="button" value="清空所有盒子的背景颜色" id="btn5" />
	</body>
</html>

动动你发财的小手指，举手之劳，赞有余香！

最好结果

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery应用简单小习题元素查找

jQuery应用简单小习题改变文本颜色寻找div 寻找元素效果图！效果图！<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.js" ></script> <script src="js/jquery-3.5.1.min..
复制链接

扫一扫