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

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

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%"});