<!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>
jQuery中的並集、交集、全局、后代、子、同輩、屬性選擇器例子
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。