zoukankan      html  css  js  c++  java
  • jquery的html(),text(),val()比较

    1.html()用为读取和修改元素的HTML标签和内容,html()方法使用在多个元素上时,只读取第一个元素。
    2.text()用来读取或修改元素的纯文本内容,text()方法不能使用在表单元素上,text()应用在多个元素上时,将会读取所有选中元素的文本内容。
    3.val()用来读取或修改表单元素的value值,val()只能使用在表单元素上,val()方法使用在多个元素上时,只读取第一个元素。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="test2.WebForm6" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>jquery的html(),text(),val()</title>
        <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
                function showVal() {
                    var div = $("#mydiv").val();
                    alert("showVal():  " + div);
                    //显示为空
                }
                function showHtml() {
                    var div = $("#mydiv").html();
                    alert("showHtml():  " + div);
                    //显示为:
                    //<p>here is a paragram</p>
                    //<div>here is a big DIV</div>
                }
                function showText() {
                    var div = $("#mydiv").text();
                    alert("showText():  " + div);
                    //显示为:
                    //here is a paragram
                    //here is a big DIV
                }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="mydiv">
            <p>
                here is a paragram</p>
            <div>
                here is a big DIV</div>
        </div>
        <input type="button" value="sumbit" onclick="showText()" />
        </form>
    </body>
    </html>

    html属性中有两个方法,一个有参,一个无参 

    1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String

    2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象

                function htmlAdd() {
                    var div = $("#mydiv").html("<p>OKOKOKOK<P>");
                }

    其次,text属性中有两个方法,一个有参,一个无参

    1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String

    2.有参text(val):设置所有匹配元素的文本内容,与 html()  类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象

                function testAdd() {
                    var div = $("#mydiv").html("<p>OKOKOKOK<P>");
                }

    最后,val()属性中也有两个方法,一个有参,一个无参。

    1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2  中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。

                function showVal() {
                    var div = $("#input1").val();
                    alert("showVal():  " + div);
                    //sumbit
                }

    2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2,  这也可以为check,select,radio元件赋值,返回一个jquery对象  

                function showVal() {
                    var div = $("#input1").val("hahaha");
                }
  • 相关阅读:
    记录JavaScript的util.js类库
    Shiro登录中遇到了问题
    【转载】JavaScript导出Excel
    react-router
    react 表单
    html5定位getLocation()
    html5存储方式localstorage和sessionStorage
    position导致Safari工具栏不自动隐藏
    input type="datetime-local" 时placeholder不显示
    vuex(1.0版本写法)
  • 原文地址:https://www.cnblogs.com/lgxlsm/p/2831420.html
Copyright © 2011-2022 走看看