jQuery-操作元素的内容，属性，样式

1.操作内容

• 获取：
  • 双标签：html()
  • input:val()
• 设置：
  • 双标签：html('新内容')
  • input:val('新内容')

2.操作属性

* 获取：attr('属性名')
* 设置：attr('属性名','新的值')

3.样式操作

* 获取：css('样式名')
* 设置：css('样式名','新的值')   css({"样式名1":"新的值","样式名2":"新的值"})

4.额外封装的

• css操作类操作：
  • addClass()：添加类名
  • removeClass()：删除类名
  • toggleClass()：切换类名
• 尺寸操作：
  • height()：高度
  • width()：宽度
  • scrollTop()：滚动高度
  • scrollLeft()：滚动距左边距离

5.代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作内容，属性，样式</title>
    <style>
        #box {}

        .content {}
    </style>
</head>

<body>
    <div>div的内容</div>
    <input type="text" value="input的标签" />
    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <script>
        //获取内容
        console.log($("div:eq(0)").html())
        console.log($("input:eq(0)").html())
            //设置内容
        $('div:eq(0)').html('新的值')
        $('input:eq(0)').html('新的input值')

        //设置属性
        $("div:eq(0)").attr('id', 'box').attr('class', 'content')

        //获取属性
        console.log($("div:eq(0)").attr('id'))

        //获取样式
        console.log($("div:eq(0)").css('fontsize'))
            //设置样式
        $("div:eq(0)").css('color', 'red').css('fontsize', '30px')
        $("div:eq(0)").css({
            'border': '1px solid #000',
            'background': 'skyblue',
            'margin': '10px auto',
            'height': '400px',
            'width': 300,
            'padding': "20px"
        })
    </script>
</body>

</html>