zoukankan      html  css  js  c++  java
  • 关于jquery中html()、text()、val()的区别

    .html()用为读取和修改元素的HTML标签    对应js中的innerHTML

     .html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素

    .text()用来读取或修改元素的纯文本内容  对应js中的innerText

      text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上

    .val()用来读取或修改表单元素的value值

        .val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上

    关于三者的区别

       1. .val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。

       2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

    1.HTML

    html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

    html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

    2.TEXT

    text():取得所有匹配元素的内容。

    结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

    text(val):设置所有匹配元素的文本内容

    与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).

    3.VAL

    val():获得第一个匹配元素的当前值。

    val(val):设置每一个匹配元素的值。

    上面的内容是在jQuery的帮助文档里拷贝的,也都不废话多说了。下面是自己做的一些练习,代码如下:

    在做练习的时候我发现了html和text的另一个不同的地方

    html()去元素的内容的时候,能将所选定的元素下面的格式也取到了。

    如:<div id="divShow"><b><i>Write Less Do More</i></b></div>

    如果我们用var strHTML = $("#divShow").html();取的话,

    结果是:<b><i>Write Less Do More</i></b>

    如果我们用var strHTML2 = $("#divShow b i").html();取的话

    结果是Write Less Do More

    而text没有第一种情况,

    如果我们var strText = $("#divShow").text();取的话

    结果是Write Less Do More

     

    <%@ page language="Java" import="java.util.*" pageEncoding="utf-8"%>
    <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        <script src="js/jquery.js" type="text/JavaScript"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <title> 获取或设置元素的内容</title>
        <style type="text/css">
           body{font-size:15px;text-align:center}
           div{border:solid 0px #666;padding:5px;220px;margin:5px}
        </style>
        <script type="text/javascript">
           $(function() {
    
               var strHTML = $("#divShow").html();// 获取HTML 内容(包含div下面的两个格式)
               var strHTML2 = $("#divShow b i").html(); //获取HTML内容
               var strHTML3 = $("div").html();
               var strText = $("#divShow").text();// 获取文本内容
               var strText2 = $("div").text();        
    
               $("#divHTML").html(strHTML);// 设置HTML 内容
               $("#divHTML2").html(strHTML2); //设置HTML内容
               $("#divHTML3").html(strHTML3); //设置HTML内容
               $("p").html(strHTML);          
    
               $("#divText").text(strText);// 设置文本内容
               $("#divText2").text(strText2);// 设置文本内容
               $("a").text(strText);          
    
               $("select").change(function() { // 设置列表框change 事件
                  // 获取列表框所选中的全部选项的值
                  alert($("select").val());
                  var strSel = $("select").val().join(",");
                  $("input").val(strSel); // 显示列表框所选中的全部选项的值
               })
           })
        </script>
      </head>
      <body>
        <table border="1" bordercolor="#A9A9A9" cellspacing="0">
        <tr><td>******************************</td><td>*******************************************</td></tr>
        <tr>
        <td><div id="divShow"><b><i>Write Less Do More</i></b></div></td>
           <td>这是原内容</td>
        </tr>
        <tr>
        <td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td>
           <td>这是原内容</td>
        </tr>
       <tr><td>******************************</td><td>*******************************************</td></tr>
        <tr>
           <td><div id="divHTML">1</div></td>
           <td>获取原内容(连带内容的格式)后以html方式输出</td>
        </tr>
        <tr>
            <td><div id="divHTML2">2</div></td>
            <td>获取原内容(不带内容的格式)后以html方式输出</td>
        </tr>
        <tr>
            <td><div id="divHTML3">3</div></td>
            <td>获取原内容(获取第一个匹配元素的内容)后以html方式输出</td>
        </tr>
        <tr>
            <td><p></p></td>
            <td>HTML方式设置段落的文本</td>
        </tr>
        <tr>
            <td><p></p></td>
            <td>如果这个也有内容了,就是设置每个匹配元素的内容</td>
        </tr>
    <tr><td>******************************</td><td>*******************************************</td></tr>
        <tr>
        <td><div id="divText">4</div></td>
        <td>获取原内容后以text方式输出</td>
        </tr>
        <tr>
        <td><div id="divText2"></div></td>
        <td>获取原内容(获取所有匹配元素的内容)后以text方式输出</td>
        </tr>
        <tr>
            <td><a></a></td>
            <td>TEXT方式设置段落的文本</td>
        </tr>
        <tr>
            <td><a></a></td>
            <td>如果这个也有内容了,就是设置每个匹配元素的内容</td>
        </tr>
        <tr><td>******************************</td><td>*******************************************</td></tr>
        <tr>
        <td>
        <select multiple="multiple"style="height:96px;85px">
               <option value="1">Item 1</option>
               <option value="2">Item 2</option>
               <option value="3">Item 3</option>
               <option value="4">Item 4</option>
               <option value="5">Item 5</option>
               <option value="6">Item 6</option>
           </select>
           <select>
               <option value="7">Item 7</option>
               <option value="8">Item 8</option>
               <option value="9" selected>Item 9</option>
           </select>
        </td>
        <td>
        </td>
        </tr>
        <tr>
        <td><input ></input></td>
        <td><input ></input></td>
        </tr>
        </table>
      </body>
    </html>
    

      

     

  • 相关阅读:
    Android 主题theme说明 摘记
    Android开发 去掉标题栏方法 摘记
    安卓项目五子棋代码详解(二)
    关于 ake sure class name exists, is public, and has an empty constructor that is public
    百度地图3.0实现图文并茂的覆盖物
    android onSaveInstanceState()及其配对方法。
    关于集成科大讯飞语音识别的 一个问题总结
    android 关于 webview 控制其它view的显示 以及更改view数据失败的问题总结
    C# 解析 json Newtonsoft果然强大,代码写的真好
    c#数据类型 与sql的对应关系 以及 取值范围
  • 原文地址:https://www.cnblogs.com/pureEve/p/6560027.html
Copyright © 2011-2022 走看看