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

最新推荐文章于 2024-05-27 16:14:30 发布

weeds606

最新推荐文章于 2024-05-27 16:14:30 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/100126256

版权

前端相关专栏收录该内容

42 篇文章 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>