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 中文字符串处理额外注意事项
Nov 15 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
js创建对象的方式总结
Jan 10 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php生成静态页面的简单示例
2014/04/17 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
区级文明单位申报材料
2014/05/15 职场文书
汽车广告策划方案
2014/05/31 职场文书
停电放假通知
2015/04/14 职场文书
公司欠款证明
2015/06/24 职场文书