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

jQuery属性操作prop()、attr()和data()

jQuery 提供了一些属性操作的方法,主要包括 prop()、attr() 和 data() 等。通过这些方法,能够实现不同的需求。下面我们分别进行详细讲解。

1.prop() 方法

prop0 方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性,如 标签的 href 属性。具体语法示例如下:

$(selector).prop("属性名")                        //获取属性值
$(selector).prop("属性“,“属性值")               //设置属性值

下面我们通过代码演示 prop() 方法的使用。

<a href="http://localhost" title="主页"></a>
<script>console.log($("a").prop("href"));              //输出结果:http://localhost$("a").prop("title","首页");                   //设置title的值为“首页”
</script>

在上述代码中,第 3 行代码用于获取 标签的 href 属性,输出到控制台中。第 4 行代码用于设置 < a > 标签的 title 属性,将属性值设为 “首页”。

在开发中,还会经常使用 prop(‘属性’) 获取表单元素的 checked 值,示例代码如下:

<input type="checkbox"checked>
<script>//获取表单元素的checked值$("input").change(function() {console.log($(this).prop("checked")); //复选框选中时,输出结果为true});
</seript>

上述代码中,第 1 行代码设置了 input 的 type 值为 checkbox,表示复选框。第 4 行代码给 input 绑定了 change 事件,当表单元素状态发生变化时触发。如果复选框处于选中状态,则输出结果为 true,否则输出 false。

2. attr() 方法

Attr() 用来设置或获取元素的自定义属性,自定义属性是指用户给元素添加的非固有属性。例如,给 div 添加 index 属性,保存元素的索引值。具体语法如下。

$(selector).attr("属性名")                   // 获取属性值
$(selector).attr(”属性", “属性值“)        // 设置属性值

下面我们通过代码演示 attr() 方法的使用,如下所示。

<div index="1" data-index="2">我是div</div>
<script>console.log($("div").attr("index"));       // 输出结果:1console.log($("div").attr("data-index"));  // 输出结果:2$("div").attr("index", 3);                 // 设置index的属性值为3$("div").attr("data-index", 4);            // 设置data-index属性值为4
</script>

在上述代码中,div 的 index 属性是一个普通的自定义属性,data-index 是 HTML5 的自定义属性 (以“data-” 开头),使用 atr()方法都可以进行设置或获取。需要注意的是,自定义属性无法使用 prop()设置和获取。

3. data() 方法

data() 方法用来在指定的元素上存取数据。数据保存在内存中,并不会修改 DOM 元素结构; 一旦页面刷新,之前存放的数据都将被移除。具体语法如下:

$(selector).data("数据名")                   // 获取数据
$(selector).data("数据名""数据值")         // 设置数据

下面我们演示通过 data() 方法实现数据的操作,示例代码如下。

<div>我是div</div>
<script>$ ("div").data("uname","andy");           // 设置数据console.log ($("div").data("uname"));     // 获取数据,输出结果:andy
</script>

上述代码运行后,umame 会保存到内存中,不会出现在 HTML 结构中。

使用 data() 方法还可以读取 HTML5 自定义属性 data-index,示例代码如下:

<div index="1"data-index="2">我是div</div>
<script>console.log($("div").data("index"))//输出结果:2
</script>

在上述代码中,第 3 行用来获取 data-index 属性,属性名中不需要 “data-” 前缀,并且返回的结果是数字型。

相关文章:

jQuery属性操作prop()、attr()和data()

jQuery 提供了一些属性操作的方法&#xff0c;主要包括 prop()、attr() 和 data() 等。通过这些方法&#xff0c;能够实现不同的需求。下面我们分别进行详细讲解。 1.prop() 方法 prop0 方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性&#xff0c;如 …...

git的使用

1.git的四个区域&#xff1a; 2.常规git命令 git status 查看working directory哪些文件被更改了git add .把更改add到staging area&#xff0c;缓存的地方。改一个地方可以就先暂存一下&#xff0c;最后确认是哪些改动后再一起commit,以免不必要的版本。 在暂存区域&#xff…...

webpack生产环境配置

3 webpack生产环境配置 由于笔记文档没有按照之前的md格式书写&#xff0c;所以排版上代码上存在问题&#x1f622;&#x1f622;&#x1f622;&#x1f622; 09 提取css成单独文件 使用下载插件 npm i mini-css-extract-plugin0.9.0 -D webpack配置此时a,b提取成单独文件,并且…...

linux下安装jenkins

1.初始化Jenkins安装环境 系统版本&#xff1a;Red Hat Enterprise Linux 8.7 将脚本文件jenkins_install_env.sh 、 jenkins_install.sh和apache-maven-3.6.2-bin.tar.gz、jdk-8u251-linux-x64.tar.gz都上传到/usr/local/src目录下执行jenkins_install_env.sh脚本初始化Jenki…...

IGKBoard(imx6ull)-I2C接口编程之SHT20温湿度采样

文章目录1- 使能开发板I2C通信接口2- SHT20硬件连接3- 编码实现SHT20温湿度采样思路&#xff08;1&#xff09;查看sht20从设备地址&#xff08;i2cdetect&#xff09;&#xff08;2&#xff09;获取数据大体流程【1】软复位【2】触发测量与通讯时序&#xff08;3&#xff09;返…...

MyBatis——配置文件完成增删改查

1.首先先创建一个新的表,使用下面的sql语句 -- 删除tb_brand表 drop table if exists tb_brand; -- 创建tb_brand表 create table tb_brand (-- id 主键id int primary key auto_increment,-- 品牌名称brand_name varchar(20),-- 企业名称company_name varchar(20…...

Python内置函数 — all,any

1、all 源码注释&#xff1a; def all(*args, **kwargs): # real signature unknown"""Return True if bool(x) is True for all values x in the iterable.If the iterable is empty, return True."""pass 语法格式&#xff1a; all(iterable)…...

Pycharm配置QGIS环境

版本信息&#xff1a;QGIS&#xff1a; 3.22.16Pycharm&#xff1a;2022.3.2 (Community Edition)在QGIS官网下载安装包&#xff0c;下载稳定版本即可。配置步骤&#xff1a;安装完成后&#xff0c;使用Pycharm新建工程Python编译器选择之前配置好的编译器环境选择左侧第一个Vi…...

【C++】stack 与 queue

stack 与 queuestackSTL 容器中 stack 的使用模拟实现 stackqueueSTL 容器中 queue 的使用模拟实现 queuestack 在数据结构中&#xff0c;我们了解到&#xff0c;stack 栈结构&#xff0c;是一种先进后出的结构&#xff0c;并且我们是使用顺序表来进行实现栈的操作的。 STL 容…...

ARC142E Pairing Wizards

ARC142E Pairing Wizards 题目大意 有nnn个法师&#xff0c;编号为111到nnn。法师iii有强度aia_iai​&#xff0c;他计划打败强壮度为bib_ibi​的怪物。 你可以执行以下操作任意次&#xff1a; 选中一个法师&#xff0c;将它的强壮度增加1 一对法师(i,j)(i,j)(i,j)称为好的…...

Spark开发实战-主播打赏排行榜统计

&#xff08;一&#xff09;需求分析 计算每个大区当天金币收入排名前N的主播 背景&#xff1a; 我们有一款直播APP&#xff0c;已经在很多国家上线并运营了一段时间&#xff0c;产品经理希望开发一个功能&#xff0c;计算前N主播排行榜&#xff0c;按天更新排名信息&#xf…...

python 如何存储数据 (python 的文件和异常)

文章目录存储数据1. 使用 json.dump() 和 json.load()json.dump()2. 保存和读取用户生成的数据存储数据 很多程序都要求用户输入某种信息&#xff0c;如让用户存储游戏首选项或提供要可视化的数据。不管专注的是什么&#xff0c;程序都把用户提供的信息存储在列表和字典等数据结…...

第三章-OpenCV基础-8-绘图函数

前置内容 这篇内容不是本书内容,但后续用的到&#xff0c;特做记录。 使用OpenCV中不可避免需要用到各种绘图功能,比如绘制人脸库、显示人脸识别信息,那就需要用到OpenCV的绘图函数&#xff0c;这些函数包括cv2.line()&#xff0c; cv2.circle()&#xff0c;cv2.rectangle()…...

逆约瑟夫问题

约瑟夫问题可以说十分经典&#xff0c;其没有公式解也是广为人知的~ 目录 前言 一、约瑟夫问题与逆约瑟夫问题 1.约瑟夫问题 2.逆约瑟夫问题 二、思考与尝试&#xff08;显然有很多失败&#xff09; 问题分析 尝试一&#xff1a;递归/递推的尝试 尝试二&#xff1a;条件…...

MySQL之三大日志(更新中)

MySQL之三大日志&#xff08;更新中&#xff09; MySQL日志记录着数据库运行过程中的各种信息&#xff0c;包括&#xff1a;错误日志、普通查询日志、慢查询日志、二进制日志、中继日志、事务日志等。 综合上一篇《MySQL之"幻读"问题》涉及到事务&#xff0c;本文主…...

如何使用EvilTree在文件中搜索正则或关键字匹配的内容

关于EvilTree EvilTree是一款功能强大的文件内容搜索工具&#xff0c;该工具基于经典的“tree”命令实现其功能&#xff0c;本质上来说它就是“tree”命令的一个独立Python 3重制版。但EvilTree还增加了在文件中搜索用户提供的关键字或正则表达式的额外功能&#xff0c;而且还…...

北京移动CM311-5s-ZG_GK6323V100C_2+8_免拆一键卡刷固件包

北京移动CM311-5s-ZG_GK6323V100C_28_免拆一键卡刷固件包 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0c;…...

JavaScript(1)

JavaScript简介 JavaScript是一门跨平台、面向对象的脚本语言&#xff0c;用来控制网页行为的&#xff0c;它能使网页可以交互。 JavaScript引入方式 1、内部脚本 将js代码定义在HTML页面中&#xff0c;在HTML中&#xff0c;JavaScript代码必须位于<script>与</scrip…...

阿里云云原生每月动态 | 聚焦实战,面向开发者的系列课程全新上线

作者&#xff1a;云原生内容小组 云原生是企业数字创新的最短路径。 《阿里云云原生每月动态》&#xff0c;从趋势热点、产品新功能、服务客户、开源与开发者动态等方面&#xff0c;为企业提供数字化的路径与指南。 本栏目每月更新。 趋势热点 《云原生实战指南》白皮书发布 …...

Goby 征文大擂台,超值盲盒等你来!

001 Goby 技术征文正式启动 Goby 致力于做最好的网络安全工具。为了促进师傅们知识共享和技术交流&#xff0c;现发起关于 Goby 的技术文章征集活动&#xff01; 欢迎所有师傅们参加&#xff0c;分享您的使用经验或挖洞窍门等&#xff0c;帮助其他人更好地了解和利用 Goby。 …...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...