jquery 赋值html val text 区别

2021-10-17 05:34:37

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.0.0自测htmlvaltext区别</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        function btnClick(){
            console.log("1:" + $(‘#htmlId1‘).html())//成功取值
            console.log("2:" + $(‘#htmlId1‘).val())//无法取值
            console.log("3:" + $(‘#htmlId1‘).text())//成功取值
       /*     $(‘#htmlId2‘).html(‘htmlId2‘)//成功赋值
            $(‘#htmlId3‘).val(‘htmlId3‘)//无法赋值    ok
            $(‘#htmlId4‘).text(‘htmlId4‘)//成功赋值*/
            //div元素使用html或text取值赋值均可，使用val无法取值和赋值

            console.log("4:" + $(‘#input1‘).html())//无法取值
            console.log("5:" + $(‘#input1‘).val())//成功取值
            console.log("6:" + $(‘#input1‘).text())//无法取值
         /*   $(‘#input2‘).html(‘input2‘)//无法赋值
            $(‘#input3‘).val(‘input3‘)//成功赋值    ok
            $(‘#input4‘).text(‘input4‘)//无法赋值*/
            //input元素使用val取值赋值均可，无法使用html或text取值赋值

            console.log("7:" + $(‘p‘).html())//返回第一个p
            console.log("8:" + $(‘p‘).val())//返回空
            console.log("9:" + $(‘p‘).text())//返回如下：所有
            // $(‘p‘).html(‘p4‘)//三个p均赋值为p4
            // $(‘p‘).val(‘p4‘)//三个p均没有赋值为p4
            // $(‘p‘).text(‘p4‘)//三个p均赋值为p4
            // p元素，html和text均把所有的p赋值，val无法给p赋值
        }
        //p1
        //p2
        //p3
        //p元素，html返回第一个p的值，val返回空，text返回所有p元素的值

        // $(‘p‘).html(‘p4‘)//三个p均赋值为p4
        // $(‘p‘).val(‘p4‘)//三个p均没有赋值为p4
        // $(‘p‘).text(‘p4‘)//三个p均赋值为p4
        //p元素，html和text均把所有的p赋值，val无法给p赋值
    </script>
</head>
<body>
<div>
    <div id="htmlId1">htmlId1</div>
    <div id="htmlId2"></div>
    <div id="htmlId3"></div>
    <div id="htmlId4"></div>

    <input id="input1" value="input1"/>
    <input id="input2"/>
    <input id="input3"/>
    <input id="input4"/>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <button onclick="btnClick()"></button>
</div>
</body>
</html>

关于三者的区别

1. .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

码农公寓

相关文章