jQuery基础教程(十)

jQuery中，attr()与prop()都可以用来修改节点的属性，但是具体使用细节上还是有区别的。

attr()与prop()区别见下表：

情形	推荐使用方法	举例
对于节点本身就固有存在的属性	prop()	例如a标签的href
对于节点用户自定义的属性	attr()	例如a标签的action(a标签本身不存在action属性)
对属性值属于boolean类型	prop()	例如:selected,checked,disabled

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程之效果-attr与prop的区别</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div style="text-align: center">
    <a href="https://www.tmall.com" action="goshopping" id="url">天猫网</a><br>
    <input type="checkbox" checked id="rememberme">记住我
</div>
<hr>
<div style="text-align: center">
    <input type="button" value="修改链接地址使用attr" id="btn1"><input type="button" value="修改链接地址使用prop" id="btn2"><br>
    <input type="button" value="修改action使用attr" id="btn3"><input type="button" value="修改action使用prop" id="btn4"><br>
    <input type="button" value="是否记住我使用attr" id="btn5"><input type="button" value="是否记住我使用prop" id="btn6"><br>
</div>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("#url").text('京东网');
            $("#url").attr("href","https://www.jd.com");
        })
        $("#btn2").click(function(){
            $("#url").text('京东网');
            $("#url").prop("href","https://www.jd.com");
        })
        $("#btn3").click(function(){
            $("#url").attr("action","剁手节快乐！");
            alert($("#url").attr('action'));
        })
        $("#btn4").click(function(){
            $("#url").prop("action","剁手节快乐！");
            alert($("#url").attr('action'));
        })
        $("#btn5").click(function(){
            alert($("#rememberme").attr('checked'));
        })
        $("#btn6").click(function(){
            alert($("#rememberme").prop('checked'));
        })

    })
</script>
</body>
</html>