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返回定位插件详解
May 15 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
微信小程序 图片边框解决方法
2017/01/16 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
中专毕业生自荐信
2013/11/16 职场文书
八年级历史教学反思
2014/01/10 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python