<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>遍歷節點.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../jquery-1.7.1.js"></script>
</head>
<style type="text/css">
.wid{
width: 150px ;
color: purple ;
font-weight: bold;; <!-- 粗體字 -->
}
.hei{
height: 150px;
}
.another{
font-style: italic;<!-- 斜體 -->
}
</style>
<body>
<h3>s<br></h3><h3>水果</h3>
<strong title="mouse">老鼠掉進大米缸</strong>
<strong title="cat">正好大米缸裏面有隻貓··哎····</strong>
<p class="wid" title="選擇你喜歡的水果"> 你喜歡的水果是？</p>
<ul style="background-color: purple">
<li title ="蘋果 ">蘋果</li>
<li title ="橘子 ">橘子</li>
<li title ="菠蘿 ">菠蘿</li>
<li title ="香蕉 ">香蕉</li>
<li title ="梨子 ">梨子</li>
</ul>
<input type="text" id = "username" value = "請輸入用戶名 " />
<input type="text" id = "password" value = "請輸入密碼 " />
<input type ="button" id ="button" value="登錄 " />
<select id = "one" multiple="multiple">
<option value="1" selected="selected" > 哈哈</option>
<option value="2">呵呵 </option>
<option value="3"> 嘿嘿</option>
<option value="4" > 嘎嘎</option>
</select>
</body>
<script type="text/javascript">
//children() 獲取匹配元素的所有 子元素 此方法只考慮子元素 而不考慮 後代元素
/*
$(function(){
var $children = $('body').children();
var $ul = $('ul').children();
alert($children.length); // 打印出來 11個子元素
alert($ul.length); // 打印出來 5個子元素
for(var i = 0; i < $ul.length ; i++){
alert($ul[i].innerHTML); // 輸出到 HTML中
}*/
// next() 該方法用於取得匹配元素後面緊相鄰的 一個元素
$(function(){
var $1 = $('p').next();
for(var i = 0; i < $1.length ; i++){
alert($1[i].innerHTML); // 輸出到 HTML中
}
})
})
</script>
</html>