13--Jquery中的DOM操作(属性节点获取和设置)

最新推荐文章于 2024-07-05 14:21:58 发布

qwy715229258163

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量383

点赞数 2

分类专栏： Jquery 文章标签： css javascript jquery html html5

本文链接：https://blog.csdn.net/qwy715229258163/article/details/113876646

版权

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中attr()方法用于获取和设置元素属性值，以及removeAttr()方法用于删除元素属性的用法。通过三个实例展示了如何获取元素的title属性、设置元素的title和样式属性，以及移除指定属性。示例代码清晰地演示了这两个方法的使用场景。

摘要由CSDN通过智能技术生成

attr():获取属性值或设置属性
1. 当为该方法传递一个参数时，则为某个元素获取指定的属性
2. 当为该方法传递两个参数时，则为某个元素设置指定的属性值
Jquery中有很多方法都是一个函数实现获取或设置值。比如：attr(),html(),text(),val(),height(),width(),css()等。
removeAttr():删除指定元素的属性。
实例1：使用attr()获取指定元素的指定的属性的值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>attr()方法获取属性值</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <div title="你喜欢的运动" id="content">足球</div>
    <script>
        $(function(){
            var $div=$("#content");
            /*获取指定元素的指定属性的值*/
           var title= $div.attr("title");
            alert(title);
        });
    </script>
</body>
</html>

实例2：使用attr()设置指定元素的指定的属性的值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用attr()给指定的元素设置属性</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="zj">橘子</li>
        <li>香蕉</li>
    </ul>
    <script>
        $(function(){
            /*使用attr()给指定的元素设置属性*/
            $("li:eq(2)").attr("title","xj").attr("style","color:red;font-size:20px;");
        });
    </script>
</body>
</html>

实例3：使用removeAttr()移除某个属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用removeAttr()移除某个元素属性</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="zj">橘子</li>
        <li>香蕉</li>
    </ul>
    <script>
        $(function(){
            /*"li[title='zj']":属性选择器
            * 移除指定的属性
            * */
            $("li[title='zj']").removeAttr("title");
        });
    </script>
</body>
</html>