制作一个基本选择器

最新推荐文章于 2023-12-01 12:48:19 发布

@CJL

最新推荐文章于 2023-12-01 12:48:19 发布

阅读量242

点赞数

分类专栏：练习文章标签： javascript

本文链接：https://blog.csdn.net/qq_44109821/article/details/103633159

版权

练习专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<style type="text/css">
			div{width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%; padding: 35px 0 0 35px; margin: 5px; float: left; background: #fff;}
			.small{width: 60px; height: 60px; font-size: 12px; padding: 15px 0 0 15px;}
			.hide{display: none;}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//btn1  id选择器的使用规则   #+id名称
				$("#btn1").click(function(){
					//在jquery中使用css ("属性名","属性值")方法去获取或者修改页面css的内容
					$("#one").css("background","red")
				})
				//btn2
				$("#btn2").click(function(){
					//类选择器  .开头+类名
					$(".small").css("background","blue")
				})
				//btn3
				$("#btn3").click(function(){
					//标签选择器 
					$("div").css("background","brown")
				})
//				btn4
                $("#btn4").click(function(){
                	$("*").css("background","yellow")
                })
                //btn5
                $("#btn5").click(function(){
                	$("span,#two").css("background","green")
                })
			})
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择id为one的元素" />
		<input type="button" id="btn2" value="选择class为samall的元素" />
		<input type="button" id="btn3" value="选择元素名是div的元素" />
		<input type="button" id="btn4" value="选择所有元素" />
		<input type="button" id="btn5" value="选择所有span元素和id为two的元素" /><br/><br />
		<div id="one" class="one">
			 id为one
class为one的div
           <div class="small">
           	class为small
           </div>
		</div>
		
		<div id="two" class="one">
			id为two,class为one
title为test的div.
<div class="small">
           	class为small
           </div>
           <div class="small">
           	class为small
           </div>
		</div>
		
		<div >
			
             <div class="small">
           	class为small
           </div>
           <div class="small">
           	class为small
           </div>
           <div class="small">
           	class为small
           </div>
           <div class="small">
           	class为small
           </div>
		</div>
		<div >
			
             <div class="small">
           	class为small
           </div>
           <div class="small">
           	class为small
           </div>
           <div class="small">
           	class为small
           </div>
           <div class="small">
           	class为small
           </div>
		</div>
		<div id="">
			包含input的type为"hidden"的div
			<input type="text" name="" id="" value="" class="hide"/>
		</div>
	</body>
</html>