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. java Vamei快速教程03 构造器和方法重载

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在方法与数据成员中,我们提到,Java中的对象在创建的时候会初始化(initial ...

  2. js 对象字面量

    对象字面量的输出方式以及定义好处 1.对象字面量的输出方式有两种:传统的'.' 例如:box.name 以及数组方式,只不过用数组方式输出时,方括号里面要用引号括起来 例如:box['name'] v ...

  3. ehcache常用API整理

    鉴于csdn的blog的不稳定, 及混乱的编辑器, 和无上传功能, 遂决定彻底投诚javaeye的blog. 数月前整理的一个东西, 作为cache的扫盲文档.参考了它的官方文档. 对ehcache感 ...

  4. POI对EXCEL的操作【重点:如何设置CELL格式为文本格式】

    实际开发过程中通常用到的就是从数据库导出EXCEL表格了,JXL可以这样做,其实POI也可以(关于JXL与POI的异同可访问我之前总结的文章),之前写过POI对七种文档(当然也包括EXCEL)的内容读 ...

  5. PAT (Basic Level) Practise (中文)- 1004. 成绩排名 (20)

    http://www.patest.cn/contests/pat-b-practise/1004 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入 ...

  6. nodejs 爬虫

    参考了各位大大的,然后自己写了个爬虫 用到的modules:utils.js     ---    moment module_url.js var http = require("http ...

  7. vue2.0父子组件以及非父子组件通信

    官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...

  8. 7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页 并没有将列表页的数据json 与前端的页面展示结合起来 讲解如果将dr ...

  9. ls显示前几行或后几行数据

    显示前3行数据 ls -l|head -n 3 显示后3行数据 ls -l|tail -n 3

  10. 小程序wafer2操作数据库

    小程序操作数据库 //小程序控制台phpmyadmin里给数据库cAuth添加表 //controllers/hello.js const { mysql } = require('../qcloud ...