【web前端(三十九)】javascript_jquery操作样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>操作样式</title>
		<style>
			/*div.a1{
				border: 5px double #000;
			}*/
			
			/*
			 * 类选择器
			 */
			.a1{
				height: 100px;
				width: 100px;
			}	
			.a2{
				border: 2px solid #000;
			}
			
			div{
				height: 30px;
				/*设行高*/
				/*当行高和块的高度一样时，
				 文字刚好在中间。*/
				line-height: 30px;
			}
		</style>
		<script type="text/javascript" src="../js/jQuery/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(
				function(){
					/*添加样式*/
						//只给第一行加括号里的属性
//					$("div:first").css("background-color","pink");

					/*
					 * 过滤选择器
					 */
						//只给奇数行加括号里的属性
//					$("div:even").css("background-color","pink");
						//只给偶数行加括号里的属性
//					$("div:odd").css("background-color","darkgray");
						//eq(2)表示索引为2的行加括号里的属性
					$("div:eq(2)").css("background-color","darkgray");
						
						//这里是大于第二行的加括号里的属性
						//且括号里类名可以有很多，可以选很多行
					$("div:gt(2)").addClass("a1 a2");
					
					
						/*删除样式*/
						//删掉奇数行
					$("div:even").removeClass("a1 a2");
						
						
						/*切换样式*/
						/*
						 * 标签选择器
						 */
						//给button加click事件
					$("button").click(
						function(){
								//这里toggleClass可以让属性在不同行之间切换
							$("div:gt(2)").toggleClass("a1 a2");
						}
					);
				}
			 );
		</script>
	</head>
	<body>
		<button>切换</button>
		<div style="background-color: deeppink;">我是一颗海草</div>
		<div>我是一颗海草</div>
		<div>我是一颗海草</div>
		<div>我是一颗海草</div>
		<div>我是一颗海草</div>
	</body>
</html>