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:

  • 相关阅读:
    Response.Redirect引起的性能问题分析
    Html5中 视频 音频标签 进度条问题
    GIS 地理坐标分类
    函数指针理解最透彻的文章
    python安装第三方包之后无法导入相应模块(一个容易忽略的bug)
    git使用入门
    OpenSSL中HMAC,MD5以及对称加密算法的应用
    OpenSSL库中加密组件使用的相关链接
    Ubuntu 12.04LTS下配置OpenSSL和gmp环境
    编程写作注意事项!
  • 原文地址:https://www.cnblogs.com/cocos2014/p/4270799.html
Copyright © 2011-2022 走看看