jquery设置text的值示例(设置文本框 DIV 表单值)


Posted in Javascript onJanuary 06, 2014

jquery设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容:

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML标记)
val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:

实例

$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html():

实例

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
Javascript 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jquery修改属性值实例代码(设置属性值)
Jan 06 #Javascript
js定时器的使用(实例讲解)
Jan 06 #Javascript
浅析js中的浮点型运算问题
Jan 06 #Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 #Javascript
Jquery操作radio的简单实例
Jan 06 #Javascript
jQuery选择器全面总结
Jan 06 #Javascript
JavaScript定义类的几种方式总结
Jan 06 #Javascript
You might like
编写自己的php扩展函数
2006/10/09 PHP
PHP 引用文件技巧
2010/03/02 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
党员个人自我剖析材料
2014/10/08 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
幼儿园辞职书
2015/02/26 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
会议主持人开场白台词
2015/05/28 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL