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

news2025/7/18 23:19:40

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- 前缀,并且此处获取的值为数字型】

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

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

相关文章

uniapp 中设置全局页面背景色

uniapp 中设置全局页面背景色 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 未生效 : 在pages.json里面设置单页面背景色,这种是不行的,只能在页面内生效 方法1: pages.json globalStyle 中设置 backgroundColor // pages.json"globalStyle&quo…

Vue路由传参的方法和传递参数为对象时的问题

vue路由传参方法 在编写vue项目时&#xff0c;时常会使用路由在不同页面中传递参数&#xff0c;常见使用方式如下&#xff1a; this.$router.push({path: "/test",query: {a: 1,b: 2} }) 这样我们就传递了两个参数&#xff0c;在 /test 页面 就可以接收这两个参数…

【网络】https协议

&#x1f941;作者&#xff1a; 华丞臧. &#x1f4d5;​​​​专栏&#xff1a;【网络】 各位读者老爷如果觉得博主写的不错&#xff0c;请诸位多多支持(点赞收藏关注)。如果有错误的地方&#xff0c;欢迎在评论区指出。 推荐一款刷题网站 &#x1f449; LeetCode刷题网站 文章…

黑马程序员最新版JavaWeb综合案例(前后端完整版)

JavaWeb 综合案例 学习视频链接: 黑马程序员最新版JavaWeb基础教程&#xff0c;Java web从入门到企业实战完整版 完整代码链接&#xff1a; https://github.com/HaiLei-Fly/JavaWeb-brand 1、功能介绍 案例功能&#xff1a; 用户登录&#xff08;账号密码登录&#xff09;…

基于JavaSpringBoot+Vue+uniapp微信小程序实现在线房屋装修管理系统

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

分布式Id生成方式

为什么要用分布式ID&#xff1f; 在说分布式ID的具体实现之前&#xff0c;我们来简单分析一下为什么用分布式ID&#xff1f;分布式ID应该满足哪些特征&#xff1f; 1、什么是分布式ID&#xff1f; 拿MySQL数据库举个栗子&#xff1a; 在我们业务数据量不大的时候&#xff0c…

Zotero 超好用插件的下载链接及配置方法(PDF-translate/ZotFile/茉莉花/Zotero Scihub)

目录前言插件安装方法插件一&#xff1a;文献翻译插件&#xff08;pdf-translate&#xff09;插件二&#xff1a;文献附件管理&#xff08;ZotFile&#xff09;插件三&#xff1a;中文文献插件&#xff08;茉莉花&#xff09;插件四&#xff1a;Sci-Hub 自动下载文献&#xff0…

vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求

vue3 async和await联合调用接口 &#x1f525;一文搞定&#x1f525;点击进入vue专栏&#x1f525;async/await定义async/await用法&#x1f525;async/await的基本用法async/await的使用场景async/await实战&#x1f525;&#x1f525;处理一个异步请求处理多个异步请求summar…

从函数计算到 Serverless 架构

作者&#xff1a;秋雨陈 前言 随着 Serverless 架构不断发展&#xff0c;各云厂商和开源社区都已经布局 Serverless 领域&#xff0c;一方面表现在云厂商推出传统服务/业务的 Serverless 化版本&#xff0c;或者 Serverless 计算平台&#xff1b;另一方面表现在开源社区中 Se…

远程构建(命令、脚本构建)jenkins

在对应项目&#xff0c;开启远程构建开关添加API token系统设置调整用户权限获取crumbcurl调用构建 1、进入对应项目的设置页面&#xff1a;开启远程构建开关 2、 添加 API token&#xff1a;进入对应用户的设置页面 3、系统设置调整权限&#xff0c;如图 4、由于jenkins的安全…

使用element-ui中的el-upload自定义上传

题引&#xff1a; 日常开发系统的时候&#xff0c;我们都会有上传文件的功能。但是用原生的文件上传是很繁琐的&#xff0c;那么我们都会选择使用UI组件库&#xff0c;如element-plus、ant-design等。这些UI组件库是非常容易上手且实用的&#xff0c;但是万恶的需求是奇怪多变…

vue项目引入百度地图BMapGL和BMap实例,以及辅助工具BMapGLLib 的引入,BMapGL鼠标绘制功能

记录一下vue项目使用百度地图所用的api和踩过的坑&#xff0c;减少以后引用少走弯路。旨在记录&#xff0c;第一次开贴&#xff0c;不足之处请多多指教。废话不多说&#xff0c;开撸&#xff01; 1、引用百度地图 这里账号密钥不多说&#xff0c;上链接&#xff0c;自己注册。…

【kubernetes】k8s集群搭建(完整详解)

目录 一、准备工作 二、配置 1、修改主机名 2、修改hosts文件 3、关闭防火墙和SELinux 4、关闭swap 5、修改网卡配置 6、系统模块配置 7、免密登录 8、安装k8s和docker 9、查看k8s集群需要的镜像版本 10、初始化Master节点 11、node配置 12、拉取Nginx镜像进行配置…

【uniapp小程序】视图容器cover-view

&#x1f352;观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新新文章啦&#xff0c;今天的内容是uniapp小程序的视图容器&#xff0c;cover-view &#x1f352;准备好了吗&#xff1f;那我们就发车啦&#xff0c;赶紧拿起小本本把笔记做起来…

10Wqps 超高并发 API网关 架构演进之路

说在前面 在尼恩的&#xff08;50&#xff09;读者社群中&#xff0c;经常遇到一个 API网关 架构方面的问题&#xff1a; (1) 尼恩老师&#xff0c;最近公司我们在规划业务出口网关(目的&#xff0c;整合规范外部调用&#xff0c;如短信平台 mqtt 等) 我在做整理技术方案&…

智能车竞赛:Infineon TC264单片机使用总结快速入门

本文主要是为了备赛第十八届全国大学生智能车竞赛&#xff0c;基于逐飞开源库和芯片数据手册的一些学习总结&#xff0c;使用英飞凌官方的AURIX Development Studio开发环境。 正如STM32的开发方式有标准库和HAL库&#xff0c;Infineon单片机也有官方库&#xff0c;而逐飞开源…

阿里P8大牛用实例跟你讲明白“Java 微服务架构实战”

全文一共十五章&#xff0c;核心内容为SpringBoot、SpringCloud、Docker、RabbitMQ消息组件。其中&#xff0c;SpringBoot是SpringMVC 技术的延伸&#xff0c;使用它进行程序开发会更简单&#xff0c;服务整合也会更容易。SpringCloud 是当前微架构的核心技术方案&#xff0c;属…

Spring Cloud Alibaba 微服务1,系统架构演变 + Nginx反向代理与负载均衡

目录专栏导读一、系统架构演变二、什么是Nginx&#xff1f;三、servername匹配规则四、正向代理与反向代理1、正向代理2、反向代理3、LVS五、负载均衡策略1、轮询2、权重3、ip_hash4、least_conn5、url_hash6、fair7、小结六、动静分离七、URLRewrite专栏导读 &#x1f3c6;作者…

【Linux系统】进程概念

目录 1 冯诺依曼体系结构 2 操作系统(Operator System) 概念 设计OS的目的 定位 总结 系统调用和库函数概念 3 进程 3.1 基本概念 3.2 描述进程-PCB 3.2 组织进程 3.3 查看进程 3.4 通过系统调用获取进程标示符 3.5 进程状态 在了解进程概念前我们还得了解下冯诺…

MongoDB详解,用心看这篇就够了【重点】

1.1 MongoDB概述 MongoDB是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。 它支持的数据…