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下实现overlay遮罩层代码
Aug 25 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
canvas绘制的直线动画
Jan 23 Javascript
JS变量及其作用域
Mar 29 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 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学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
10个简化PHP开发的工具
2014/12/25 PHP
ThinkPHP模型详解
2015/07/27 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
javascript读写json示例
2014/04/11 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python 实现批量图片识别并翻译
2020/11/02 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
运动会开幕式解说词
2014/02/05 职场文书
企业挂职心得体会
2014/09/10 职场文书
个人向公司借款协议书
2014/10/09 职场文书
入党个人总结范文
2015/03/02 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Vue实现下拉加载更多
2021/05/09 Vue.js
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
浅析Django接口版本控制
2021/06/26 Python