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!

jquery的html、text、val的用法的更多相关文章

  1. jquery的html,text,val

    .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text() ...

  2. jquery中html(), text(),val()区别(zhuan)

    https://zhidao.baidu.com/question/307317838.html http://www.cnblogs.com/aqbyygyyga/archive/2011/11/0 ...

  3. (转)jquery的html,text,val

    .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text() ...

  4. js与jquery中html() text() val()中的区别

    首先html() text() val() 是jquery方法. 1.html()取得内容可以包含标签. 2.text()取得内容为元素文本内容. 3.val()只有value属性的元素才能使用该方法 ...

  5. jquery中html()/text()/val()区别

    html就是你可以添加<span></span><li></li>的标记text只能写文本如果写了上面的标记则会以文本形式输出,就是输出标签体的内容va ...

  6. jQuery中的text(),html(),val()用法

    jQuery中的text(),html(),val()用法 text():获取或者改变指定元素的文本 html():获取或改变指定元素的html元素以及文本 val():获取或者改变指定元素的valu ...

  7. jquery .html(),.text(),.val()用法

    .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text() ...

  8. jquery的.html(),.text()和.val()方法

    新人一段时间没写前端代码就有点忘记了,现在来复习一下..html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容,具体有3种用法: .html() 不传入值,就是 ...

  9. Jquery重新学习之一[加载与属性html(),text(),val()]

    一:Jquery加载方式: 1:首先页面加载时马上响应JS代码如下运行(不一定要等所有的JS和图片加载完毕,就可以执行方法): $(document).ready(function(){ }); 另一 ...

随机推荐

  1. 微软高性能缓存AppFabric (一) 安装

    博客原文链接:http://www.cnblogs.com/Qbit/p/6088703.html AppFabric 缓存功能的前身是VeloCity ,它是基于windows平台的一个高速内存缓存 ...

  2. hdu-2255 奔小康赚大钱---KM模板

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2255 题目大意: Problem Description 传说在遥远的地方有一个非常富裕的村落,有一 ...

  3. Spark的调度

    作业调度简介 设计者将资源进行不同粒度的抽象建模,然后将资源统一放入调度器,通过一定的算法进行调度,最终要达到高吞吐或者低访问延时的目的. Spark在各种运行模式中各个角色实现的功能基本一致,只不过 ...

  4. imfilter()用法

    功能:对图像进行滤波. 用法: g = imfilter(f, w, filtering_mode, boundary_options, size_options) 其中,f:输入图像,w:滤波掩模, ...

  5. Hadoop集群批量命令执行

    ./pdsh -R ssh -w node-10-0[0-5] hostname -R:指定传输方式,默认为rsh,本例为ssh,如果希望ssh传输需要另行安装pdsh-rcmd-ssh,如果希望ss ...

  6. JQuery的checkbox全选与全不选操作

    最主要是:子选择框要与总选择框的状态一致,即当选择总选择框时,向子选择框添加属性,使用jquery中的attr属性 例: html中的代码 <input type="checkbox& ...

  7. Angular 2 树节点的上下移动问题

    最近在做一个树节点的上下移动然后实现排序的问题.直接看图: 实现已选查询条件的上下移动.结合了primeng 的picklist 组件. 下面是html代码 <p-tabPanel header ...

  8. Java continue break 制作简单聊天室程序,屏蔽不文明语言,显示每句话聊天时间 for(;;) SimpleDateFormat("yyyy-MM-dd hh:mm:ss") equalsIgnoreCase

    package com.swift; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Scanne ...

  9. git与github账号建立SSH连接

    第1步:创建SSH Key.在用户主目录下,(就是在你的工作空间一层)看看有没有.ssh目录,如果有,再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件,如果已经有了,可直接跳到下一步 ...

  10. jpeg解码库使用实例

    jpeg库下载地址: http://www.ijg.org/ 交叉编译三部曲: A ./configure --host=arm-linux-gcc --prefix=/home/flying/jpe ...