首页 > 代码库 > jQuery属性遍历、HTML操作

jQuery属性遍历、HTML操作

2024-08-13 13:33:25   222人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/米老鼠"></p>
<button>显示值</button>
</body>

</html>

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：<!DOCTYPE html>
<html>
<head>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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操作。

jQuery属性遍历、HTML操作


联系
我们