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 extend()详解及简单实例
May 06 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现图片切换效果
Oct 19 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中把有符号整型转换为无符号整型方法
2015/05/27 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP中list方法用法示例
2016/12/01 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
Python变量赋值的秘密分享
2018/04/03 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
党员干部承诺书范文
2014/03/25 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
盲山观后感
2015/06/11 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js