<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 使用jQuery()函数 </title>
<style type="text/css">
.test{
font-size:20pt;
}
</style>
</head>
<body>
<ul>
<li id="java">疯狂Java讲义</li>
<li id="javaee" class="test">轻量级Java EE企业应用实战</li>
<li id="ajax">疯狂Ajax讲义</li>
<li id="xml">疯狂XML讲义</li>
<li id="ejb">经典Java EE企业应用实战</li>
<li><span id="android">疯狂Android讲义</span></li>
</ul>
<span>疯狂Java联盟</span>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 访问页面中第1、4、7...个li元素
$("li:nth-child(3n+1)").css("border" , "1px dashed black");
// 访问页面中span元素、且该span元素的父元素下仅包含该span元素。
$("span:only-child()").append(" <b>是作为父元素唯一子元素的span元素</b>");
// 测试:first和:first-child之间的关系
alert($("ul>li:first").html() == $("ul>li:first-child").html());
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 使用jQuery()函数 </title>
<style type="text/css">
.test{
font-size:20pt;
}
</style>
</head>
<body>
<ul>
<li id="java">疯狂Java讲义</li>
<li id="javaee" class="test">轻量级Java EE企业应用实战</li>
<li id="ajax">疯狂Ajax讲义</li>
<li id="xml">疯狂XML讲义</li>
<li id="ejb">经典Java EE企业应用实战</li>
<li><span id="android">疯狂Android讲义</span></li>
</ul>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 访问ul元素下第一个li子元素。
$("ul>li:first").append("<b> 是ul元素之内第一个li子元素</b>");
// 访问ul元素之内，没有id属性的li子元素
$("ul>li:not([id])").append("<b> 是ul元素之内、没有id属性li子元素</b>");
// 访问ul元素之内，索引为偶数的li子元素，并为它们添加背景色
$("ul>li:even").css("background-color", "#ccffcc");
// 访问ul元素之内，索引大于4的li子元素(元素索引从0开始)
$("ul>li:gt(4)").append("<br/><b> 是ul元素之内、索引大于4的li子元素</b>")
.css("border" , "1px dashed black");
// 访问ul元素之内，且包含span元素的li子元素
$("ul>li:has('span')").append(
"<br/><b> 是ul元素之内、且包含span元素的li子元素</b>");
// 访问li元素之内，且可见的span子元素
$("li>span:visible").append(
"<b> 是li元素之内，且可见的span子元素</b>")
.css("background-color" , "#bbbbbb");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 使用jQuery()函数 </title>
</head>
<body>
<input id="user" type="text" /><br />
<input id="pass" type="password" /><br />
<textarea id="intro"></textarea><br />
<select id="gender">
<option value="male" selected="selected">男</option>
<option value="female">女</option>
</select><br /><br /><br />
<input id="pass" type="checkbox" checked="checked" value="xx"/><br />
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 获取所有的input、textarea、button、select元素
$(":input").val("test");
// 获取所有指定了selected="selected"的元素
$(":selected").css("border" , "2px dashed black");
// 获取所有指定了checked="checked"的元素,并取消它们的选中
$(":checked").prop("checked" , "");
</script>
</body>
</html>