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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
论建造顺序的重要性
2020/03/04 星际争霸
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP对象实例化单例方法
2017/01/19 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
nodejs读取memcache示例分享
2014/01/02 NodeJs
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
详解JavaScript函数
2015/12/01 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
js实现日历
2020/11/07 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
如何用python免费看美剧
2020/08/11 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
公司贷款承诺书
2014/05/30 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
护士医德医风心得体会
2016/01/25 职场文书