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>