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 异常处理使用总结
Jun 21 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jsPDF导出pdf示例
May 02 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
react 父子组件之间通讯props
Sep 08 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传输数据的代码
2007/11/13 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Python中使用不同编码读写txt文件详解
2015/05/28 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
python中eval与int的区别浅析
2019/08/11 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
用Python制作音乐海报
2021/01/26 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
化妆品店促销方案
2014/02/24 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
精神病医院见习报告
2014/11/03 职场文书
艺术节开幕词
2015/01/28 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
Android 中的类文件和类加载器详情
2022/06/05 Java/Android