Jquery复习(四)之text()、html()、val()
2023-09-27 14:26:39 时间
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 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");
});
注意:html()设置值时会识别标签元素
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 + ")";
});
});
相关文章
- jQuery 遍历函数
- jQuery和CSS 3定制HTML 5视频播放器
- 【转】C#类似Jquery的html解析类HtmlAgilityPack基础类介绍及运用
- JQuery加载html网页
- jQuery获取动态产生的html内标签或元素
- jQuery内部原理和实现方式浅析
- jQuery:jQuery笔记1
- jquery全选,取消全选
- 强大的响应式jQuery消息通知框和信息提示框插件
- jQuery在html有效,在jsp无效的原因
- 用jQuery向div中添加Html文本内容
- jQuery对html元素的取值与赋值实例详解
- js jquery 实现html页面之间参数传递(单一参数、对象参数传递)
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
- jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
- 支持10种格式的 HTML 表格导出 jQuery 插件
- jQuery判断元素是否显示 是否隐藏 html标签默认隐藏
- 【jQuery Mobile】jQuery Mobile 语法小抄
- 为什么很多国内公司不使用 jQuery 等开源 JS 框架(库),而选择自己开发 JavaScript 框架?
- 基于jquery判断浏览器版本过低代码
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- jquery写日期选择器
- 【jquery Ajax 】form表单教学+评论案例
- Javascript/CSS/HTML/vue/angularJS/react/jquery/DOM前端编程经典电子书pdf下载
- [从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)【转】
- 19前端学习之JQuery基础(三):jQuery尺寸、位置操作、jQuery事件、jQuery事件对象、Jquery拷贝对象、jQuery 多库共存、jQuery 插件