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

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不 过.html()是用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读 取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多 个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但 是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

val()---一般 用在input上，而不用在其他元素，用来获取input或者是select的值

html()和text()可用在多种元素上，但是html()相当于依据源代码返回，也就是在返回的内容中会包含各种tag，而text()则相当于是依据页面显示返回，返回的内容是出去各种tag之间的内容html属性中有两个方法，一个有参，一个无参。

无参时是用来获取内容，举例如下：

 <!DOCTYPE html>

 <html>

 <head>

 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

 </script>

 <script>

 $(document).ready(function(){

   $("#btn1").click(function(){

     alert("Text: " + $("#test").text());

   });

   $("#btn2").click(function(){

     alert("HTML: " + $("#test").html());

   });

 });

 </script>

 </head>

 <body>

 <p id="test">This is some <b>bold</b> text in a paragraph.</p>

 <button id="btn1">Show Text</button>

 <button id="btn2">Show HTML</button>

 </body>

 </html>

运行结果如下：

1.点击showText

2.点击showHtml

有参时替换选中元素的内容：

 <!DOCTYPE html>

 <html>

 <head>

 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

 </script>

 <script>

 $(document).ready(function(){

   $("#btn1").click(function(){

     $("#test1").text("Hello world!");

   });

   $("#btn2").click(function(){

     $("#test2").html("<b>Hello world!</b>");

   });

   $("#btn3").click(function(){

     $("#test3").val("Dolly Duck");

   });

 });

 </script>

 </head>

 <body>

 <p id="test1">This is a paragraph.</p>

 <p id="test2">This is another paragraph.</p>

 <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

 <button id="btn1">Set Text</button>

 <button id="btn2">Set HTML</button>

 <button id="btn3">Set Value</button>

 </body>

 </html>

点击前，如下：

点击set Text：

点击set value：

点击set HTML：

jquery中html()、text()、val()的区别与使用的更多相关文章

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

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

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

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

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

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

  4. [转]jQuery中attr() 和 val() 的区别

    [转](http://www.codeproject.com/Tips/780652/Difference-between-attr-and-val-in-jQuery)

  5. JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val()

    一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...

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

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

  7. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  8. jquery中this与$this的区别

    来源:http://www.jb51.net/article/19738.htm jQuery中this与$(this)的区别 $("#textbox").hover( funct ...

  9. Jquery中.attr()和.data()的区别

    $.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别. 一个简单的例子 <!DOCTYPE html> <html> <head> & ...

  10. jQuery中first-child与first选择器区别

    1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. C#微信公众号开发-MVC模式公共类封装

    第一部分:基础配置 第一步:注册微信公众账号 如果开发测试阶段可以打开测试链接地址,注册测试公众号.测试账号除了不能与正式账号通信外其他什么高级接口的都可以实现. 测试号管理地址:http://mp. ...

  2. 【MySQL】结构行长度的一些限制

    今天被开发提交的DDL变更再次困惑,表中字段较多,希望将已有的两个varchar(4000)字段改为varchar(20000),我想innodb对varchar的存储不就是取前768字节记录当前行空 ...

  3. 千里积于跬步——流，向量场，和微分方程[转载]

    在很多不同的科学领域里面,对于运动或者变化的描述和建模,都具有非常根本性的地位--我个人认为,在计算机视觉里面,这也是非常重要的. 什么是"流"? 在我接触过的各种数学体系中,对于 ...

  4. view--4种Android获取View宽高的方式

    有时我们会有基于这样的需求,当Activity创建时,需要获取某个View的宽高,然后进行相应的操作,但是我们在onCreate,onStart中获取View的大小,获取到的值都是0,只是由于View ...

  5. MySQL中四舍五入的实现

    MySQL四舍五入的实现   文章主要描述的是MySQL四舍五入的实际应用, 以及在其实际操作中的值得我们大家注意的事项与其实际应用代码的描述,以下就是文章的主要内容的详细描述,望大家在浏览之后会对其 ...

  6. [ActionScript 3.0] AS3.0 让一个视频无缝循环播放的一个偏方

    一个视频要循环播放,通常的办法都是播放完后再重新播放,但是不可避免的播放结束和重新开始播放这个时间点上会有停顿,如何解决这个问题,说个偏方吧! package com.views { import f ...

  7. 剑指Offer:面试题28——字符串的排列(java实现)（待序）

    问题描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 结果请按字母 ...

  8. linux服务器下添加字体

    版权声明:本文为楼主原创文章,未经楼主允许不得转载,如要转载请注明来源. 引言:这两天在开发一个动态生成海报的东西(图片拼接,图片水印),开发在windows下没有问题,图片和文字都能正常的生成出来. ...

  9. windows下PHP5.5.6+Apache2.4.7配置

    本文主要阐述在windows8及win8.1 环境下搭建PHP5.5.6+Apache2.4.7. 1.软件准备 apache 2.4.7:http://pan.baidu.com/s/1iUPif ...

  10. Centos 6 之samba 搭建

    学习linux从实践做起. 实验环境:vmware,cenots 6,xshell 注意:使用vmware 时,网络连接设置成桥接,和宿主机位于同一个网段. 实验需求:模拟实际公司文件服务器. 新建S ...