【js】jQuery获取和修改元素的内容、属性、css样式

﹏ヽ暗。殇╰゛Y 2022-11-27 00:45 271阅读 0赞

#### 1.获取和修改元素内容 ####

我们可以使用html()方法获取元素内容和修改内容，类似于元素js的innerHTMl  
当html()方法不传参数的时候即是获取该元素的内容，若传参数，参数即该元素被修改后的内容

<body>
        <div id="div1">
            <ul class="list">
                <li>111</li>
                <li class="li1">222</li>
                <li>333</li>
            </ul>
        </div>
    </body>
    <script> $ul = $('.list').html() //当html方法不传参数的时候即是获取该元素的内容 console.log($ul) </script>

//当html方法传参时，即为修改该元素的内容
    $('.list').html('<li>abc</li><li>edf</li>')

若给html()方法传参，会覆盖该元素原有的内容，如果不想覆盖可以考虑使用追加的方式

//在该元素里面再添加一个li子元素
     $('.list').append('<li>abc</li>')

#### 2.获取和修改元素属性 ####

我们可以使用prop()函数获取或者修改属性的值，让prop()的参数是属性名时即获取该属性值，若为字典，则为修改或增加属性

<body>
        <div id="div1">
            <input type="text" id="text1" name="userName" value="请输入你的姓名">
            <input type="button" id="button1" value="点击">
        </div>
    </body>
    <script>
    //prop()函数传入属性名，即可获取该属性的值
    var name = $('#text1').prop('name') //获取id为text1的元素的name属性
    //prop()函数传入一个字典，即可修改属性或增加属性
    var val = $('#text1').prop({ 'value':'我的姓名','placeholder':'请在此处输出姓名'})  //修改value属性的值，并且增加placeholder属性
    </script>

如果是获取或修改value属性的值，我们可以使用val()函数，若不传参数即是获取value值，传参数即是修改value值

var $val = $('#text1')
        $val.prop({ 'value':'我的姓名','placeholder':'请在此处输出姓名'})  //修改value属性的值，并且增加placeholder属性
        console.log($val.val())
        $val.val('111111')

#### 3.修改元素css样式 ####

$("#61dh a").css("color")  /* 不指定值则是获取对应的值 */
    $('#id').css('display','none'); 
    $('#id').css('display','block');
    $("p").css("color","red"); $("p").css({ "background-color":"yellow","font-size":"200%"});