当前位置： 首页 > news >正文

jsp页面通过class或者id获取a标签上的属性的值

news 2026/2/3 9:21:37

要通过class和id两种方式获取a标签上的某个属性的值，或者给其赋值，可以使用JavaScript。以下是两种方法的示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript Example</title>
</head>
<body><div class="example" id="target" name="元素名">Element 1</div><div class="example">Element 2</div><div class="example">Element 3</div><a id="target" href="#">Target Link</a><script>// 使用document.querySelector获取具有特定类名的元素var elements = document.querySelectorAll('div.example');//----这里也可以用id来单独获取某一个div//var element = document.getElementById("target");//var attributeNameValue = element.getAttribute("name");// 遍历元素并设置属性值elements.forEach(function(element) {element.setAttribute('data-custom', 'custom value');});// 使用document.getElementById获取具有特定id的元素var targetElement = document.getElementById('target');// 获取属性值var attributeValue = targetElement.getAttribute('data-custom');console.log(attributeValue); // 输出：custom value// 给属性赋值targetElement.setAttribute('data-custom', 'new value');</script>
</body>
</html>

而实际开发中一般会引入jQuery库，用jQuery来操作元素，获取属性值。
下面是一个完整的例子，演示了如何使用$符号结合.class和#id来获取或设置a标签上的某个属性值：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery Example</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function() {// 使用.class选择器获取所有具有特定类名的元素var elements = $('div.example');// 遍历元素并设置属性值elements.each(function() {var element = $(this);element.attr('data-custom', 'custom value');});// 使用#id选择器获取具有特定id的元素var targetElement = $('#target');// 获取属性值var attributeValue = targetElement.attr('data-custom');console.log(attributeValue); // 输出： custom value// 给属性赋值targetElement.attr('data-custom', 'new value');});</script>
</head>
<body><div class="example">Element 1</div><div class="example">Element 2</div><div class="example">Element 3</div><a id="target" href="#">Target Link</a>
</body>
</html>

在这个例子中，我们首先引入了jQuery库。然后，在文档加载完成后，我们使用 符号结合 . c l a s s 选择器来获取所有具有 e x a m p l e 类名的 d i v 元素，并为每个元素设置一个名为 d a t a − c u s t o m 的属性，其值为 c u s t o m v a l u e 。接着，我们使用 符号结合.class选择器来获取所有具有example类名的div元素，并为每个元素设置一个名为data-custom的属性，其值为custom value。接着，我们使用 符号结合.class选择器来获取所有具有example类名的div元素，并为每个元素设置一个名为data−custom的属性，其值为customvalue。接着，我们使用符号结合#id选择器来获取具有特定id（target）的a标签元素。最后，我们分别使用element.attr方法获取和设置该元素的data-custom属性值。

相关文章：

jsp页面通过class或者id获取a标签上的属性的值

要通过class和id两种方式获取a标签上的某个属性的值&#xff0c;或者给其赋值&#xff0c;可以使用JavaScript。以下是两种方法的示例&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name&q…...

编程日记 2023/12/9 9:13:25

题目：美丽的区间（蓝桥OJ 1372）

题目描述&#xff1a; 解题思路&#xff1a; 采用双指针的快慢指针。 图解 可以采用前缀和&#xff0c;但会相较麻烦。 题解&#xff1a; #include<bits/stdc.h> using namespace std;const int N 1e5 9; int a[N];// 因为是连续区间&#xff08;连续区间&#xff1…...

编程日记 2023/12/9 9:08:22

解决：During handling of the above exception, another exception occurred

解决&#xff1a;During handling of the above exception, another exception occurred 文章目录 解决&#xff1a;During handling of the above exception, another exception occurred背景报错问题报错翻译报错位置代码报错原因解决方法参考内容&#xff1a;今天的分享就到…...

编程日记 2023/12/9 9:07:20

计算机基础知识65

cookie和session的使用 # 概念&#xff1a;cookie 是客户端浏览器上的键值对 # 目的&#xff1a;为了做会话保持 # 来源&#xff1a;服务端写入的&#xff0c;服务端再返回的响应头中写入&#xff0c;浏览器会自动取出来 存起来是以key value 形式&#xff0c;有过期时间、path…...

编程日记 2023/12/9 9:05:18

Python开发运维：Python垃圾回收机制

目录 一、理论 1.Python垃圾回收机制 一、理论 1.Python垃圾回收机制 &#xff08;1&#xff09;引⽤计数器 1&#xff09;环状双向链表 refchain 在python程序中创建的任何对象都会放在refchain链表中。 name "david" age 20 hobby ["篮球",游泳…...

编程日记 2023/12/9 9:01:15

ros2/ros安装ros-dep||rosdep init错误

第一个错误的做法&#xff1a; sudo apt-get install python3-pip sudo pip3 install 6-rosdep sudo 6-rosdep 如果使用上述代码将会摧毁整个系统&#xff0c;不重装系统反正我是搞不定啊&#xff0c;因为我不知道那个写软件的人到底做了什么。因为这个我安装的版本是humble&…...

编程日记 2023/12/9 8:59:13

《深入理解计算机系统》学习笔记 - 第四课 - 机器级别的程序

Lecture 05 Machine Level Programming I Basics 机器级别的程序 文章目录 Lecture 05 Machine Level Programming I Basics 机器级别的程序intel 处理器的历史和体系结构芯片的构成AMD 公司(Advanced Micro Devices&#xff0c;先进的微型设备) C, 汇编, 机器代码定义汇编/机器…...

编程日记 2023/12/9 8:53:08

云原生（Cloud Native）——概念，技术，背景，优缺点，实践例子

云原生&#xff08;Cloud Native&#xff09;是一种构建和运行应用程序的方法&#xff0c;这些应用程序充分利用云计算的优势。云原生应用程序通常设计为在现代、动态的环境中运行&#xff0c;如公共云、私有云和混合云。这种方法强调微服务架构、容器化、自动化、易于管理和可…...

编程日记 2023/12/9 8:48:03

ElasticSearch之线程池

ElasticSearch节点可用的CPU核的数量&#xff0c;通常可以交给ElasticSearch来自行检测和判定&#xff0c;另外可以在elasticsearch.yml中显式指定。样例如下&#xff1a; node.processors: 2如下表格中的processors即CPU核的数量。 线程池的列表 线程池名称类型线程数量队列…...

编程日记 2023/12/9 8:46:02

StoneDB-8.0-V2.2.0 企业版正式发布！性能优化，稳定性提升，持续公测中！

​ 11月&#xff0c;StoneDB 新版本如期而至&#xff0c;这一个月来我们的研发同学加班加点&#xff0c;持续迭代&#xff1a;在 2.2.0 版本中&#xff0c;我们针对用户提出的需求和做出了重量级更新&#xff0c;修复了一些已知和用户反馈的 Bug&#xff0c;同时对部分代码进行…...

编程日记 2023/12/9 8:39:57

【数据结构 — 排序 — 插入排序】

数据结构 — 排序 — 插入排序 一.排序1.1.排序的概念及其运用1.1.1排序的概念1.1.2排序运用1.1.3 常见的排序算法 二.插入排序2.1.直接插入排序2.1.1.算法讲解2.1.2.代码实现2.1.2.1.函数定义2.1.2.2.算法接口实现2.1.2.3.测试代码实现2.1.2.4.测试展示 2.2.希尔排序2.2.1.算法…...

编程日记 2023/12/9 8:36:55

物联网后端个人第十四周总结

物联网方面进度 1.登陆超时是因为后端运行的端口和前端监听的接口不一样&#xff0c;所以后端也没有报错&#xff0c;将二者修改一致即可 2.登录之后会进行平台的初始化&#xff0c;但是初始化的时候会卡住,此时只需要将路径的IP端口后边的内容去掉即可 3.阅读并完成了jetlinks…...

编程日记 2023/12/9 8:34:53

在uniapp中，可以使用那些预定义的样式类

u-flex&#xff1a;设置元素为弹性布局。u-flex-v&#xff1a;设置元素为纵向弹性布局。u-flex-h&#xff1a;设置元素为横向弹性布局。u-p-10&#xff1a;设置元素的上下左右边距为10rpx。u-p-t-10&#xff1a;设置元素的上边距为10rpx。u-p-b-10&#xff1a;设置元素的下边距…...

编程日记 2023/12/9 8:32:51

mybatis的数据库连接池

直接看原文 原文链接:【MyBatis】 连接池技术_mybatis自带连接池-CSDN博客 本文先不说springBoot整合mybatis后的 本文讲的是没有被springBoot整合前的mybatis自己的默认的连接池 --------------------------------------------------------------------------------------…...

编程日记 2023/12/9 8:31:50

Vue 的 el-select 下拉选项中，只有当文字超出时才显示提示框，未超出的则不显示

Vue 的 el-select 下拉选项中&#xff0c;只有当文字超出时才显示提示框&#xff0c;未超出的则不显示 <template><div><el-select v-model"selected" placeholder"请选择"><el-optionv-for"item in options":key"it…...

编程日记 2023/12/9 8:30:49

【Python】pptx文件转pdf

要将PPTX文件转换为PDF格式&#xff0c;你可以使用Python的python-pptx库来读取PPTX文件&#xff0c;然后使用comtypes库在Windows上或unoconv在Linux上来进行转换。但是&#xff0c;需要注意的是&#xff0c;comtypes依赖于Microsoft Office&#xff0c;而unoconv依赖于LibreO…...

编程日记 2023/12/9 8:29:49

response应用及重定向和request转发

请求和转发&#xff1a; response说明一、response文件下载二、response验证码实现1.前置知识&#xff1a;2.具体实现&#xff1a;3.知识总结 三、response重定向四、request转发五、重定向和转发的区别 response说明 response是指HttpServletResponse,该响应有很多的应用&…...

编程日记 2023/12/9 8:28:48

CentOS常用基础命令大全（linux命令)2

CentOS常用基础命令大全&#xff08;linux命令&#xff09; 1.关机 (系统的关机、重启以及登出 ) 的命令 shutdown -h now 关闭系统(1) init 0 关闭系统(2) telinit 0 关闭系统(3) shutdown -h hours:minutes & 按预定时间关闭系统 shutdown -c 取消按预定时间关闭系统 sh…...

编程日记 2023/12/9 8:27:47

分析阿里巴巴的微服务依赖图和性能

论文对阿里巴巴集群中部署的大规模微服务进行了全面的研究。他们分析了 7 天内 20,000 多个微服务的行为&#xff0c;并根据收集的 100 亿条调用跟踪来分析它们的特征。该论文获得SOCC 2021最佳论文奖。 他们发现&#xff1a; 微服务图在运行时是动态的 大多数图形像树一样分…...

编程日记 2023/12/9 8:26:46

Linux——基本指令（一）

写在前面&#xff1a; 我们云服务器搭建的Linux系统&#xff0c;使用的镜像版本CentOS 7.6,使用的Xshell远程连接云服务器 前面我们使用超级管理员root账号登录&#xff0c;一般我们使用普通用户登录&#xff0c;那么如何创建新用户呢&#xff1f; 1.创建新用户 &#xff08…...

编程日记 2023/12/9 8:25:44

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/22 15:14:25

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/1/24 7:41:57

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/1/24 15:09:43

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2026/1/20 17:44:40

RLHF vs RLVR：对齐学习中的两种强化方式详解

在语言模型对齐&#xff08;alignment&#xff09;中&#xff0c;强化学习&#xff08;RL&#xff09;是一种重要的策略。而其中两种典型形式——RLHF&#xff08;Reinforcement Learning with Human Feedback&#xff09; 与 RLVR&#xff08;Reinforcement Learning with Ver…...

编程新知 2026/1/15 4:23:13

timestamp时间戳转换工具

作为一名程序员&#xff0c;一款高效的 在线转换工具 &#xff08;在线时间戳转换 计算器 字节单位转换 json格式化&#xff09;必不可少&#xff01;https://jsons.top 排查问题时非常痛的点: 经常在秒级、毫秒级、字符串格式的时间单位来回转换&#xff0c;于是决定手撸一个…...

编程新知 2026/1/31 11:18:18