zoukankan      html  css  js  c++  java
  • jquery中html()、text()、val()的区别与使用

    1. .html()用为读取和修改元素的HTML标签
    2. .text()用来读取或修改元素的纯文本内容
    3. .val()用来读取或修改表单元素的value值。

    .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不 过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读 取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多 个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但 是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。

    .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。

    val()---一般 用在input上,而不用在其他元素,用来获取input或者是select的值
    html()和text()可用在多种元素上,但是html()相当于依据源代码返回,也就是在返回的内容中会包含各种tag,而text()则相当于是依据页面显示返回,返回的内容是出去各种tag之间的内容html属性中有两个方法,一个有参,一个无参。

    无参时是用来获取内容,举例如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
     5 </script>
     6 <script>
     7 $(document).ready(function(){
     8   $("#btn1").click(function(){
     9     alert("Text: " + $("#test").text());
    10   });
    11   $("#btn2").click(function(){
    12     alert("HTML: " + $("#test").html());
    13   });
    14 });
    15 </script>
    16 </head>
    17 
    18 <body>
    19 <p id="test">This is some <b>bold</b> text in a paragraph.</p>
    20 <button id="btn1">Show Text</button>
    21 <button id="btn2">Show HTML</button>
    22 </body>
    23 </html>    

    运行结果如下:

    1.点击showText

    2.点击showHtml

    有参时替换选中元素的内容:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
     5 </script>
     6 <script>
     7 $(document).ready(function(){
     8   $("#btn1").click(function(){
     9     $("#test1").text("Hello world!");
    10   });
    11   $("#btn2").click(function(){
    12     $("#test2").html("<b>Hello world!</b>");
    13   });
    14   $("#btn3").click(function(){
    15     $("#test3").val("Dolly Duck");
    16   });
    17 });
    18 </script>
    19 </head>
    20 
    21 <body>
    22 <p id="test1">This is a paragraph.</p>
    23 <p id="test2">This is another paragraph.</p>
    24 <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
    25 <button id="btn1">Set Text</button>
    26 <button id="btn2">Set HTML</button>
    27 <button id="btn3">Set Value</button>
    28 </body>
    29 </html>            

    点击前,如下:

    点击set Text:

    点击set value:

    点击set HTML:

  • 相关阅读:
    Java打jar包详解
    用户体验评价
    本周总结(13)
    本周总结(12)
    第一阶段意见评论
    本周总结(11)
    冲刺计划第十天
    冲刺计划第九天
    冲刺计划第八天
    冲刺计划第七天
  • 原文地址:https://www.cnblogs.com/cocos2014/p/4270799.html
Copyright © 2011-2022 走看看