20-jQuery文本值的相关方法-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn9228/article/details/84718346

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-jQuery文本值的相关方法</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      div{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
      }
    </style>
    <script type="text/javascript" src ="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.html([val|fn])
            2.text([val|fn])
            3.val([val|fn|arr])
             */
            var btn = $("button");
            btn[0].onclick = function () {
              //和原生JS中的innerHTML一样
              $("div").html("<p>这是一个段落 <span>这是一个span</span></p><br>");
            }
            btn[1].onclick = function () {
              console.log($("div").html());
            }
          //和原生JS中的innerText一样
            btn[2].onclick = function () {
              $("div").text("这是一段文本");
            }
            btn[3].onclick = function () {
              console.log($("div").text());
            }
            //设置value属性
            btn[4].onclick = function () {
              $("input").val("请输入内容");
            }
            btn[5].onclick = function () {
              console.log($("input").val());
            }
          });
    </script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>