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验证表单大全
Nov 25 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
js实现简易ATM功能
Oct 27 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
javascript实现微信分享
2014/12/23 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python的randrange()方法使用教程
2015/05/15 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
小学优秀班集体申报材料
2014/05/25 职场文书
2014年医务科工作总结
2014/12/18 职场文书
同学聚会通知书
2015/04/20 职场文书
离婚案件上诉状
2015/05/23 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
干部理论学习心得体会
2016/01/21 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
浅谈Python数学建模之数据导入
2021/06/23 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技