<%@ 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>