JQueryDOM之查找节点
程序员文章站
2022-06-15 14:46:45
...
查找节点
1.节点有哪些？--》元素节点、属性节点、文本节点
查找元素节点：
<--通过jQuery选择器，直接可以获取到节点元素。-->
例1：查找元素节点p返回p内的文本内容$("p").text();查找节点属性
<--获取到需要的元素节点后，可以使用attr()方法来获取它的各种属性值。-->
attr()方法的参数可以是一个，也可以是两个，当参数为一个时，是要查询的属性名字。
例2：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。案例代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM查找节点</title>
<script src="../js/jquery-3.1.1.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
//获取p标签的文本内容
alert($("p").text());
//把橘子改成西瓜
$("li:eq(1)").text("西瓜");
//把苹果改成梨子
$("li:first").html("<h1>梨子</h1>");
//html()和text()：可以读取文本节点，也可以修改文本节点
//html():支持标签
//text():只是支持文本
});
//attr():如果是一个参数就是查询属性节点值，两个参数就是修改属性节点值
$("#btn2").click(function(){
//查找p元素节点的title属性值
alert($("p").attr("title"));
//把第一个li的title属性值修改成苹果
$("li:first").attr("title","苹果");
//修改name属性为name的input元素节点的value值为"我是一个好人"
// $("input[name='name']").attr("value","我是一个好人");
//注意：如果是直接操作value属性我们可以使用更便捷的方法val()
//val()只是针对于value属性，别的属性还是需要使用attr()
//val():可以获取value属性值，也可以修改value属性值
$("input[name='name']").val("我是一个好人");
})
})
</script>
</head>
<body>
<h3>DOM树</h3>
<p title="水果">你喜欢的水果是？</p>
<ul>
<li title="apple">苹果</li>
<li title="orange">桔子</li>
<li title="banana">香蕉</li>
</ul>
<input type="text" name="name" value="" />
<br />
<button id="btn1">查找文本节点</button>
<button id="btn2">查找节点属性</button>
</body>
</html>
上一篇： jQuery基础 jQueryDOM操作