jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery 遍歷函數
jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法。
| .add() | 將元素添加到匹配元素的集合中。 |
| .andSelf() | 把堆棧中之前的元素集添加到當前集合中。 |
| .children() | 獲得匹配元素集合中每個元素的所有子元素。 |
| .closest() | 從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。 |
| .contents() | 獲得匹配元素集合中每個元素的子元素，包括文本和注釋節點。 |
| .each() | 對 jQuery 對象進行迭代，為每個匹配元素執行函數。 |
| .end() | 結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。 |
| .eq() | 將匹配元素集合縮減為位於指定索引的新元素。 |
| .filter() | 將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。 |
| .find() | 獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選。 |
| .first() | 將匹配元素集合縮減為集合中的第一個元素。 |
| .has() | 將匹配元素集合縮減為包含特定元素的后代的集合。 |
| .is() | 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。 |
| .last() | 將匹配元素集合縮減為集合中的最后一個元素。 |
| .map() | 把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。 |
| .next() | 獲得匹配元素集合中每個元素緊鄰的同輩元素。 |
| .nextAll() | 獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。 |
| .nextUntil() | 獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .not() | 從匹配元素集合中刪除元素。 |
| .offsetParent() | 獲得用於定位的第一個父元素。 |
| .parent() | 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。 |
| .parents() | 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。 |
| .parentsUntil() | 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。 |
| .prev() | 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。 |
| .prevAll() | 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。 |
| .prevUntil() | 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .siblings() | 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 |
| .slice() | 將匹配元素集合縮減為指定范圍的子集。 |
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標准：
“W3C 文檔對象模型獨立於平台和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。”
獲得內容 - text()、html() 以及 val()
三個簡單實用的用於 DOM 操作的 jQuery 方法：
- text() - 設置或返回所選元素的文本內容
- html() - 設置或返回所選元素的內容（包括 HTML 標記）
- val() - 設置或返回表單字段的值
下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：文字加粗效果<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">這是段落中的<b>粗體</b>文本。</p>
<button id="btn1">顯示文本</button>
<button id="btn2">顯示 HTML</button>
</body>
</html>
下面的例子演示如何通過 jQuery val() 方法獲得輸入字段的值：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>顯示值</button>
</body>
</html>
獲取屬性 - attr()
jQuery attr() 方法用於獲取屬性值。
下面的例子演示如何獲得鏈接中 href 屬性的值：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>顯示 href 值</button>
</body>
</html>
設置所有 p 元素的內容：<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").html("Hello <b>world!</b>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改變 p 元素的內容</button>
</body>
</html>
當使用該方法返回一個值時，它會返回第一個匹配元素的內容。<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
alert($("p").html());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">改變 p 元素的內容</button>
</body>
</html>
使用函數來設置所有匹配元素的內容。<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html(function(n){
return "這個 p 元素的 index 是：" + n;
});
});
});
</script>
</head>
<body>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<button>改變 p 元素的內容</button>
</body>
</html>
下面的例子展示如何向不同的元素添加 class 屬性。當然，在添加類時，您也可以選取多個元素：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>標題 1</h1>
<h2>標題 2</h2>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<div>這是非常重要的文本！</div>
<br>
<button>向元素添加類</button>
</body>
</html>
以上就是我對jQery屬性遍歷與HTML操作。