jQuery val()、text()、html()使用与区别

123 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(document).ready(function () {
      // val(); 获取标签中value属性的值,带有参数则是赋值。(类似js中的value)
      console.log($('input').val());
      $('input').val('新的赋值');

      // text(); 获取双闭合标签中的文本值,不识别标签。(类似innerText)
      console.log($('div').text());
      $('div').text('<li>text赋值新标签</li>');
      
      // html(); 获取双闭合标签中的文本值,识别标签。(类似innerHTML)
      console.log($('div').html());
      $('div').html('<li>html赋值新标签</li>');
    })
  </script>
</head>
<body>
  <input type="text" value="我是input">
  <div>
    <li>dzm</li>
  </div>
</body>
</html>
  • demo 效果: