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实现预览待上传的本地图片
Mar 15 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
table行随鼠标移动变色示例
May 07 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
node.js制作一个简单的登录拦截器
Feb 10 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 程序员应该使用的10个组件
2009/10/31 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python网络编程详解
2017/10/31 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Numpy掩码式数组详解
2018/04/17 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python单例模式的多种实现方法
2019/07/26 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
业务主管岗位职责范本
2013/12/25 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
写给老师的表扬信
2014/01/21 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL