jQuery HTML设置内容和属性操作实例分析


Posted in jQuery onMay 20, 2020

本文实例讲述了jQuery HTML设置内容和属性操作。分享给大家供大家参考,具体如下:

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

将使用前一章中的三个相同的方法来设置内容:

  • 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("3water");
});

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html():

$("#btn1").click(function(){
 $("#test1").text(function(i,origText){
  return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
 });
});
 
$("#btn2").click(function(){
 $("#test2").html(function(i,origText){
  return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
 });
});

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变(设置)链接中 href 属性的值:

$("button").click(function(){
 $("#3water").attr("href","//3water.com/jquery");
});

attr() 方法也允许同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性:

$("button").click(function(){
 $("#3water").attr({
  "href" : "//3water.com/jquery",
  "title" : "jQuery 教程"
 });
});

attr() 的回调函数

jQuery 方法 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法:

$("button").click(function(){
 $("#3water").attr("href", function(i,origValue){
 return origValue + "/jquery"; 
 });
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 #jQuery
jQuery HTML css()方法与css类实例详解
May 20 #jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 #jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
php数组去重实例及分析
2013/11/26 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
php自动加载代码实例详解
2021/02/26 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
Node.js模块加载详解
2014/08/16 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
深入浅析Python的类
2018/06/22 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
set在python里的含义和用法
2019/06/24 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python之生成多层json结构的实现
2020/02/27 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python如何合并多个字典或映射
2020/07/24 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
质检员岗位职责
2013/12/17 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
商家认证委托书格式
2014/10/16 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
幼师大班个人总结
2015/02/13 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书