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 相关文章推荐
js的event详解。
Sep 06 Javascript
你的编程语言可以这样做吗?
Sep 07 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
ReactRouter的实现方法
Jan 25 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图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php显示页码分页类的封装
2017/06/08 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
基于python 字符编码的理解
2017/09/02 Python
使用requests库制作Python爬虫
2018/03/25 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
实习推荐信格式模板
2015/03/27 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript