jquery-development
/
jQuery的操作属性.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    1.val() 获取或修改表单控件的value值 等于dom.value
    2. prop() 获取或修改原生属性值(checked，selected)
    3.attr() 获取或修改自定义属性值 等于 dom.setAttribute() dom.getAttribute()

    <input type="text" id="myinput" name="username" value="张三">


    <div name="bj" class="beijing">北京</div>

    <input type="checkbox" id="hobby" checked="checked">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        var $myinput = $("#myinput")
        var $beijing = $(".beijing")

        $myinput.val("李四")

        // 获取属性值
        console.log($beijing.attr("name"));
        $beijing.attr("name", "dabeijing")

        console.log($beijing.attr("name"));
        $beijing.attr("xinjian", "xinjian")
        // $beijing.removeAttr("xinjian") 删除属性值


        console.log($("#hobby").prop('checked'));
        $('#hobby').change(function () {
            var isChecked = $(this).is(':checked');
            console.log("复选框状态: " + isChecked);
        });
        $beijing.click(function () {
            $('#hobby').prop("checked", false)
        })

    </script>
</body>

</html>