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>

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!