jQuery屬性遍歷、HTML操做
jQuery 擁有可操做 HTML 元素和屬性的強大方法。javascript
jQuery 遍歷函數
jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法。css
| .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 的能力。html
jQuery 提供一系列與 DOM 相關的方法，這使訪問和操做元素和屬性變得很容易。java
提示：DOM = Document Object Model（文檔對象模型）jquery
DOM 定義訪問 HTML 和 XML 文檔的標準：函數
「W3C 文檔對象模型獨立於平臺和語言的界面，容許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。」htm
得到內容 - 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>ip
獲取屬性 - 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操做。
- 1. jQuery的屬性、遍歷和HTML操做
- 2. jquery屬性操做.html(),, .prop()
- 3. DOM的jquery操做（遍歷）
- 4. jquery操做html data-* 屬性的坑
- 5. jQuery屬性操做
- 6. jQuery 屬性操做
- 7. jQuery---屬性操做
- 8. jQuery特殊屬性操做
- 9. jQuery屬性操做之.attr()
- 10. 04-jQuery的屬性操做
- 更多相關文章...
- • XML DOM 遍歷節點樹 - XML DOM 教程
- • jQuery Mobile Data 屬性 - jQuery Mobile 教程
- • C# 中 foreach 遍歷的用法
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。