jQuery——06——属性和属性节点以及操作属性节点以及attr和prop方法

一:属性和属性节点介绍

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /*
               	 1:什么是属性
               	    对象身上保存的变量
               	    
               	 2:如何操作属性
               	   对象.属性名称=值
               	   对象.属性名称;
               	  对象["属性名称"]=值
               	  对象["属性名称"]
               	  
               	 3:什么是属性节点
               	 <span name="666"></span>
               	 在编写Html代码时,在HTML标签中添加的属性就是属性节点
               	 在浏览器中找到span这个DOM元素之后,展开看到的都是属性
                 在attributes属性中保存的所有内容都是属性节点

               	 4:如何操作属性节点
               	 DOM元素.setAttribute("属性名称","值");
                 DOM元素.getAttribute("属性名称");

               	 5:属性和属性节点有什么区别
                    任何对象都有属性,但是只有DOM对象才有属性节点
               	  
               	 */
            function Person() {}
            var p = new Person()
            p.name = "xzx";
            console.log(p.name);
            p["age"] = 21;
            console.log(p["age"]);

            var span = document.getElementsByTagName('span')[0]
            span.setAttribute("name", "ss");
            console.log(span.getAttribute("name"));
        })
    </script>


</head>

<body>
    <span name="666"></span>
</body>

</html>

二:操作属性节点的方法 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /*
            1:attr(name|pro|key,val|fn)
            作用:获取或者设置属性节点的值
            可以传递一个参数,也可以传递两个参数
            如果传递一个参数,代表获取属性节点的值
            如果传递两个参数,代表设置属性节点的值
           注意点:
           如果是获取:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
           如果是设置:找到多少个元素就会设置多少个元素
           如果是设置:如果设置的属性节点不存在,系统会自动新增
                 
            2:removeAttr(name)
            作用:删除属性节点
            注意点:会删除所有找到元素指定的属性节点
            如果删除两个,空格隔开
            */
            console.log($("span").attr("class"));
            $("span").attr("class", "box");
            $("span").attr("class", "box");
            $("span").attr("abc", "123");

            $("span").removeAttr("class");
            $("span").removeAttr("class name"); //删除两个

        })
    </script>


</head>

<body>
    <span class="span1" name="s1"></span>
    <span class="span2" name="s2"></span>
</body>

</html>

 

三:操作属性的方法 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /*
            1:prop方法
            特点和attr方法一致
            2:removeProp方法
            特点和removeAttr方法一致

            */
            $("span").eq(0).prop("demo", "span01"); //eq里是第0个eq
            $("span").eq(1).prop("demo", "span02");
            console.log($("span").prop("demo")); //只获取第一个

            $("span").removeProp("demo");
            // 注意点:prop方法不仅能够操作属性,它还能操作属性节点
            console.log($("span").prop("class"));
            $("span").prop("class", "box");
        })
    </script>


</head>

<body>
    <span class="span1" name="s1"></span>
    <span class="span2" name="s2"></span>
</body>

</html>

 

四:该如何选择attr还是prop 

官方推荐在操作属性节点时,具有true和false两个属性的属性节点,例如:checked,selected或者disabled 使用prop(),其他的使用attr()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            console.log( $("input").prop("checked"));
            console.log( $("input").attr("checked"));
         
        })
    </script>
</head>

<body>
    选中:<input type="checkbox" checked>
    <!-- 没选中:<input type="checkbox" > -->
</body>

</html>

 

五:attr小应用 

也可以用prop,但是因为节点属性不是true和false,所以推荐用attr

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //还没学的用js写
            //给按钮添加点击事件
            var btn=document.getElementsByTagName('button')[0];
           btn.onclick=function(){
               //获取输入框输入内容
               var input=document.getElementsByTagName('input')[0];
               var text=input.value;
               //修改Img的src属性节点的值
                $("img").attr("src",text)
            }
         
        })
        //input里面输入:http://b159.photo.store.qq.com/psb?/V13fa3kk1tXuy2/EsKE3sFY5UHa98ZhFRJ*sv3axq6i2g2Md3.xPwY0n6E!/b/dJ8AAAAAAAAA&bo=oAU4BDgEoAURCT4!&t=5&t=5&t=5&t=5&w=384&h=288&rf=travel&t=5
    </script>
</head>

<body>
    <input type="text">
    <button>切换图片</button><br>
    <img src="http://a2.qpic.cn/psb?/V13fa3kk0zUpc8/QlcoUWIygp3PwcRgvPQ*r6fl8DG1NvT2t4ec2CvqPDw!/b/dNEAAAAAAAAA&bo=oAU4BDgEoAURCT4!&t=5&w=557&h=418&rf=travel&t=5" alt="" style="width: 350px;height: 300px;">
</body>

</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值