jquery 学习 - 属性操作

Posted 2021-01-15 Anec

html代码

<div class="n1" zdy="z1">AAA
    <p>1111111</p>
    <input type="checkbox" value="A">A
    <input type="checkbox" value="B">B
    <div class="n2">AAA<p>BBBB</p></div>
    <input type="text" value="thisInput">CCCCC
</div>

 

属性性操作

// 属性性操作:
        // $(‘‘).attr()
            console.log($(‘div‘).attr(‘zdy‘));
            console.log($(‘div‘).attr(‘zdy‘,‘z2‘));
            console.log($(‘div‘).attr(‘zdy‘));

        // $(‘‘).removeAttr();
            console.log($(‘div‘).removeAttr(‘zdy‘));
            console.log($(‘div‘).attr(‘zdy‘));


        // $(‘‘).prop();
            console.log($(‘div‘).prop(‘zdy‘));
            console.log($(‘div‘).prop(‘zdy‘,‘z2‘));
            console.log($(‘div‘).prop(‘zdy‘));

        // $(‘‘).removeProp();
            console.log($(‘div‘).removeProp(‘zdy‘));
            console.log($(‘div‘).prop(‘zdy‘));

        // attr 跟 prop 区别(prop 找固有属性,返回值为true或者false)
            console.log($(‘:checkbox‘).eq(0).attr(‘checked‘));
            console.log($(‘:checkbox‘).eq(0).prop(‘checked‘));
            //undefined
            //false

 

classname属性操作

// classname属性操作
        $(‘‘).addClass();
        $(‘‘).removeClass();

 

文本操作

    //文本操作
        //html标签+文本
        // $(‘‘).html(替换内容);
         console.log($(‘.n2‘).html());

        //文本
        // $(‘‘).text(替换内容);
        console.log($(‘.n2‘).text());

        //value值
        // $(‘‘).val(替换内容);
        console.log($(‘:text‘).val());

        //AAA<p>BBBB</p>
        //AAABBBB
        //thisInput

 

css属性操作

　　//css属性操作
        // $(‘‘).css({属性:值})

 

js 与 jquery 对象 互转

// js 与 jquery 对象 互转
        // var $(jquery对象)
        // var DOM对象
        // var $(jquery对象).html() ===  var $(jquery对象)[0].innerHTML