JQueryDOM之属性操作

最新推荐文章于 2022-05-04 01:42:04 发布

雷蒙96

最新推荐文章于 2022-05-04 01:42:04 发布

阅读量217

点赞数

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

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

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

属性操作

关于属性操作，我们这里来讲两个方法：attr()和removeAttr()

attr(): 能够获取元素属性、也能够设置元素属性

当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值

当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue

例：

$("p").attr("title")：该示例用于获得p元素的title属性值

$("p").attr("title","你最喜欢的水果")：该示例设置p元素的title属性值为"你最喜欢的水果"

如果一次设置多个属性值可以使用“名/值”对形式

例：

$("p").attr({"title":"你最喜欢的水果","name":"水果"}) （该示例一次设置两个属性值，可设置多个属性值）

removeAttr()：用于删除特定的属性，方法是在参数中指定属性名

$("p").removeAttr("name"); 该方法就是移除p元素的name属性

案例源码：

<!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(){
        		//获取设置属性值用attr方法
        		//获取ul中第一个li元素的title属性
        		alert($("ul li:first").attr("title"));
        		//给p标签添加一个title属性和id属性
        		//attr方法可以一次性设置多个属性
        		alert($("p").attr({"title":"水果","id":"p1"}));
        		
        	})
        	
        	$("#btn2").click(function(){
        		//移除p标签的title属性
        		$("p").removeAttr("title");
        	})
        })
    </script>
</head>
<body>
    <p>你最喜欢的水果?</p>
    <ul>
        <li title="苹果">苹果</li>
        <li title="桔子">桔子</li>
        <li title="香蕉">香蕉</li>
    </ul>
    <div>
        你最喜欢的运动
        <ul>
            <li>游泳</li>
            <li>篮球</li>
            <li>足球</li>
        </ul>
    </div>

    <button id="btn1">获取设置属性</button>
    <button id="btn2">移除属性</button><br /><br />
</body>
</html>

雷蒙96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQueryDOM之属性操作

属性操作关于属性操作，我们这里来讲两个方法：attr()和removeAttr()attr(): 能够获取元素属性、也能够设置元素属性当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue例： $("p").att...
复制链接

扫一扫