专栏首页marsggbojquery的html,text,val

jquery的html,text,val

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

这三个方法功能上的对比

  1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
  2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。
  3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

例子:

<div id="div">
    <p>here is a paragram</p>
    <div>here is a big DIV</div>
</div>

function showVal()
{
   var div = $("#div");
    alert("showVal():  "+div.val());
显示为空
}
function showHtml()
{
   var div = $("#div");
   alert("showHtml():  "+div.html());
显示为:
<p>here is a paragram</p>
 <div>here is a big DIV</div>
}
function showText()
{var div = $("#div");
    alert("showText():  "+div.text());
显示为:
here is a paragram
here is a big DIV
    }

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

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

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

例子:          html页面代码:<div><p>Hello</p></div>           jquery代码:$("div").html();          结果:Hello

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

html页面代码:<div></div>        jquery代码:$("div").html("<p>Nice to meet you</p>");        结果:[ <div><p> Nice to meet you</p></div> ]

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

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

例子:            html页面代码:<p><b>Hello</b> fine</p>                                  <p>Thank you!</p>           jquery代码:$("p").text();          结果:HellofineThankyou!

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

html页面代码:<p>Test Paragraph.</p>         jquery代码:$("p").text("<b>Some</b> new text.");          结果:[ <p><b>Some</b> new text.</p> ]

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

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

     返回的是一个String、 array

       结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

例子: //多选下拉框,$('#multiple').val()返回数组 //$("#multiple").val().join(", "))以,连接数组中每个值 html页面代码 :<p></p><br/><select id="single">  <option>Single</option>  <option>Single2</option></select><select id="multiple" multiple="multiple">  <option selected="selected">Multiple</option>  <option>Multiple2</option>  <option selected="selected">Multiple3</option></select>          jquery代码:("p").append( "<b>Single:</b> "   + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));

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

html页面代码:         <input type="text"/>         jquery代码:$("input").val("hello world!");          结果:hello world!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 转帖-《你写软件我推广 — 微软 & WPMind 社区合作计划》

        本文的内容转自张欣的BLog:http://www.cnblogs.com/twodays/archive/2010/05/31/1747809.htm...

    ShiJiong
  • 说说html 的<!DOCTYPE>声明&标准模式与兼容模式

    我们都知道<!DOCTYPE>声明位于文档的最前面,处于<html>标签之前。 <!DOCTYPE>声明不是html标签,它的作用:告知web浏览界面应该使用哪...

    用户1149564
  • ASP.NET MVC 5 - 视图

    在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML。 您将创建一个视图模板文件...

    葡萄城控件
  • 谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

    说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素。 常见的有:<br>...

    用户1149564
  • 从 art-template 模版维护到动态加载的思考

      自己用 art-template 有些年头了,最近在培养团队学习 art-template 使用,发现有一个痛点比较难解决。   比如有一个模版,我们可以直...

    胡尐睿丶
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • JavaScript 事件对象

    一.事件对象 事件处理三部分组成:对象.事件处理函数=函数。例如:单击文档任意处。 document.onclick = function () { alert...

    汤高
  • JavaScript 事件基础补充

    JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。 一.事件介绍 JavaScri...

    汤高
  • 朋友开网店 做个抓取数据的小程序

    朋友开网店需要填充初期的数据.  专门做了一个抓取数据的小程序.分享一下. private void button1_Click(object sender,...

    汤高
  • 初识HtmlParser

    1、概念 网页解析,即程序自动分析网页内容、获取信息,从而进一步处理信息。 htmlparser包提供方便、简洁的处理html文件的方法,它将html页面中...

    汤高

扫码关注云+社区

领取腾讯云代金券