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

时间：2022-06-25 17:54:51

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>

相关文章