<!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 type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//并集选择器。使用“,”区分开
$("th,td").css("border", "blue double 3px");
//交集选择器。直接把多个选择器连接在一起
//$("input.txtBox#userName").css("border", "black none 0px").css("background-color", "lightgreen");
$("input.txtBox").css("border", "black none 0px").css("background-color", "lightgreen");
//全局选择器。使用"*"表示选择页面上所有的元素
$("*").css("font", "微软雅黑").css("font-size", "11pt");
//网站上常用的字体：
//正文：宋体9pt,宋体10pt
//标题：微软雅黑10pt,微软雅黑11pt
//后代选择器。选择的是子元素，使用“ ”(空格)隔开
$("tr th").css("background-color", "lightcyan");
//子选择器。选择的是子元素，使用“>”隔开
$("tr>th").css("background-color", "lightcyan");
//相邻选择器。选择的是相邻的一个元素，使用“+”隔开
$("#item1+li").css("color", "green");
//同辈选择器。选择的是同一级别的元素，使用“~”隔开
$("#item1+li~li").css("font-weight", "bold");
//属性选择器。
$("input[type='submit']").css("background-color", "red").css("color", "white");
$("[id^='user']").css("font-size","20pt");
});
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<table>
<tr>
<td>
帐号：
</td>
<td>
<input type="text" class="txtBox" id="userName" />
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" class="txtBox" id="userPass" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="登录" />
</td>
</tr>
</table>
<ul type="none">
<li id="item1">项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
<li>项目五</li>
</ul>
</body>
</html>