利用jquery对HTML中的名字进行替代

想法:将网页中经常要修改的名字放在一个以jquery编写的js文件中,如果需要修改名字,直接修改js文件中的名字即可。

新建name_07.html文件,写入下面的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>it is title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <script src="E:/HTML_code/static/jquery-3.5.1.slim.js"></script>
</head>
<body>

<h1 id="title01"></h1>
<h2 id="title02"></h2>
<h3 id="title03_1"></h3>
<h3 id="title03_2"></h3>

<script src="namelib07.js"></script>

</body>
</html>

再在name_07.html所在目录下新建文件namelib07.js,并写入下面的代码:

$(document).ready(function() {
    var title01str = "这是标题01";
    var title02str = "这是标题02";
    var title03str = "这是标题03";

    $("#title01").text(title01str);
    $("#title02").text(title02str);
    $("#title03_1").text(title03str);
    $("#title03_2").text(title03str);

});

再用浏览器打开name_07.html,效果如下:
在这里插入图片描述
这样,我们需要修改某个标题名,则去修改相应的字符串的变量的值即可。

关于jquery的方法text()的用法,请参考博文 https://blog.csdn.net/wenhao_ir/article/details/134437312

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何选择一款车规级电源开关/驱动器芯片?NCV8405ASTT3G自保护低压侧驱动器

关于车规级芯片&#xff08;Automotive Grade Chip&#xff09;&#xff0c;车规级芯片是专门用于汽车行业的芯片&#xff0c;具有高可靠性、高稳定性和低功耗等特点&#xff0c;以满足汽车电子系统的严格要求。这些芯片通常用于车载电子控制单元&#xff08;ECU&#xff09;和…

echart 雷达图

详细信息 // 图表 var myChart echarts.init(document.getElementById(echart)); var option {radar: {radius: 60%,axisLabel: {//坐标轴刻度标签的相关设置。fontSize: 12//文字的字体大小},splitLine: {// 是否显示网格线show: true,lineStyle: {//分隔线颜色&#xff0c;…

算法通关村第九关-白银挑战二分查找与高频搜索树

大家好我是苏麟,今天看看二分查找相关的题目 . 大纲 二分查找拓展问题山脉数组的峰顶索引寻找旋转排序数组中的最小值 中序与搜索树二叉搜索树中的搜索验证二叉搜索树 二分查找拓展问题 山脉数组的峰顶索引 描述 : 符合下列属性的数组 arr 称为 山脉数组 &#xff1a; arr…

JumpServer2023漏洞复现合集

本文主要复现JumpServer2023年出现的大批量漏洞&#xff0c;既是分享也是为了记录自己的成长&#xff0c;近期会持续更新。 1. JumpServer MongoDB远程代码执行漏洞&#xff08;CVE-2023-43651&#xff09; 1.1 漏洞级别 高危 1.2 漏洞描述 经过身份验证的用户可以利用Mon…

检验Pdfsharp.dll 支持的语言及对应的字体

文章目录 检验所支持语言的字体使用字体绘制文本并显示 PdfSharp 语言和字体的支持有限&#xff0c;有时候再本地电脑上能正常显示文本&#xff0c;但在其它电脑上就显示乱码或一个正方体&#xff0c;或&#xff1f;&#xff1f;。不同操作系统可能自带的字体本身就不一样&…

LeetCode2-两数相加

大佬解法 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(int x) { val x; }* }*/ class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {ListNode pre new ListNode(0);ListNo…

ERR_PNPM_INVALID_WORKSPACE_CONFIGURATION packages field missing or empty

vue执行 pnpm install命令时&#xff0c;报 ERR_PNPM_INVALID_WORKSPACE_CONFIGURATION  packages field missing or empty错&#xff0c;在网上查询了很久&#xff0c;也没有传出来结果&#xff0c;最后发现是pnpm的版本不对引起的。 我先执行的是npm install -g pnpm&…

口袋参谋:如何找竞争小,优势大的蓝海词?

​ 作为淘宝天猫的中小卖家&#xff0c;99.99%的人都知道流量对于店铺的重要性&#xff0c;如果没有流量的话&#xff0c;店铺是肯定没有销量的。 提高流量的方式有很多种&#xff0c;比如优化宝贝图片、标题、关键词等&#xff0c;由于在淘宝天猫上同一宝贝的竞争力太大了…

成果分享丨学生学徒“行业”+大数据模型分享

学生学徒 阶段成果分享 为进一步提升学生学徒制学员的技术水平&#xff0c;增强学员的企业项目应用能力&#xff0c;助力学员全面发展。自学徒制开展以来&#xff0c;泰迪指导学员完成多项企业应用项目&#xff0c;开展多次项目经验分享交流&#xff0c;让学员在实践中不断学…

蘑菇街获得mogujie商品详情 API 返回值说明

速卖通API接口是速卖通平台提供的一种数据交换接口&#xff0c;可以帮助卖家快速获取平台上的商品信息、订单信息、用户信息等数据&#xff0c;以便在自己的应用程序中进行展示、管理或分析。 速卖通API接口可以通过以下步骤进行使用&#xff1a; 注册速卖通账号并获取API密钥…

如何将本地Portainer管理界面结合cpolar内网穿透工具实现远程浏览器访问

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer 公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 前言 Portainer 是一个轻量级的容器管理工具&#xff0c;可以通过 Web 界面对 Docker 容器进行管理和监控。它提供了可…

内网穿透的应用-通过内网穿透快速搭建公网可访问的Spring Boot接口调试环境

文章目录 前言1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址…

软件开发选择个人好?还是公司好?一篇文章带你了解

随着科技的发展&#xff0c;软件开发已成为一个相对复杂的行业&#xff0c;需要专业的技能和经验来保证项目的成功。然而&#xff0c;一些企业或个人可能会选择个人开发者进行软件开发&#xff0c;虽然这种选择可能会带来一些弊端。本文将探讨选择个人开发者进行软件开发的弊端…

分区格式化后的数据恢复指南,从此不再丢失重要数据

在日常生活中&#xff0c;我们使用电脑时&#xff0c;可能会因为种种原因需要对硬盘进行分区格式化。分区格式化是一种对硬盘进行重新划分存储空间的过程&#xff0c;它将删除该分区的所有数据&#xff0c;使其恢复到初始状态。然而&#xff0c;在执行分区格式化操作之后&#…

服务器数据恢复—VMware虚拟化下误操作导致服务器崩溃的数据恢复案例

服务器故障&分析&#xff1a; VMware虚拟化&#xff0c;vmfs文件系统&#xff0c;共3块磁盘。工作人员误操作将VMware虚拟化重装系统&#xff0c;服务器崩溃。 正常情况下&#xff0c;重装系统会导致文件系统元文件被覆盖。要恢复数据须找到重装系统前的文件系统残留信息并…

【EI会议征稿】第三届网络安全、人工智能与数字经济国际学术会议(CSAIDE 2024)

第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#xff09; 2024 3rd International Conference on Cyber Security, Artificial Intelligence and Digital Economy 第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#…

深入了解域名与SSL证书的关系

在如今数字化的世界里&#xff0c;网络安全成为我们关注的重要议题之一。为了确保数据在网络上传输的安全性&#xff0c;我们通常会采取各种安全措施&#xff0c;其中最常用的就是SSL证书。然而&#xff0c;很多人并不了解SSL证书是如何与域名相互关联的。 首先&#xff0c;我…

CentOS to 浪潮信息 KeyarchOS 迁移体验与优化建议

浪潮信息KeyarchOS简介 KeyarchOS即云峦操作系统(简称KOS), 是浪潮信息研发的一款面向政企、金融等企业级用户的 Linux 服务器操作系统。它基于Linux内核、龙蜥等开源技术&#xff0c;支持x86、ARM 等主流架构处理器&#xff0c;其稳定性、安全性、兼容性和性能等核心能力均已…

elasticsearch+canal增量、全量同步

目录 一、搭建环境&#xff1a; 1.1 下载软件上传到linux目录/data/soft下 1.2 把所有软件解压到/data/es-cluster 二、单节点&#xff08;多节点同理&#xff09;集群部署elasticsearch 2.1 创建es用户 2.2 准备节点通讯证书 2.3 配置elasticsearch&#xff0c;编辑/d…

Flutter应用-使用sqflite升级数据库

文章目录 问题描述具体做法代码示例更多条件限制升级 数据库迁移和备份简介数据库迁移数据库备份 问题描述 使用fluttter开发的应用程序发布后&#xff0c;发现数据库有些设计不合理。如何来更新数据库呢&#xff1f; 使用sqflite来处理数据库&#xff0c;但是第一版软件发布后…