【回炉重造】JQuery 获取和设置元素内容/属性

最新推荐文章于 2023-04-14 11:28:57 发布

chaser&upper

最新推荐文章于 2023-04-14 11:28:57 发布

阅读量580

点赞数 2

分类专栏： Web 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_46092061/article/details/122210895

版权

Web 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

JQuery 获取和设置元素内容/属性

获取和设置元素内容
- 1. html方法的使用
- 2. 小结
获取和设置元素属性

获取和设置元素内容

学习目标

能够知道获取和设置元素内容的操作

1. html方法的使用

jquery中的html方法可以获取和设置标签的html内容

示例代码:

<script>
     $(function(){
 
         var $div = $("#div1");
         //  获取标签的html内容
         var result = $div.html();
         alert(result);
         //  设置标签的html内容，之前的内容会清除
         $div.html("<span style='color:red'>你好</span>");
         //  追加html内容
         $div.append("<span style='color:red'>你好</span>");
 
     });
 </script>
 
 <div id="div1">
     <p>hello</p>
 </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //  获取标签
            var $div = $("div");
            //  jquery的方式获取标签内容
            alert($div.html());
            //  设置标签内容
            $div.html("<a href='https://www.baidu.com'>百度</a>");
            //  扩展: 追加内容
            $div.append("<a href='https://www.baidu.com'>谷歌</a>")

        });
    </script>
</head>
<body>
    <div>哈哈</div>
</body>
</html>

说明:

给指定标签追加html内容使用 append 方法

2. 小结

获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法

获取和设置元素属性

学习目标

能够知道获取和设置元素属性的操作

1. prop方法的使用

之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

示例代码:

<style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a = $("#link01");
        var $input = $('#input01')

        // 获取元素属性
        var sId = $a.prop("id");
        alert(sId);

        // 设置元素属性
        $a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});

        //  获取value属性
        // var sValue = $input.prop("value");
        // alert(sValue);

        // 获取value属性使用val()方法的简写方式
        var sValue = $input.val();
        alert(sValue);
        // 设置value值
        $input.val("222222");
    })
</script>

<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">

说明: 获取value属性和设置value属性还可以通过 val 方法来完成。

2. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //  获取标签
            var $p = $("p");
            var $text = $("#txt1");
            //  获取样式属性，比如:获取字体大小
            var $px = $p.css("font-size");
            alert($px);
            //  设置样式属性
            $p.css({"font-size":"30px", "background":"green"});
            //  除了样式属性的相关操作使用css方法，其它属性的操作都是prop方法

            //  获取属性
            var $name = $text.prop("name");
            alert($name);

            var $type = $text.prop("type");
            alert($type);

            //  设置属性
            $text.prop({"value":"张三", "class":"tname"});

            // 获取value属性可以使用val方法
            alert($text.prop("value"));
            //  使用val方法获取value属性
            alert($text.val())
            //  使用val方法设置value属性
            $text.val("王五");
        });
    </script>
</head>
<body>
    <p>哈哈，我是一个段落标签</p>
    <input type="text" name="username" id="txt1" value="李四">
</body>
</html>