jquery选择器

最新推荐文章于 2024-09-05 16:56:18 发布

菜鸟闯关记

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/qq_46342449/article/details/115601992

版权

jQuery选择器

文章目录

jQuery选择器
一、基础选择器
二、层级选择器
- 2.层级选择器

一、基础选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div,span,p{
							width:140px;
							height:140px;
							margin:5px;
							backbround:#aaa;
							border:#000 1px solid;
							float:left;
							font-size:17px;
							font-family:Verdana;
						}
						
						div.mini{
							width:55px;
							height:55px;
							background-color:#aaa;
							font-size:12px;
						}
						div.hide{
							display: none;
						}
		</style>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//1、选择id为one的元素。修改背景元素
			$(function(){
				$("#btn1").click(function(){
					$("#one").css("background-color","yellow");
				});
				
				//2、选择class为mini的所有元素
				$("#btn2").click(function(){
					$(".mini").css("background-color","yellow");
				});
				//3、选择元素名是div的所有元素
				$("#btn3").click(function  () {
					$("div").css("background-color","yellow");
				});
				//4、选择所有元素
				$("#btn4").click(function  () {
					$("*").css("background-color","yellow");;
					
				});
				//4、选择所有的span元素和id为two的元素
				$("#btn5").click(function  () {
					$("span,#two").css("background-color","yellow");
				});
			});

		</script>
	</head>
	<body>
		<input type="button" name="" id="btn1" value="选择id为one的元素" />
		<input type="button" name="" id="btn2" value="选择class为mini的所有元素" />
		<input type="button" name="" id="btn3" value="选择 元素名是div的所有元素" />
		<input type="button" name="" id="btn4" value="选择id=btn4的元素" />
		<input type="button" name="" id="btn5" value="选择所有的span元素和id为two的元素" />
		<br>
		<div class="one" id="one">
			id为one，class为one的div
			<div class="mini">class为mini的div</div>
		</div>
		<div class="one" id="two" title="test">
			id为two，class为one的div
			<div class="mini" title="other">class为mini的div,title为other</div>
			<div class="mini" title="test">class为mini的div,title为test</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的div,title为test</div>
		</div>
		<div style="..." class="none">style的display为"none"的div</div>
		<div class="hide"></div>
		<span id="span" class="one">
			span元素！！
		</span>
		
		
		
		
		
	</body>
</html>

二、层级选择器

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.层级选择器

大部分代码如上，只修改了script内的代码，代码如下（示例）：

<script type="text/javascript">
			//1、选择body内的所有div元素
			$(function(){
				$("#btn1").click(function(){
					$("body div").css("background-color","yellow");
				});
				
				//2、在body内，选择div子元素
				$("#btn2").click(function(){
					$("body>div").css("background-color","yellow");
				});
				//3、选择id为one的下一个div元素
				$("#btn3").click(function  () {
					$("#one + div").css("background-color","yellow");
				});
				//4、选择id为two的元素后面的所有div兄弟元素
				$("#btn4").click(function  () {
					$("#two~div").css("background-color","yellow");;
					
				});
				
			});

		</script>