码迷,mamicode.com
首页 > Web开发 > 详细

jquery 学习(二) - 属性操作

时间:2018-10-26 19:34:47      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:box   input   name   classname   efi   rop   var   操作   this   

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

 

jquery 学习(二) - 属性操作

标签:box   input   name   classname   efi   rop   var   操作   this   

原文地址:https://www.cnblogs.com/Anec/p/9857715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!