jQuery中的prop方法以及prop和attr方法的区别

最新推荐文章于 2022-06-13 09:48:50 发布

_阿锋丶

最新推荐文章于 2022-06-13 09:48:50 发布

阅读量204

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_43342105/article/details/104472530

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>prop</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: red;
            margin-top: 5px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>

        $(function () {
        /*
        1.prop方法
              // 作用：获取或者设置属性节点的值
        // 可以传递一个参数，也可以传递两个参数
        // 如果传递一个参数，代表获取属性节点的值
        // 如果传递两个参数代表设置属性节点的值
            和attr方法一致

        2.removeProp方法
        和removeProp方法一致
        
        */
        
        $("span").eq(0).prop("demo","it6");
        $("span").eq(1).prop("demo","wf");

        console.log($("span").prop("demo"));

        $("span").removeProp("demo");
        console.log($("span").prop("demo"));

       
        // 注意点：
        // prop方法不经能够操作属性，他还能操作属性节点

        console.log($("span").prop("class"));//span1
        $("span").prop("class","box");
        console.log($("span").prop("class"));//box


            // 什么时候用attr什么时候用prop

            // 官方推荐操作属性节点是，具有true和false两个属性的属性节点
            // 如checke selected或者disabled使用prop（）其他使用attr
        console.log($("input").prop("checked"));//ttue
        console.log($("input").attr("checked")); //checked










 })
    </script>
</head>

<body>
   <span class="span1" name="sp"></span>
   <span class="span2" name="spa"></span>

   <input type="checkbox" checked>
</body>

</html>

_阿锋丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的prop方法以及prop和attr方法的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫