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

news2024/12/24 21:53:06

想法:将网页中经常要修改的名字放在一个以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

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

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

相关文章

【docker启动的Jenkins时,遇到时区问题处理】

1、查看容器中的时区 [rootlocalhost jenkins]# docker exec -it jenkins cat /etc/timezone Etc/UTC而本地使用的是Asia/shanghai [rootlocalhost jenkins]# timedatectl | grep Time zoneTime zone: n/a (CST, 0800)###查看 [rootlocalhost jenkins]# cd /usr/share/zoneinf…

UnitTest + Selenium 完成在线加法器自动化测试

1. 任务概述 利用 UnitTest 与 Selenium 编写自动化用例&#xff0c;测试在线加法器中的整数单次加法功能【如123 】 人工操作流程&#xff08;测试 12 是否等于 3&#xff09;&#xff1a; 打开在线加法器点击按钮1&#xff0c;再点击按钮&#xff0c;再点击按钮2&#xff0c…

opencv(2): 视频采集和录制

视频采集 相关API VideoCapture()cap.read()&#xff1a; 返回两个值&#xff0c;第一个参数&#xff0c;如果读到frame&#xff0c;返回 True. 第二个参数为相应的图像帧。cap.release() VideoCapture cv2.VideoCapture(0) 0 表示自动检测&#xff0c;如果在笔记本上运行&…

PHP写一个电商 Api接口需要注意哪些?考虑哪些?

随着互联网的飞速发展&#xff0c;前后端分离的开发模式越来越流行。编写一个稳定、可靠和易于使用的 API 接口是现代互联网应用程序的关键。本文将介绍在使用 thinkphp6 框架开发 电商API 接口时需要注意的要点和考虑的问题&#xff0c;并提供详细的逻辑步骤和代码案例。 1. …

Dubbo协议详解

前言特点应用场景Dubbo协议示例Dubbo协议的不足拓展 前言 Dubbo协议是一种高性能、轻量级的开源RPC框架&#xff0c;主要设计目的是解决分布式系统中服务调用的一些常见问题&#xff0c;例如服务负载均衡、服务注册中心、服务的远程调用等。它支持多种语言&#xff0c;例如Jav…

人工智能基础_机器学习038_中国人寿保费预测(EDA数据探索)_导包_数据探索_---人工智能工作笔记0078

注意 EDA是Exploratory Data Analysis(探索性数据分析)的缩写,它是一种统计分析方法,旨在了解数据的基本特征,并发现数据中的规律和模式。EDA通常是数据分析流程的开始阶段,主要使用可视化工具和统计指标来描述数据的基本特征,如数据的分布、中位数、均值、方差等。通过…

pip 问题

升级pip命令&#xff1a; python -m pip install --upgrade pippip不能下载pytorch&#xff1a; 这个问题我一直没解决。不知道有哪位大佬可以留言给我。把whl文件下载到本地也没有&#xff0c;pip不会进行本地文件夹搜索。

用归并排序算法merge_sort( )求解 逆序对的数量 降低时间复杂度为 nlogn

题目简述 给定一个序列有n个数&#xff0c;求n个数中逆序对的个数&#xff0c;逆序对的定义&#xff1a;i < j && a[i] > a[j]。 输入格式 第一行包含一个整数n。 第二行包含 n 个整数&#xff08;所有整数均在1~1e9范围内&#xff09;&#xff0c;表示整数数…

基于STM32微控制器的巡线小车控制研究

## 一、引言 巡线小车是一种常见的智能车型&#xff0c;通常用于参加各类智能车比赛或者教学实验。本文将基于STM32微控制器对巡线小车进行控制研究&#xff0c;主要包括硬件设计和软件编程两个方面。通过该研究&#xff0c;将实现让巡线小车沿着指定轨迹巡线行驶&#xff0c;并…

LEEDCODE 220 存在重复元素3

class Solution { public:int getId(int a, int valuediff){// 值// return a/(valuediff1);return a < 0 ? (a ) -) / (valuediff 1) - 1 : a / (valuediff 1);}public: unordered_map<int, int> bucket;bool containsNearbyAlmostDuplicate(vector<int>&am…

Flutter 中在单个屏幕上实现多个列表

今天&#xff0c;我将提供一个实际的示例&#xff0c;演示如何在单个页面上实现多个列表&#xff0c;这些列表可以水平排列、网格格式、垂直排列&#xff0c;甚至是这些常用布局的组合。 下面是要做的&#xff1a; 实现 让我们从创建一个包含产品所有属性的产品模型开始。 …

基于STM32的循迹小车项目实战

循迹小车是一种能够沿着预定路线行驶的智能小车&#xff0c;通过巡线传感器检测路面的线路&#xff0c;并根据检测结果调整行驶方向。本项目将基于STM32微控制器实现一个简单的循迹小车&#xff0c;通过学习和实践&#xff0c;帮助初学者熟悉STM32的开发流程和掌握循迹小车的实…

采用Nexus搭建Maven私服

采用Nexus搭建Maven私服 1.采用docker安装 1.创建数据目录挂载的目录&#xff1a; /usr/local/springcloud_1113/nexus3/nexus-data2.查询并拉取镜像docker search nexus3docker pull sonatype/nexus33.查看拉取的镜像docker images4.创建docker容器&#xff1a;可能出现启动…

轮播图(多个一起轮播)

效果图 class MainActivity : Activity(), Runnable {private lateinit var viewPager: ViewPagerprivate lateinit var bannerAdapter: BannerAdapterprivate val images ArrayList<Int>() // 存储图片资源的列表private val handler Handler() // 用于定时发送消息…

软件工程理论与实践 (吕云翔) 第六章 面向对象分析课后习题及其解析

第六章 面向对象分析 知识点: 一个典型的软件系统通常包括的内容为&#xff1a;它使用数据结构&#xff08;对象模型&#xff09;&#xff0c;执行操作&#xff08;动态模型&#xff09;&#xff0c;并且完成数据值的变化&#xff08;功能模型&#xff09;。 3种模型之间的关…

机器视觉公司怎么可能养我这闲人,连软件加密狗都用不起,项目都用盗版,为什么​?

正版价值观我是认同的&#xff0c;但是同行也不用软件加密狗&#xff0c;你让我承担过多的设备成本&#xff0c;终端客户不愿意承担加密狗的成本&#xff0c;公司更不愿意去承担&#xff0c;许多机器视觉公司“零元购”&#xff0c;机器视觉软件加密狗都用不起&#xff0c;项目…

DVWA - 4

文章目录 JavaScriptlowmedium JavaScript 前端攻击。token 不能由前端生成&#xff0c;js 很容易被攻击者获取&#xff0c;从而伪造 token。同样其他重要的参数也不能由前端生成。 low 不修改输入&#xff0c;点击提交报错: 根据提示改成 success&#xff0c;还是报错&…

关于新版的Maven创建Maven项目的时候只有Maven Archetype,而找不到Maven的这个问题

问题情况 : 在最近的学习过程中&#xff0c;想要创建一个Maven模块用于分块设计&#xff0c;但是在idea里面创建Maven项目的时候&#xff0c;发现与maven相关的只有Maven Archetype这个模块&#xff0c;然后找不到单纯的Maven模块&#xff1b;就像下面这样 : 解决方案 : 其…

Skywalking流程分析_8(拦截器插件的加载)

前言 在之前的文章中我们将&#xff0c;静态方法、构造方法、实例方法的增强逻辑都分析完毕&#xff0c;但在增强前&#xff0c;对于拦截类的加载是至关重要的&#xff0c;下面我们就来详细的分析 增强插件的加载 静态方法增强前的加载 //clazz 要修改的字节码的原生类 Sta…

【自动化测试】基于Selenium + Python的web自动化框架!

一、什么是Selenium&#xff1f; Selenium是一个基于浏览器的自动化工具&#xff0c;她提供了一种跨平台、跨浏览器的端到端的web自动化解决方案。Selenium主要包括三部分&#xff1a;Selenium IDE、Selenium WebDriver 和Selenium Grid&#xff1a;  1、Selenium IDE&…