jquery属性操作

时间：2021-07-22 17:38:07 收藏：0 阅读：0

操作元素(属性)

属性操作

‘‘‘
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")
‘‘‘

注意：

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见



<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

attr和prop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>

    <div class="div1"></div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        console.log($(‘.div1‘).hasClass(‘div1‘)) // true；$(‘P‘).hasClass(‘p1‘)判断P标签是否有class属性值为p1，返回布尔值
    </script>


    <!--***********************属性操作***********************-->
    <div class="div2" con="c1"></div>
    <input type="checkbox">是否可见
    <input type="checkbox" checked="checked">是否可见
    <script>
        console.log($(‘.div2‘).attr(‘con‘)); // c1
        $(‘.div2‘).attr(‘con‘,‘c2‘); // 可以发现con属性值已经更改为c2

        console.log($(‘:checkbox:first‘).attr(‘checked‘)); // undefined
        console.log($(‘:checkbox:last‘).attr(‘checked‘)); // checked

        console.log($(‘:checkbox:first‘).prop(‘checked‘)); // false
        console.log($(‘:checkbox:last‘).prop(‘checked‘)); // true
        console.log($(‘.div2‘).prop(‘con‘)); // undefined
        $(‘.div2‘).prop(‘con‘,‘c3‘); // 上面已经显示了找不到，所以无法更改
        // 结论：prop与attr用法相似，但是对于标签固有属性使用prop好一些，对于标签自定义属性使用attr好一些
    </script>

    <div class="div3 hide">hello div</div>
    <script>
        $(‘.div3‘).removeClass(‘hide‘); // 移除属性值
        $(‘.div3‘).addClass(‘hide‘); // 添加属性值
    </script>

    <div id="id1">
        aaaaaa
        <p>pppppp</p>
    </div>
    <script>
        console.log($(‘#id1‘).html()); // aaaaaa <p>pppppp</p>
        console.log($(‘#id1‘).text()); // aaaaaa pppppp
        $(‘#id1‘).html(‘<h1>hello</h1>‘); // 把h1标签渲染了
        $(‘#id1‘).text(‘<h1>hello</h1>‘); // 直接把h1标签当作文本内容
    </script>

    <input type="text" value="123">
    <div value="456"></div>
    <script>
        console.log($(‘:text‘).val()); // 123
        console.log($(‘:text‘).next().val()); // 什么都没打印
        $(‘:text‘).val(‘789‘);
        // 结论：val只能对有固有属性value的标签进行取值，如input/select/option
    </script>

    <div class="div4">hi</div>
    <script>
        $(‘.div4‘).css(‘color‘,‘red‘);
        // $(‘.div4‘).css({‘color‘:‘yellow‘,‘background-color‘:‘black‘}); // 这种写法也可以
    </script>
</body>
</html>