jQuery 获取与设置 元素属性【一篇文章轻松拿下】

2023-05-16

hello大家好呀!此篇文章带领大家熟练掌握 jQuery 的属性方面的操作,包括固有属性的获取与设置,自定义属性的获取与设置等等,走进 jQuery 的更深层次阶段

文章目录:

一:固有属性的设置与获取 prop

1.1 固有属性的获取 

1.2 固有属性的设置 

 二:自定义属性的设置与获取 attr 

2.1 自定义属性的设置 

2.2 自定义属性的获取

三:数据缓存 data 

 3.1 数据缓存的形式设置属性 和 获取性值

3.2 数据缓存获取 H5 标准的自定义书属性


一:固有属性的设置与获取 prop

       什么是固有属性?固有属性即标签本身具有的属性,例如 a 标签的 href 属性,input 标签的 type 属性,这些就叫做元素的固有属性,此版块我们要学会获取与设置其固有属性。

1.1 固有属性的获取 

element.prop('属性名')

<body>
   <input type="text">
   <script>
       console.log($('input').prop('type'));
   </script>
</body>


1.2 固有属性的设置 

element.prop('属性名','属性值')

<body>
   <input type="text">
   <script>
       $('input').prop('type','password');
   </script>
</body>

input 标签的固有属性 type 的值设置为了 password


 二:自定义属性的设置与获取 attr 

      在原生 JS 版块我们使用过自定义属性,在点击导航切换页面时我们给排列的五个 div 依次设置了自定义属性 index,我们使用的是 setAttribute 设置定义属性,和 getAttribute 获取设置好的自定义属性值,在 jQuery 领域,我们也有同样效果的获取和设置自定义属性的方法。

2.1 自定义属性的设置 

element.attr('属性名','属性值')

<body>
   <div></div>
   <script>
       $('div').attr('index','100')
   </script>
</body>

设置了自定义属性 index 值为100,如果元素本身就有自定义属性,那么更改自定义属性值也用此方法,将第二个参数改为想要设置的值即可


2.2 自定义属性的获取

element.attr('属性名')

<body>
   <div index="1"></div>
   <script>
       console.log($('div').attr('index'));
   </script>
</body>


三:数据缓存 data 

       还有一个获取设置属性值的办法为数据缓存 data,这个里面的数据即属性值,不会显示在控制台的元素标签里(不会改变 DOM 结构),而是存放在元素的内存中,但是当页面刷新,元素内存中的数据将被删除

 3.1 数据缓存的形式设置属性 和 获取性值

设置属性:element.data('属性名','属性值')

获取属性值:element.data('属性名')

<body>
   <div></div>
   <script>
       $('div').data('index','1');
   </script>
</body>

可以发现我们虽然添加了自定义的属性 index,但是结构中并没有显示,这就是因为数据存放在了元素内存中,没有改变 DOM 结构

但是如果我们获取是可以得到这个属性值的

<body>
   <div></div>
   <script>
       $('div').data('index','1');
       console.log($('div').data('index'));
   </script>
</body>


3.2 数据缓存获取 H5 标准的自定义书属性

我们知道 H5 标准下的自定义属性前面有个 ‘ data- ’,在这里使用data获取H5标准的自定义属性时不需要加 data-,并且得到的是一个 数字型 的值

<body>
   <div data-index="123456"></div>
   <script>
       console.log($('div').data('index'));
   </script>
</body>

 【注意!!不需要加 data- 前缀,并且此处获取的值为数字型】

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 获取与设置 元素属性【一篇文章轻松拿下】 的相关文章

  • LQR的理解与运用 第一期——理解篇

    目录标题 0 本系列目的理解六个问题 运用一阶倒立摆matlab 43 simscape multibody实现 简单的轮足模型 xff08 二阶倒立摆 xff09 1 理解LQR写在前面Q1 LQR控制的是什么Q2 LQR的适用场景与形式
  • LQR的理解与运用 第二期——一阶倒立摆在matlab上的LQR实现

    目录标题 0 本系列目的参考教程 1 理解2 运用在solidworks上创建一阶倒立摆模型并导出一阶倒立摆的模型及物理公式推导模型介绍模型推导模型推导方法化简方法结论 根据模型求LQR的K值matlab仿真的实现流程与步骤准备步骤正确导入
  • tensorflow张量和numpy数组相互转换

    知识补充 xff1a 官方文档 xff08 GItHub xff09 xff1a TensorFlow 2 0 Functions not Sessions tensorflow2 x的转换模块 64 tf function 关于图执行 x
  • 猿创征文|【电源专题】案例:怎么用万用表测试静态电流IQ

    目录 nbsp nbsp nbsp nbsp 静态电流在生活中的例子 nbsp nbsp nbsp nbsp 什么是静态电流IQ 关断电流 非开关静态电流 lt
  • IDEA找不到Maven插件原因及解决办法

    IDEA找不到Maven插件原因及解决办法 报错如下 xff0c 因为我自己的报错解决了 xff0c 所以借用了别人的图 xff0c 侵删 在idea中你会发现明明在pom xml中加入了插件但依然会报错 xff0c 并且不会下载 解决办法
  • linux系统用户自动登陆不需要输入密码设置

    使用于ubuntu linux unix 一 删除密码 root 64 ubuntu passwd d root 或者 passwd root d 二 修改sshd config文件 root 64 ubuntu cd etc ssh ro
  • 新建springboot项目报错

    未能配置数据源 xff1a url 属性未指定 xff0c 无法配置嵌入式数据源 原因 xff1a 无法确定合适的驱动程序类别 如果您想要一个嵌入式数据库 xff08 H2 HSQL或Derby xff09 xff0c 请将其放在类路径上
  • 伪分布搭建hadoop

    伪分布式搭建hadoop 伪分布模式准备工作以root权限修改ip xff0c 配置关网等修改完IP地址后 xff0c 需要重启网络服务查看ip和是否能ping通修改主机名修改域名映射文件关闭防火墙ssh免密登陆 安装JDK卸载之前的JDK
  • Java实现AI机器人聊天

    文章目录 前言一 账号注册申请密钥二 参数详情三 Java集成1 调用接口2 响应数据 四 效果总结 前言 OpenAI API 几乎可以应用于任何涉及理解或生成自然语言或实现代码等场景 提供一系列具有不同学习训练的模型 xff0c 适用于
  • 使用全局阈值进行灰度图像二值化

    1 原理 选取阈值的一种方法就是图像直方图的视觉检测 选择 T 的另一个方法是反复实验 xff0c 选取不同的阈值 xff0c 直到观测者觉得产生了较好的结果为止 xff0c 这在交互环境下特别有效 例如 xff0c 这种方法允许 使用者通
  • Linux动静态库

    文章目录 Linux动静态库认识动静态库动态库静态库 静态库的打包与使用静态库的打包静态库的使用 动态库的打包与使用动态库的打包动态库的使用 Linux动静态库 认识动静态库 我们先来看一段代码 xff1a span class token
  • GPS启动方式、定位速度、定位精度介绍

    前面文章介绍了GPS定位基础知识 GPS定位知识介绍 qq com 本文主要介绍GPS启动方式 定位过程中最重要的辅助信息是时间 星历 位置 根据辅助信息不同
  • window11上Linux环境搭建

    以下的大部分图片来自网上 xff0c 本人在操作过程中忘记截图记录了 xff0c 但是发出来的这些和我做的是一模一样的 xff01 xff01 一 点击下载centOS7镜像 centos 7 9 2009 isos x86 64安装包下载
  • SQLyog连接MySQL出现错误,提示Client does not support authentication protocol requested by server的解决方法

    问题 xff1a 自己电脑安装了MySQL8 0 26版本 xff0c 但从网上找到破解版的SQLyog软件 xff0c 在装好SQLyog后连接不上 xff0c 会弹出 Client does not support authentica
  • C++的基础知识学习笔记

    C 43 43 的基础知识学习 1 3变量 作用 xff1a 给一段指定的内存空间起名 xff0c 方便操作这段内存 语法 xff1a 数据类型 变量名 61 初始值 xff1b int a 61 1 xff1b 变量存在的意义 xff1a
  • zsh 配置指南

    zsh 配置指南 前言 在Linux系统中 xff0c 我们厂用终端输入命令与系统进行交互 xff0c 大多Linux系统使用的shell为bash 但bash中的功能和色调非常简单和单调 xff0c 往往想达到一个趁手的命令行工具 xff
  • linux/swupd基础命令讲解---基础篇

    一 原生linux ubuntu unix系统安装基础命令 root 64 ubuntu clrtrust generate root 64 ubuntu s wupd bundle add network basic root 64 ub
  • Ros_Canopen:ROS与底盘的can通讯使用

    ROS CANOPEN ROS与底盘的can通讯使用 这篇文章记录了ros canopen的安装和使用过程 xff0c 系统版本为ubuntu16 04 并且已经安装了ROS xff08 kienect 安装过程可能会出现错误 xff0c
  • casbin的详细理解过程(附图片理解)(rbac模型)

    一 casbin模型 casbin模型又叫PERM模型 xff1a subject sub 访问实体 xff0c object xff08 obj访问的资源 xff09 和action xff08 act访问方法 xff09 eft xff
  • EKF(拓展卡尔曼滤波)学习笔记:

    一些参考 xff1a xff08 三十九 xff09 通俗易懂理解 卡尔曼滤波与扩展卡尔曼滤波 知乎 zhihu com 50 封私信 42 条消息 如何通俗并尽可能详细地解释卡尔曼滤波 xff1f 知乎 zhihu com 视觉slam1

随机推荐

  • MSCKF学习笔记

    1 IMU简介 xff1a 测量物体三轴姿态角及加速度的装置 一般IMU包括三轴陀螺仪及三轴加速度计 IMU通常包含陀螺仪 Gyroscope 加速度计 Accelermeters 现代的陀螺仪 MEMS 输出的是旋转变化率 Rotatio
  • 树莓派串口编程c语言

    一 xff1a 初次使用树莓派串口编程 xff0c 需要配置 1 进入 cmdline txt 文档 指令 xff1a cd boot sudo vim cmdline txt 2 删除 之间的部分 dwc otg lpm enable s
  • 数据结构与算法

    为什么要学习数据结构与算法 1 数据结构 43 算法 61 程序 2 代码化繁为简 3 提高代码性能 4 提高面试通过率 栈 栈的概念 栈是一种遵从后进先出原则的有序集合添加新元素的一端称为栈顶 xff0c 另一端称为栈底操作栈的元素时 x
  • python爬虫的常用库

    1 requests 这个库是爬虫最常用的一个库 2 Selenium Selenium 这是一个自动化测试工具 xff0c 利用它我们可以驱动浏览器执行特定的动作 xff0c 如点击 下拉等操作 对于一些用JS做谊染的页面来说 xff0c
  • 【Mecanum wheel】初理解

    文章目录 Mecanum wheel1 定义2 受力分析3 轮子布局布局特点分析 4 底盘设计1 麦克纳姆轮尺寸2 电机连接参考 xff08 较通用 xff09 3 底盘设计参考 xff08 悬挂 避震器 xff09 5 缺点 Refere
  • STM32cubemx教程及STM32入门(一)

    STM32cubemx教程 xff08 一 xff09 2021 10 17 简介 STM32CubeMX 是 ST 意法半导体近几年来大力推荐的STM32 芯片图形化配置工具 xff0c 目的就是为了方便开发者 xff0c 允许用户使用图
  • 2020-11-05

    私有云的优缺点是什么 xff1f 与公有云的区别 毋庸置疑 xff0c 企业选择私有云的重要原因之一是数据安全性 与传统的 IT 架构相比 xff0c 云算力的高可用性 xff0c 让 IT 解决方案更经济高效地运行 优点 xff1a 可定
  • git 解决每次更新代码都要输入用户名密码的解决方案--1

    使用git pull或者git push每次都需要输入用户名和密码很繁琐 xff0c 耽误时间 xff0c 现在教大家一条命令实现保存用户名和密码不用再输入 git config global credential span class h
  • 浏览器相关知识总结~

    浏览器知识总结 前言一 浏览器的存储CookiesessionstorageindexedDB 二 浏览器的缓存浏览器缓存其它缓存 三 浏览器同源策略和跨域同源策略跨域 四 浏览器的渲染五 进程与线程1 进程与线程概念2 进程和线程之间的关
  • Samba服务

    目录 配置yum源安装samba服务配置samba服务Windows环境使用Samba服务Linux环境使用Samba服务 xff08 1 xff09 方法一使用smbclient命令 xff08 2 xff09 方法二使用挂载的方式 Sa
  • 基于STM32的二轮自平衡小车

    前言 近年来 xff0c 移动机器人是目前科学领域比较活跃的领域之一 xff0c 其应用范围越来越广泛 xff0c 面临的环境也越来越复杂 xff0c 这就要求机器人能够适应一些复杂的环境和任务 二轮自平衡机器人正是在这一背景下提出来的 x
  • 学习STM32单片机之结构体思想

    学习目标 xff1a 掌握 STM32 基础知识 学习STM32单片机之 结构体思想 学习内容 xff1a 1 我们在操作寄存器的时候 xff0c 操作的是寄存器的绝对地址 xff0c 如果每个寄存器都这样操作 xff0c 那将非常麻烦 2
  • Matlab中的mex文件

    文章目录 前言一 MEX的介绍二 MEX的编写总结 前言 MEX文件是一种可在matlab环境中调用的C语言 xff08 或fortran xff09 衍生程序 xff0c mex的编译结果实际上就是一个带输出函数mexFunction 的
  • 【转载】机器视觉-相机标定后,移动相机需要重新标定相机吗?

    毕业论文和机器视觉相关 xff0c 最近又在做标定的相关东西 xff0c 及在笔记本上太麻烦 xff0c 索兴就建个博客写点学习中遇到的问题 相机标定之后 xff0c 移动相机需要重新进行标定吗 xff1f xff08 我主要做的是单目视觉
  • 浅谈逻辑地址和物理地址

    在程序运行时由中央处理单元生成的内容的地址称为逻辑地址 该地址也称为虚拟地址 当我们谈论逻辑地址时 xff0c 我们指的是CPU分配给每个进程的地址 xff0c 一个进程在内存中所处的实际地址与进程认为它所处的地址是不一样的 每当 CPU
  • [CUDA] 快速入门CUDA(2) 以任务为导向的实践-解决最小二乘法问题

    快速入门CUDA 2 以任务为导向的实践 解决最小二乘法问题 文章目录 快速入门CUDA 2 以任务为导向的实践 解决最小二乘法问题1 问题介绍2 MATLAB解法实现3 CUDA解法实现3 1 总览3 2 第一步 xff0c 读取矩阵3
  • 常见的Linux版本

    常见的Linux版本 Linux 系统的吉祥物名为 Tux xff0c 是一只呆萌的小企鹅 相传 Linus Torvalds 在童年时期去澳大利亚的动物园游玩时 xff0c 不幸被一只企鹅咬伤 xff0c 所以为了 报复 就选择了这个物种
  • 【深度学习&NLP】数据预处理的详细说明(含数据清洗、分词、过滤停用词、实体识别、词性标注、向量化、划分数据集等详细的处理步骤以及一些常用的方法)

    目录 一 数据预处理简介 二 进行数据预处理的原因 1 文本中含有不必要的信息和噪声 2 数据可能不一致或者不太规范 3 文本需要标记和分词 4 可能需要词形还原和词干提取 词性标注 5 需要将文本向量化处理 三 数据预处理方法介绍及使用样
  • Linux命令速查手册--超详细Linux命令教程

    一 常用命令速查 lscdpwdcatmorelesstailheadcpscpmvmkdirrmdirtouchrmpskilltopfreecleartreewcstat 以上是常用命令速查表 xff0c 以下是命令详解 二 Linux
  • jQuery 获取与设置 元素属性【一篇文章轻松拿下】

    hello大家好呀 xff01 此篇文章带领大家熟练掌握 jQuery 的属性方面的操作 xff0c 包括固有属性的获取与设置 xff0c 自定义属性的获取与设置等等 xff0c 走进 jQuery 的更深层次阶段 文章目录 xff1a 一