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 相关文章推荐
js下写一个事件队列操作函数
Jul 19 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
php简单获取目录列表的方法
2015/03/24 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
原生js实现分页效果
2020/09/23 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python-while 计算100以内奇数和的方法
2019/06/11 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
专升本个人自我评价
2013/12/22 职场文书
商场周年庆活动方案
2014/08/19 职场文书
客房部经理岗位职责
2015/02/02 职场文书
通知书大全
2015/04/27 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
linux中nohup和后台运行进程查看及终止
2021/06/24 Python