jquery选择器

最新推荐文章于 2022-11-03 22:33:30 发布

断舍离2019

最新推荐文章于 2022-11-03 22:33:30 发布

阅读量1.3k

点赞数

分类专栏：自学笔记文章标签： jquery 选择器

本文链接：https://blog.csdn.net/ya985860612/article/details/17590283

版权

自学笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
.c {
	background: pink;
}

#box {
	background-color: #FFF;
	border: 2px solid #000;
	padding
	5px;
}
</style>
<script type="text/javascript" src="./jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//even偶数行
		// odd 奇数行

		$("tr:even").css("background-color", "green");
		$("tr:odd").css("background-color", "red");

	});

	//document ready 的简写形式
	$(function() {
		// 类选择器
		$(".c").html(1000);
		// 标签选择器
		$("td").css(" ", "#fff");
		// id 选择器
		$("#t1").html(2000);
		$("#t1").addClass("c");
		$("#t1").next().html(33);
		$("#t2").prev().html(99);
		$("#1").click(function() {
			// 标签选择器
			$("h3").css("background", "red");
		});
		$("#2").click(function() {
			// 类选择器
			$(".title").css("background", "#0F0");
		});
		$("#3").click(function() {
			// id 选择器
			$("#box").css("background", "#00f");
		});
		$("#4").click(function (){
			// 并集选择器
			$("h2,dt,.title").css("background","pink");
		});
		$("#5").click(function (){
			// 交集选择器
			$("h2.title").css("background","yellow");
		});

	});
</script>
</head>

<body>


	<div id="box">
		<h2 class="title">class 为title 的h2</h2>
		<h3 class="title">class 为 title的h3</h3>
		<h3>热门排行</h3>
		<dl>
			<dt>
				<img src="./img.png" width="93" height="99" alt="斗地主" />
			</dt>
			<dd>休闲游戏</dd>
			<dd>qq斗地主是国内同时在线最多的棋牌游戏</dd>
		</dl>

		<input type="button" value="设置所h3的背景为红色" id="1" /><br /> 
		<input type="button" value="所有class 为title的绿色" id="2" /><br />
		 <input	type="button" value="设置id为box的的元素为蓝色" id="3" /><br />
		 <input	type="button" value="设置所有h2 dt  class 为title 的背景颜色" id="4" /><br />
		 <input	type="button" value="设置所有class 为title 的h2 元素的背景色 " id="5" /><br />
		 
	</div>
	
	<div>
		
	</div>

	<table>
		<tr>
			<td class="c">1</td>
			<td id="t1">3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>3</td>
			<td id="t2">4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
	</table>
</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
 *{margin: 0px; padding:0px;line-height:30px;}
 body {
	margin:10px;
}
#menu{
	border: 2px solid #03c; padding:10px;
}
a{text-decoration: }
a{text-decoration:none;margin-right:5px;}
span{font-weight: bold;padding:3px;}
h2{margin:10px 0}

#box{
	background-color:#fff; border:2px soild #000; padding:5px;
}
</style>
<script type="text/javascript" src="./jquery-1.7.2.js"></script>
<script type="text/javascript">
 $(document).ready(function (){
	 $("#1").click(function (){
		 // 获取menu 所有span标签
		 	$("#menu span").css("background","red");
	 });
	 $("#2").click(function(){
		 // 获取 menu下子元素 span
		 $("#menu>span").css("background","green");
	 });
	 $("#3").click(function(){
		 // 获取h2 同辈元素dl
		 $("h2+dl").css("background","yellow");
	 });
	 $("#4").click(function(){
		 $("h2~dl").css("background","yellow");
	 });
	 $("#5").click(function(){
		 $("h2[title]").css("background","#f56");
	 });
	 $("#6").click(function(){
		 $("[class=odds]").css("background","#ff6");
	 });
	 $("#7").click(function(){
		 $("[class=evens]").css("background","#0ff");
	 });
	 $("#8").click(function(){
		 $("[id!=box]").css("background","#f0f");
	 });
	 $("#9").click(function(){
		 $("[title^=h]").css("background","#f89");
	 });
	 
	 $("#10").click(function(){
		 $("[title$=jp]").css("background","#f19");
	 });
	 
	 $("#11").click(function(){
		 $("[title*=s]").css("background","#f19");
	 });
	 
	 $("#12").click(function(){
		 $("[class][title*=y]").css("background","#f55");
	 });
	 
 });
</script>
</head>

<body>
	<div id="menu">
		<h2>全部旅游产品</h2>
		<dl>
			<dt>北京周边旅游<span>特价</span></dt>
			<dd><a href="#">按天数</a><a href="#">海边旅游</a><a href="#">草原</a></dd>
			
		</dl>
		<dl>
			<dt>景点门票</dt>
			<dd><a href="#">名胜</a><a href="#">暑期</a><a href="#">乐园</a></dd>
			<dd><a href="#">山水</a><a href="#">双休</a></dd>
			
		</dl>
		<span>更多分类</span>
	</div>
	<input type="button" id="1" value="获取并设置#menu下的〈span 的元素的背景颜色"><br/>
	<input type="button" id="2" value="获取并设置#menu 下的子元素span的背景色"><br/>
	<input type="button" id="3" value="获取设置紧邻h2元素后的dl元素的背景颜色"><br/>
	<input type="button" id="4" value="获取设置紧邻h2同级别的dl元素"><br/>
	
	<div id="box">
		<h2 class="odds" title="cartoonlist">动画列表</h2>
		<ul>
			<li class="odds" title="kn_jp">名侦探柯南</li>
			<li class="evens" title="hy_jp">火影忍者</li>
			<li class="odds" title="ss_jp">死神</li>
		</ul>
	</div>
	<input type="button" id="5" value="改变h2 有title属性的背景"><br/>
	<input type="button" id="6" value="改变class 为odds 的背景"><br/>
	<input type="button" id="7" value="改变class 为evens 的背景"><br/>
	<input type="button" id="8" value="改变id 不为box 的背景"><br/>
	<input type="button" id="9" value="改变title属性开头为h的背景"><br/>
	<input type="button" id="10" value="改变title属性结尾为jp的背景"><br/>
	<input type="button" id="11" value="改变title属性中含有s的背景"><br/>
	<input type="button" id="12" value="改变包含class 属性 并且title中含有y的的背景"><br/>
	
	

</body>
</html>