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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现简单轮播图效果
Dec 27 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
一个简易需要注册的留言版程序
2006/10/09 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
Python算术运算符实例详解
2017/05/31 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
杭州联环马网络笔试题面试题
2013/08/04 面试题
长安大学毕业生自我鉴定
2014/01/17 职场文书
公证处委托书
2015/01/28 职场文书
入党介绍人考察意见
2015/06/01 职场文书
优质服务标语口号
2015/12/26 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
python数字图像处理:图像的绘制
2022/06/28 Python