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_10_对象模型
Oct 16 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jQuery.each使用详解
Jul 07 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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伪静态页面函数附使用方法
2008/06/20 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP制作万年历
2015/01/07 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
sina的lightbox效果。
2007/01/09 Javascript
非常漂亮的JS代码经典广告
2007/10/21 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python如何根据时间序列数据作图
2020/05/12 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
奥巴马英文演讲稿
2014/05/15 职场文书
药店促销活动策划方案
2014/08/24 职场文书
安全生产年活动总结
2014/08/29 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang