<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>通过jQuery获取页面元素</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// function fn() {
// var obj = document.getElementById("sundayAM");
// var result = obj.innerHTML;
// document.getElementById("sundayAM").html();//✖
// alert("周日上午的行程是：" + result);
// }
$(function() {
$("#ok").click(
function() {
//$();//工厂函数
//jQuery();//工厂函数
jQuery("table").css("border", "solid thin black");
$(".redStyle").css("background-color", "lightcoral");
var result = $("#sundayAM").html();
// var result = $("#sundayAM").innerHTML; //✖
alert("周日上午的行程是：" + result);
// $("#saturdayAM").css("color", "green").next().css("color", "red");
$("#sundayAM").css("color", "blue").prev().css("color", "yellow");
}
);
}
//jQuery的常用方法：
//工厂方法：
//$();
//jQuery();
//常用的API方法：
//html();//获取元素内容（包含HTML标记）
//text();//获取元素内容（仅包含文本）
//css();//给元素添加CSS样式属性
//addClass();//给元素添加CSS的样式类
//next();//获取元素的下一个元素
//prev();//获取元素的上一个元素
//click();//绑定按钮的点击事件
);
//给按钮添加单击事件的语法：
// $(
// function () {
// $("选择器").click(
// function() {
// //点击事件的处理代码
// }
// );
// }
// );
</script>
</head>
<body>
<table border="0" cellspacing="3" cellpadding="2">
<caption>课程表</caption>
<tr>
<th> </th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th class="redStyle">周六</th>
<th class="redStyle">周日</th>
</tr>
<tr>
<td>上午</td>
<td>班会</td>
<td>jQuery</td>
<td>jQuery</td>
<td>Java</td>
<td>Java</td>
<td class="redStyle" id="saturdayAM">休息</td>
<td class="redStyle" id="sundayAM">
<h3>休息</h3></td>
</tr>
<tr>
<td>下午</td>
<td>Java</td>
<td>指导学习</td>
<td>指导学习</td>
<td>指导学习</td>
<td>指导学习</td>
<td class="redStyle">休息</td>
<td class="redStyle">休息</td>
</tr>
</table>
<input id="ok" type="button" value="获取周日上午的行程" />
</body>
</html>