【JS与JQ】对文本/值操作方法 html() || text() || val()

最新推荐文章于 2022-05-29 21:35:04 发布

@Umbrella

最新推荐文章于 2022-05-29 21:35:04 发布

阅读量420

点赞数

分类专栏：【JavaScript/jQuery】文章标签： html() val() text() 文本或值操作

本文链接：https://blog.csdn.net/Umbrella_Um/article/details/92801892

版权

【JavaScript/jQuery】专栏收录该内容

70 篇文章 2 订阅

订阅专栏

JS与JQ — 对文本/值操作方法

总结：

原生JS中设置 || 获取html >>> innerHTML
原生JS中设置 || 获取text >>> innerText
原生JS中设置 || 获取value >>> value
JQuery中设置 || 获取html >>> html( [ val | fn ] )
JQuery中设置 || 获取text>>> text( [ val | fn ] )
JQuery中设置 || 获取val>>> val( [ val | fn | arr ] )

小练习：

val() 可以获取li标签的值吗？
怎么获取li便签中属性value的值？

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script>
        $(function(){
            var $div = document.getElementsByTagName("div")[0];
            // 1.html([val|fn])
            /* 原生JS -- innerHTML */
            var btn = document.getElementsByTagName("button")[0];
            var btn1 = document.getElementsByTagName("button")[1];
            btn.onclick = function(){
                $div.innerHTML = "<h2> JS--我是innerHTML </h2>";
            }
            btn1.onclick = function(){
                console.log($div.innerHTML);
            }
            /* JQuery -- html() */
            $('button').eq(0).click(function(){
                $('div').eq(0).html("<h2> JQ--我是html() </h2>")
            })
            $('button').eq(1).click(function(){
                console.log($("div").eq(0).html());
            })
            // 2.text([val|fn])
            /* 原生JS -- innerText */
            var btn2 = document.getElementsByTagName("button")[2];
            var btn3 = document.getElementsByTagName("button")[3];
            btn2.onclick = function(){
                $div.innerText = "<h3> JS--我是innerText </h3>"
            }
            btn3.onclick = function(){
                console.log($div.innerText);
            }
            /* JQuery -- text() */
            $("button").eq(2).click(function(){
                $("div").text("<h3> JQ--我是text() </h3>");
            })
            $("button").eq(3).click(function(){
                console.log($("div").text());
            })
            // 3.val([val|fn|arr])
            /* 原生JS -- value */
            var $input = document.getElementsByTagName("input")[0];
            var btn4 = document.getElementsByTagName("button")[4];
            var btn5 = document.getElementsByTagName("button")[5];
            btn4.onclick = function(){
                $input.value = "JS--请输入文案...";
            }
            btn5.onclick = function(){
                console.log($input.value);
            }
            /* JQuery -- val() */
            $("button").eq(4).click(function(){
                $("input").eq(0).val("JQ--请输入文案...");
            })
            $("button").eq(5).click(function(){
                console.log($("input").eq(0).val());
            })

            /* 小练习 -- 巩固 */
            // 注意:原生JS中的value || JQ中的val() 都是无法获取li中的值的，此时的val拿的是便签上的属性值value;
            $('.list').find("li").click(function(){
                console.log($(this).html());  // 获取html
                console.log($(this).text()); // 获取text
                console.log($(this).val()); // 0  number类型 >>> 当没有value值 || value值不是数字类型都为0
                console.log($(this).val()); // 101  number类型 >>> javascript将0开头的常量当成八进制处理

                // 那么我如何得到value的实际值呢?  
                console.log($(this).attr('value'));  // undefined >>> 当没有该属性值是为undefined
                console.log($(this).attr('value'));  // 0101 string类型 >>> attr的获取方式则是按照dom来处理,所以获取的相当于是一个对象,不是当作Number型来处理

            })
        })
    </script>
    <body>
        <button>设置html</button>
        <button>获取html</button>
        <button>设置text</button>
        <button>获取text</button>
        <button>设置val</button>
        <button>获取val</button>
        <div></div>
        <input type="text">
        <ul class="list">
            <li>获取html</li>
            <li>获取val</li>
            <li value="0101">获取val1</li>
        </ul>
    </body>

@Umbrella

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JS与JQ】对文本/值操作方法 html() || text() || val()

JQuery–对文本/值操作方法总结：原生JS中设置 || 获取html >>> innerHTML原生JS中设置 || 获取text >>> innerText原生JS中设置 || 获取value >>> valueJQuery中设置 || 获取html >>> html( [ val | fn ] )J...
复制链接

扫一扫