• 技术文章 >web前端 >js教程

    jquery中html()方法怎么用

    醉折花枝作酒筹醉折花枝作酒筹2021-06-08 14:33:28原创91

    在javascript中,“html()”方法的用法是“元素.html(被选元素的新内容)”。html方法设置或返回被选元素的内容,当该方法用于返回内容时,则返回第一个匹配元素的内容;当该方法用于设置内容时,则重写所有匹配元素的内容。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染。

    文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染。
    语法结构一:

    $(selector).html()

    此时方法不带参数时候是取得第一个匹配元素的html内容。

    此方法与text()方法没有参数用法类似,但是还是有很大区别:

    一.html()方法取得第一个匹配元素的内容,而text()方法是取得所有匹配元素包含的内容。
    二.html()方法取得内容html内容,而text()方法取得是文本内容。

    实例代码:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset=" utf-8" />
        <meta name="author" content="https://www.jb51.net/" />
        <title></title>
        <style type="text/css">
          div{
            height:150px;
            width:150px;
            background-color:green;
            margin-top:10px;
          }
        </style>
        <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
          $(document).ready(function () {
            $("button").click(function () {
              alert($("div").html());
            });
          });
        </script>
      </head>
    
      <body>
        <div>
          <ul>   
            <li>
              <span>欢迎您</span>
            </li>         
          </ul>
        </div>
        <button>点击查看效果</button>
      </body>
    </html>

    以上代码将返回div元素中的内容。

    语法结构二:

    $(selector).html(content)

    带有参数的时候是设置所有匹配元素而的html内容。
    此方法与text()方法带有参数的用法类似,但是还是有很大的区别:
    html()方法设置的是html内容,而text()方法设置的是文本内容。

    实例代码:

    以下代码将div中的html内容设置为"<b>我是重新设置后的内容</b>"。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset=" utf-8" />
        <meta name="author" content="https://www.jb51.net/" />
        <title>脚本之家</title>
        <style type="text/css">
          div
          {
            height:150px;
            width:150px;
            background-color:green;
            margin-top:10px;
          }
        </style>
        <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
          $(document).ready(function () {
            $("button").click(function () {
              $("div").html("<b>我是重新设置后的内容</b>");
            });
          });
        </script>
      </head>
      
      <body>
        <div>原来内容</div>
        <button>点击查看效果</button>
      </body>
    </html>

    【推荐学习:javascript高级教程

    以上就是jquery中html()方法怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:jQuery html()
    上一篇:javascript怎么控制页面跳转 下一篇:js如何添加css样式
    第16期线上培训班

    相关文章推荐

    • Nodejs可以应用于那些场景?• jsp如何引入css• 手把手教你理解JS中的执行上下文• 浅谈Nodejs如何进行多线程处理• 深入浅析Node.js中的异步

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网