jquery_元素文本值、属性值的获取、修改、添加（text、prop、attr、css）

1、text()获取、修改元素文本值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">        
        $(function(){
            div1 = $('#div1')
            // 获取文本值
            div1_text = div1.text()
            // 修改文本值
            div1.text(div1_text + "-----修改")
        });

    </script>
</head>

<body>
    <div id="div1">这是一个div元素</div>
</body>
</html>

2、prop()获取、修改、增加元素固有属性

所谓元素固有属性就是元素本身自带的属性，比如<a>里面的href，比如 <input>里面的type
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">        
        $(function(){
            div1 = $('#div1')
            // 获取id属性值值
            div1.prop("id")
            // 修改id属性值值
            div1.prop("id", "div666")

            bt = $("[type=button]")
            // prop获取元素固有属性值
            bt.prop("value")
            // 修改属性值
            bt.prop("value", "commit")
        });

    </script>
</head>

<body>
    <div id="div1">这是一个div元素</div>

    <input type="button" value="提交">

</body>
</html>

3、attr()获取、修改、增加自定义属性

不属于标签自带的属性均属于自定义属性，比如下面代码中使用 prop()方法获取div和input标签的name属性，input可以获取到，div就获取不到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">        
        $(function(){
            // 使用prop()获取input的name属性值，可以获取到
            input_name = $("#a").prop("name")
            console.log(input_name)

            // 使用prop()获取div的name属性值，无法获取到
            div1 = $("#div1")
            div_name = div1.prop("name")
            console.log(div_name)

            // 对于自定义属性可以使用attr()获取其值
            div_name_attr = div1.attr("name")
            console.log(div_name_attr)

            // 使用attr（）可以新增或修改自定义属性，属性存在则修改，不存在则新增
            div1.attr("zdy", "自定义")
        });
    </script>
</head>

<body>
    <input type="text" name="input_name" id="a">

    <div id="div1" name="div_name">这是一个div元素</div>

</body>
</html>

获取值的情况如下：

attr()可以新增或修改自定义属性，属性存在则修改，不存在则新增

4、css()增加、修改、删除元素css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">        
        $(function(){
            div1 = $("#div1")
            // 单个css属性可以入参方式传入。若属性不存在则添加，若属性存在则修改
            div1.css("color", "red")

            // 多个css属性，以对象格式传入，对象可以只有1个css属性
            div1.css({"font-size": "25px"})
            // 有连字符“-”的属性可修改为驼峰式，比如font-size等价于fontSize
            div1.css({"backgroundColor": "green", "font-weight": "bold"})

            // 删除css属性
            div1.css({"color": ""})
        });
    </script>
</head>

<body>
    <div id="div1" name="div_name" style="color: blue">这是一个div元素</div>
</body>
</html>

 

 

 

 

 

 

 

 

posted @ 2022-08-02 15:38  码上测  阅读(702)  评论(0)    收藏  举报