jQuery HTML - 设置 —— W3school 详解 简单易懂(十二)

jQuery 设置内容和属性

  • jQuery 获取
  • jQuery 添加

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

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

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、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");
});

亲自试一试

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 + ")";});
});

亲自试一试

设置属性 - attr()

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

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

$("button").click(function(){$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

亲自试一试

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

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

$("button").click(function(){$("#w3s").attr({"href" : "http://www.w3school.com.cn/jquery","title" : "W3School jQuery Tutorial"});
});

亲自试一试

attr() 的回调函数

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

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

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

亲自试一试

jQuery HTML 参考手册

如需有关 jQuery HTML 方法的完整内容,请访问以下参考手册:

  • jQuery 文档操作
  • jQuery 属性操作
  • jQuery CSS 操作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM实战(34)——内存溢出之消息队列处理不当

一、简介 本章&#xff0c;我们将介绍一个因为处理消息队列中的数据不当而引起的内存溢出问题&#xff0c;先来看下系统的背景。 1.1 系统背景 这是一个线上的数据同步系统&#xff0c;专门从Kafka消费其它系统送进去的数据&#xff0c;处理后存储到自己的数据库中&#xff1…

java——运算符

目录 &#x1f388;算数运算符 1. 基本四则运算符 2.增量运算符 3.自增/自减运算符 &#x1f388;关系运算符 ❗逻辑运算符(重点) &#x1f6a9; 逻辑与 && &#x1f6a9;逻辑 || &#x1f6a9;逻辑非 ! &#x1f6a9;短路求值——java &#x1f388;位运算…

使用frp透传软件搭建本地运行的私有邮箱服务器

起因&#xff1a;随着我公司在线应用软件的增多&#xff0c;比如wordpress、 next cloud、SuitCRM 、iFair等&#xff0c;许多场合都要求填写邮箱地址&#xff0c;绑定邮箱。因为不想将过多的数据存储于第三方空间&#xff0c;因此考虑在公司局域网内搭建一个私有的电子邮箱服务…

初识计算机网络 | 计算机网络的发展 | 协议初识

1.计算机网络的发展 “矛盾是普遍存在的&#xff0c;矛盾是事物联系的实质内容和事物发展的根本动力&#xff01;” 计算机在诞生之初&#xff0c;在军事上用来计算导弹的弹道轨迹&#xff01;在发展的过程中&#xff08;商业的推动&#xff0c;国家政策推动&#xff09;&…

软件工程测试2

1.【单选】“数据流的分解一般达到2层数据流就截止”的说法是否正确 A. 正确 B. 错误 答案&#xff1a;B 2.【单选】 在类图中&#xff0c;哪种关系表达总体与局部的关系 A. 泛化 B. 实现 C. 聚合 D. 依赖 答案&#xff1a;C 3.【多选】从UML时序图中我们能够得到&#xff08;…

ChatGLM论文解读

GLM GLM: General Language Model Pretraining with Autoregressive Blank Infilling 论文地址 1. 背景介绍 1)主流预训练框架 模型介绍结构特点训练目标autoregressive自回归模型,代表GPT,本质上是一个从左到右的语言模型,常用于无条件生成任务(unconditional generat…

openssl3.2/test/certs - 044 - 8192-bit leaf key

文章目录 openssl3.2/test/certs - 044 - 8192-bit leaf key概述笔记END openssl3.2/test/certs - 044 - 8192-bit leaf key 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev\my_local_git_prj\study\openSSL\test_certs\044\my_openssl_linux_…

composer安装hyperf后,nginx配置hyperf

背景 引入hyperf项目用作微服务&#xff0c;使用composer 安装hyperf后&#xff0c;对hyperf进行nginx配置。 配置步骤 因为hyperf监听的是端口&#xff0c;不像其他laravel、lumen直接指向文件即可。所有要监听端口号。 1 配置nginx server {listen 80;//http&#xff1a…

如何使用宝塔面板配置Nginx反向代理WebSocket(wss)

本章教程&#xff0c;主要介绍一下在宝塔面板中如何配置websocket wss的具体过程。 目录 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 2、代理配置内容 三、注意事项 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 map $http_upgrade $connection_…

HBase学习五:运维排障之备份与恢复

1 snapshot简介 1.1 发展史 distcp:关机全备份。HBase的所有文件都存储在HDFS上,因此只要使用Hadoop提供的文件复制工具distcp将HBASE目录复制到同一HDFS或者其他HDFS的另一个目录中,就可以完成对源HBase集群的备份工作 copyTable:在线跨集群备份。copyTable工具通过MapRed…

uniapp移动端——企业微信H5调用jssdk实现扫一扫,通过weixin-java-cp获取ticket签名,配置config

背景&#xff1a; 使用企业微信开发扫一扫功能 可信域名验证 (1)企业微信的可信域名需要和企业微信的备案主体一致。 域名备案主体可通过站长工具查看域名备案主体。https://icp.chinaz.com/ 企业微信备案主体可以咨询管理员 &#xff08;2&#xff09;通过nginx配置域名归…

【算法Hot100系列】不同路径

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

LIMS源码,实验室信息系统源码,后端框架:asp.net

LIMS(laboratory information management system)即实验室信息管理系统是实验室管理科学发展的成果&#xff0c;是实验室管理科学与现代信息技术结合的产物&#xff0c;是利用计算机网络技术、数据存储技术、快速数据处理技术等&#xff0c;对实验室进行全方位管理的计算机软件…

代码随想录二刷——数组day2

文章目录 前言数组知识点 一、 977. 有序数组的平方二、209. 长度最小的子数组三、59. 螺旋矩阵 II总结 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划二刷完卡子哥的刷题计划&#xff0c;加油&#xff01; 二刷决定精刷了&#xff0c;于是参加了卡子哥…

【Linux】糟糕,是心动的感觉——与Linux的初次相遇

初识Linux 导言一、计算机的发展1.1 历史背景1.2 计算机的发明 二、操作系统2.1 什么是操作系统&#xff1f;2.2 操作系统的诞生2.3 操作系统的发展2.3.1 批处理系统的发展2.3.2 分时系统2.3.3 实时系统2.3.4 通用操作系统 2.4 UNIX操作系统2.4.1 UNIX的诞生2.4.2 UNIX的发展 2…

开源 C/C++(DuckX)操作docx文旦

目录 1.详情 2.项目示例 1.详情 创建、读取和写入 Microsoft Office Word docx 文件&#xff0c;可以不使用Microsoft Office组件。目前看操作docx文件绕不开Microsoft Office组件&#xff0c;虽然本项目可以读取docx文档&#xff0c;但是里面排版都消失了&#xff0c;除此之…

Mysql的基本操作详解

当涉及到MySQL数据库的基本操作时&#xff0c;我们通常会涉及到创建数据库、创建表格、插入数据、查询数据等操作。下面是一个简要的MySQL基本操作的博客&#xff1a; --- MySQL基本操作详解 MySQL是一个广泛使用的关系型数据库管理系统&#xff0c;为许多应用程序提供了可靠…

BP神经网络需要像深度学习一次次的迭代训练吗?

BP神经网络 答案&#xff1a;是的&#xff0c;BP神经网络需要像深度学习一次次的迭代训练。总结&#xff08;BP神经网络和深度学习在本质上有以下区别&#xff09; 答案&#xff1a;是的&#xff0c;BP神经网络需要像深度学习一次次的迭代训练。 BP神经网络&#xff08;误差反…

2024.1.24 GNSS 学习笔记

1.伪距观测值公式 2.载波相位观测值公式 3.单点定位技术(Single Point Positionin, SPP) 仅使用伪距观测值&#xff0c;不使用其他的辅助信息获得ECEF框架下绝对定位技术。 使用广播星历的轨钟进行定位&#xff0c;考虑到轨钟的米级精度&#xff0c;所以对于<1米的误差&…

Linux:gcc的相关知识

目录 gcc的翻译&#xff08;编译&#xff09;过程&#xff1a; 预处理&#xff1a; 条件编译&#xff1a; 编译&#xff1a; 汇编&链接&#xff1a; 什么是链接&#xff1f; 安装静态库&#xff1a; 静态库的使用&#xff1a; 动态静态的对比&#xff1a; 优缺对比…