jquery中html、val与text三者属性取值的联系与区别介绍


Posted in Javascript onDecember 29, 2013

首先,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

例子:

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(", "));

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

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

html页面代码:<input type="text"/>

jquery代码:$("input").val("hello world!");

结果:hello world!

-----------------------------------------------------------------

总结:

1.如果一个对下拉框的<select>标签中的option进行赋值,<option name="",value=""></option>虽然option有value属性,但是在页面上option的这个value属性并不是负责进行在页面上进行显示的,而真正能在页面上进行显示出来的是option标签之间的文本域。所以给option标签赋值要用html()的方法

2.如果对<input id="pro" name="province" value="安徽省">标签进行赋值,因为input标签中的value属性就是负责在页面上进行显示的,所以要是对Input标签的文本赋值并且在浏览器解析的时候将文本值在浏览器上显示出来,那么就要用val(),属性。

Javascript 相关文章推荐
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
vue时间格式化实例代码
Jun 13 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 #Javascript
jquery中的on方法使用介绍
Dec 29 #Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 #Javascript
js data日期初始化的5种方法
Dec 29 #Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 #Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 #Javascript
js动态调用css属性的小规律及实例说明
Dec 28 #Javascript
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
javascript中this关键字详解
2016/12/12 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python读写unicode文件的方法
2015/07/10 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
基于python实现学生管理系统
2018/10/17 Python
Python配置文件处理的方法教程
2019/08/29 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
使用Python发现隐藏的wifi
2020/03/04 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
租赁协议书范本
2014/04/22 职场文书
预备党员党支部意见
2015/06/02 职场文书
业务员管理制度范本
2015/08/06 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL