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和DOM Interfaces来处理HTML
Oct 09 Javascript
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 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三元运算符的结合性介绍
2012/01/10 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jquery设置控件位置的方法
2013/08/21 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python中属性和描述符的正确使用
2016/08/23 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python中GIL的使用详解
2018/10/03 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python中对_init_的理解及实例解析
2019/10/11 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
体育教师自我鉴定
2014/02/12 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
公司开业庆典主持词
2014/03/21 职场文书
体育课课后反思
2014/04/24 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
海洋天堂观后感
2015/06/05 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
初三语文教学反思
2016/03/03 职场文书