JQueryDOM之查找节点

最新推荐文章于 2021-12-02 22:50:11 发布

雷蒙96

最新推荐文章于 2021-12-02 22:50:11 发布

阅读量481

点赞数

分类专栏： jQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/weixin_41298721/article/details/87892871

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

查找节点

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>