jQuery学习笔记08-文本值相关操作

﹏ヽ暗。殇╰゛Y 2024-04-17 16:46 84阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery操作文本值</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                border: 1px solid #000;
            }
        </style>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*
                * html()：用于设置或获取html
                *text()：用于设置或获取text
                *val()：用于设置或获取输入框的值
                *
                * */
                var btns = document.getElementsByTagName("button");
                btns[0].onclick = function (ev) {
                    $("div").html("<p>我是段落</p>");
                };
                btns[1].onclick = function (ev) {
                    console.log($("div").html())
                };
                btns[2].onclick = function (ev) {
                    $("div").text("<p>我是段落</p>");
                };
                btns[3].onclick = function (ev) {
                    console.log($("div").text())
                };
                btns[4].onclick = function (ev) {
                    $("input").val("请输入账号");
                };
                btns[5].onclick = function (ev) {
                    console.log($("input").val())
                };
    
            })
        </script>
    </head>
    <body>
    <button>设置html</button>
    <button>获取HTML</button>
    <button>设置文本</button>
    <button>获取文本</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text">
    </body>
    </html>