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 相关文章推荐
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
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动态生成版权所有信息的方法
2015/03/24 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Python hashlib模块用法实例分析
2018/06/12 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python线程threading模块用法详解
2020/02/26 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
工厂搬迁方案
2014/05/11 职场文书
婚宴新娘致辞
2015/07/28 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis