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大特性解读
-
每一个你不满意的现在，都有一个你没有努力的曾经。