jQuery中的text()、html()、val()的用法和区别

我不是女神ヾ 2023-10-07 13:49 37阅读 0赞

#### 1、text() ####

作用：

（1）无参数时返回被选元素的文本内容，文本内容不包括html标签。

（2）有参数时设置被选元素的文本内容，文本内容不包括html标签。

注：text()针对input、button标签无效

测试代码：

<body>
        <div id="div1">div有文本内容</div>
        <div id="div2">
            div2内的文本
            <span>span内有文本内容</span>
        </div>
        <input type="text" id="input1" value="这是一个input标签">
        <input type="text" name="" id="input2" placeholder="能成功获取">
        <button id="button1" value="这是一个button标签"></button>
        <script>
            console.log($("#div1").text());
            console.log($("#div2").text());
            console.log($("#div2 span").text()) ;
            console.log($("#input1").text());
            console.log($("#input2").text());
            console.log($("#button1").text());
        </script>
    </body>

控制台输出：

line1: div有文本内容
    line2: div2内的文本
           span内有文本内容
    line3: span内有文本内容
    line4: 
    line5: 
    line6:

#### 2、html() ####

作用：

（1）无参数时返回被选元素的内容包括html标签。

（2）有参数时设置被选元素的内容，内容包括html标签。

注：html()针对input、button标签无效

测试代码：

<body>
        <div id="div1">div有文本内容</div>
        <div id="div2">
            div2内的文本
            <span>span内有文本内容</span>
        </div>
        <input type="text" id="input1" value="这是一个input标签">
        <input type="text" name="" id="input2" placeholder="能成功获取">
        <button id="button1" value="这是一个button标签"></button>
        <script>
            console.log($("#div1").html());
            console.log($("#div2").html());
            console.log($("#div2 span").html()) ;
            console.log($("#input1").html());
            console.log($("#input2").html());
            console.log($("#button1").html());
        </script>
    </body>

控制台输出：

line1: div有文本内容
    line2: div2内的文本
           <span>span内有文本内容</span>
    line3: span内有文本内容
    line4: 
    line5: 
    line6:

#### 3、val() ####

作用：

（1）无参数时返回被选元素的值。

（2）有参数时设置被选元素的值。

注：val()只对于有value属性的标签有用，可用于input、button标签。

测试代码：

<body>
        <div id="div1">div有文本内容</div>
        <div id="div2">
            div2内的文本
            <span>span内有文本内容</span>
        </div>
        <input type="text" id="input1" value="这是一个input标签">
        <input type="text" name="" id="input2" placeholder="能成功获取">
        <button id="button1" value="这是一个button标签"></button>
        <script>
            console.log($("#div1").val());
            console.log($("#div2").val());
            console.log($("#div2 span").val()) ;
            console.log($("#input1").val());
            console.log($("#input2").val());
            console.log($("#button1").val());
        </script>
    </body>

控制台输出：

line1: 
    line2: 
    line3: 
    line4: 这是一个input标签1
    line5: 这是一个input标签2
    line6: 这是一个button标签