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 相关文章推荐
基于jquery的滑动样例代码
Nov 20 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
详解原生JS回到顶部
Mar 25 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 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获取textarea的值并处理回车换行的方法
2014/10/20 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
Python实现二叉搜索树
2016/02/03 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
wxPython色环电阻计算器
2019/11/18 Python
Tensorflow累加的实现案例
2020/02/05 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
国庆节文艺活动方案
2014/02/03 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
股东出资证明书范例
2014/10/04 职场文书
行政主管岗位职责
2015/02/03 职场文书
语文教师求职信范文
2015/03/20 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
汽车车尾标语大全
2015/08/11 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android