其他分享
首页 > 其他分享> > jQuery设置获取文本内容text()

jQuery设置获取文本内容text()

作者:互联网

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/07/31/ 23:44-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置获取文本内容text()</title>
</head>
<body>
    <input type="button" value="获取" id="getBtn"/>
    <input type="button" value="设置" id="setBtn"/>
    <div id="div1">我是一个div1标签
        <p>我是一个p1标签</p>
        <span>span1</span>
    </div>
    <div>我是一个div2标签
        <p>我是一个p2标签</p>
        <span>span2</span>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        // 入口函数
        $(function () {
            // text(): 获取和设置文本
            // 1.获取文本: text()方法不给参数
            $('#getBtn').click(function () {
                // 1.1. 获取 id为 div1这个标签的文本
                // 会获取到 这个标签中 所有的文本, 包括 后代元素的文本
                console.log($('#div1').text());

                // 1.2. 获取标签为 div的 元素的文本
                // 包含了 多个 dom元素的 jQuery对象, 通过 text()方法获取 文本, 会把所有 dom元素的 文本获取到
                console.log($('div').text());
            });

            // 2. 设置文本
            $('#setBtn').click(function () {
                // // 给id 为 div1的这个标签 设置文本
                // $('#div1').text('我是新设置的文本');
                // // 标签 不会解析出来, 会当做 文本显示
                // $('#div1').text('我是新设置的文本<a>我是链接</a>');

                // 2.2. 给标签为 div的元素 设置文本
                // 包含了 多个 dom元素 的 jQuery对象, 通过 text()方法 设置文本, 会把 所有的 dom元素 都设置上
                // 隐式遍历/隐式迭代; 遍历出 每个dom对象, 设置上 文本.
                $('div').text('设置的文本');

            });

        });
    </script>
</body>
</html>

标签:jQuery,text,获取,设置,标签,文本,div1
来源: https://www.cnblogs.com/beyondx/p/16538717.html