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

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>

原创不易，记得给点个赞哦

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

猜你喜欢