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 for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
javascript连续赋值问题
Jul 08 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
利用node.js开发cli的完整步骤
Dec 29 Javascript
js实现简单的倒计时
Jan 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
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
详解Django中的权限和组以及消息
2015/07/23 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
跑出一片天观后感
2015/06/08 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python