jquery中的prop()方法

叶子G

于 2023-06-26 10:30:53 发布

阅读量1.2k

点赞数 1

文章标签： jquery javascript

本文链接：https://blog.csdn.net/Gyezi/article/details/131392223

版权

这篇文章介绍了jQuery中的prop()方法，用于处理DOM元素的属性，特别是在设置像checked或disabled这样的布尔属性时。文章通过示例代码展示了如何使用prop()来检查或设置checkbox的状态，并对比了prop()和attr()的区别，强调了prop()在处理特定属性时的推荐使用。此外，还提到了html()方法用于获取和设置元素内部HTML。

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

jquery中的prop()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
    <input type="checkbox" name="checkItem1" value="11"/>prop方法
    <input type="checkbox" name="checkItem2" value="22"/>attr方法
    <button>勾选</button>

    <div class="test"><p>prop方法获取节点及自身</p></div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            /*
            访问对象的属性、新增属性、设置属性值：使用attr、prop
            推荐使用prop()的情况:
            	1、只添加属性名称该属性就会生效应该使用 prop() ；
            	2、只存在 true/false 的属性应该使用 prop() ；
            按照官方说明，如果是设置 disabled 和 checked 这些属性，应使用 prop() 方法，而不是使用 attr() 方法。
            使用 attr() 方法会存在浏览器的兼容问题。
            */
            $("[name=checkItem1]:checkbox").prop("checked",true);
            $("[name=checkItem2]:checkbox").attr("checked",true);   
        });

        // prop方法获取当前节点下的html包含当前节点
        // html方法获取当前节点下的html
        let testNode = $(".test").prop("outerHTML");
        console.log(testNode,'testNode');
        
        let testHtmlNode = $(".test").html();
        console.log(testHtmlNode,"testHtmlNode");
    });
</script>
</html>