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

06-jQuery-DOM操作-属性操作-attr()\prop()\addClass()\toggleClass()等

一、通用属性操作

1、attr() 方法:主要用于获取或设置 HTML 元素的属性值,它接受一个参数或两个参数,当传递一个参数时,它返回指定属性名的属性值;当传递两个参数时,它设置指定属性名的属性值为指定的值。

获取属性值可以使用如下语法:

$(selector).attr(attributeName)

其中,$(selector) 是要获取属性值的元素的选择器,attributeName 是属性名。

<a href="https://www.google.com/">Google</a>var href = $("a").attr("href");
console.log(href); // 输出 "https://www.google.com/"

设置属性值可以使用如下语法: 


$(selector).attr(attributeName, value)

其中,$(selector) 是要设置属性值的元素的选择器,attributeName 是属性名,value 是属性值。 

<a href="">Click here</a>$("a").attr("href", "https://www.google.com/");
//这样就把 <a> 元素的 href 属性的值修改为了 https://www.google.com/。

2、 removeAttr() 方法:用于从元素中删除指定的属性,它只接受一个参数,即要删除的属性名。

$(selector).removeAttr(attributeName)
<a href="https://www.google.com/" target="_blank">Google</a>$("a").removeAttr("target"); // 删除 <a> 元素的 target 属性
//这样,<a> 元素的 target 属性就被删除了。

3、 prop() 方法:主要用于获取或设置 DOM 元素的属性值,它接受一个参数或两个参数,当传递一个参数时,它返回指定属性名的属性值;当传递两个参数时,它设置指定属性名的属性值为指定的值。

获取属性值:

$(selector).prop(propertyName)

其中,$(selector) 是要获取属性值的元素的选择器,propertyName 是属性名。

<input type="checkbox" checked>var checked = $("input[type='checkbox']").prop("checked");
console.log(checked); // 输出 true

设置属性值:

$(selector).prop(propertyName, value)

其中,$(selector) 是要设置属性值的元素的选择器,propertyName 是属性名,value 是属性值。

<input type="checkbox">$("input[type='checkbox']").prop("checked", true);
//这样就把 <input> 元素的 checked 属性设置为了 true。

请注意,prop() 方法只能用于操作 DOM 元素的属性,而不能用于 HTML 属性。例如,下面的代码不会设置 <input> 元素的 type 属性:

$("input").prop("type", "password");

如果要设置 HTML 属性,应该使用 attr() 方法。

3、removeProp() 方法:用于从 DOM 元素中删除指定的属性。和 removeAttr() 方法不同,removeProp() 方法只接受一个参数,即要删除的属性名。

$(selector).removeProp(propertyName)
<div title="Some text">Hello</div>$("div").removeProp("title"); // 删除 <div> 元素的 title 属性
//这样,<div> 元素的 title 属性就被删除了。

在 jQuery 中,attr() 方法和 prop() 方法都用于操作 HTML 元素的属性,但它们有一些区别:

1、获取属性值时的区别:
对于 HTML 属性(如 href、src 等),attr() 方法获取的是属性值。
对于 DOM 属性(如 checked、selected 等),prop() 方法获取的是属性值。

2、设置属性值时的区别:
对于 HTML 属性,attr() 方法设置属性值时,属性值必须是字符串类型。
对于 DOM 属性,prop() 方法设置属性值时,属性值可以是布尔值、数字或字符串类型。

3、修改原始值的影响:
对于 HTML 属性,attr() 方法会修改原始 HTML 元素的属性值。
对于 DOM 属性,prop() 方法不会修改原始 HTML 元素的属性值,它只会修改浏览器所跟踪的属性值,这种修改不会被序列化到 HTML 中。

二、Class属性操作

1、addClass() 方法:用于向元素添加一个或多个类名。它接受一个或多个参数,每个参数是要添加的类名。

$(selector).addClass(class1, class2, ...)例如:
<div class="box"></div>$("div").addClass("red"); // 添加类名 "red"
//这样,<div> 元素就同时拥有 box 和 red 两个类名了。

2、removeClass() 方法:用于从元素中删除一个或多个类名。它接受一个或多个参数,每个参数是要删除的类名。

$(selector).removeClass(class1, class2, ...)例如:
<div class="box red"></div>$("div").removeClass("red"); // 删除类名 "red"
//这样,<div> 元素只剩下了 box 类名。

 3、toggleClass() 方法:用于在元素上添加或删除一个或多个类名,如果元素已经有了指定的类名,则删除该类名;如果元素没有指定的类名,则添加该类名。它接受一个或多个参数,每个参数是要添加或删除的类名。

$(selector).toggleClass(class1, class2, ...)例如:
<div class="box"></div>$("div").toggleClass("red"); // 添加类名 "red"
//这样,<div> 元素就同时拥有 box 和 red 两个类名了。//再次执行上述代码,<div> 元素的 red 类名就被删除了。<div class="box red"></div>$("div").toggleClass("red"); // 删除类名 "red"
//这样,<div> 元素只剩下了 box 类名。

4、hasClass() 方法:用于判断元素是否具有指定的类名。它接受一个参数,即要检查的类名,返回值为布尔类型的值,如果元素具有指定的类名,则返回 true;否则返回 false。

$(selector).hasClass(className)例如:
<div class="box red"></div>
var hasRedClass = $("div").hasClass("red"); // 返回 true
var hasGreenClass = $("div").hasClass("green"); // 返回 false

相关文章:

06-jQuery-DOM操作-属性操作-attr()\prop()\addClass()\toggleClass()等

一、通用属性操作 1、attr() 方法&#xff1a;主要用于获取或设置 HTML 元素的属性值&#xff0c;它接受一个参数或两个参数&#xff0c;当传递一个参数时&#xff0c;它返回指定属性名的属性值&#xff1b;当传递两个参数时&#xff0c;它设置指定属性名的属性值为指定的值。…...

接口自动化框架(Pytest+request+Allure)

前言&#xff1a; 接口自动化是指模拟程序接口层面的自动化&#xff0c;由于接口不易变更&#xff0c;维护成本更小&#xff0c;所以深受各大公司的喜爱。 接口自动化包含2个部分&#xff0c;功能性的接口自动化测试和并发接口自动化测试。 本次文章着重介绍第一种&#xff0c…...

2. 流程控制语句

2. 流程控制语句 2-1. prompt() 弹出一个对话框&#xff0c;用户可以输入内容&#xff0c;输入的内容可以通过变量接收 2-2. if…else if …else 语法&#xff1a; if(条件表达式1){ ​ 条件表达式1为真执行 ​ if(){ ​ }else{ ​ } }else { ​ 条件表达式1为假执行 } if els…...

为了流量,何同学做了个“假B站”?

何同学是B站知名数码博主&#xff0c;凭借优秀的视频制作能力&#xff0c;内容创新获得广大年轻用户的喜欢。 2021年的时候&#xff0c;UP主老师好我叫何同学就发布了一条制作AirDesk的视频&#xff0c;随后迅速在社交媒体中引发了大量关注。 当时&#xff0c;该视频为B站全站…...

腾讯云图形验证码申请流程

目录 一、官方指引二、操作步骤1.步骤1&#xff1a;新建验证&#xff0c;获取验证码密钥2.步骤2&#xff1a;客户端接入验证码&#xff0c;展示验证页面3.步骤3&#xff1a;服务端接入验证码&#xff0c;调用票据校验 API 进行二次校验 一、官方指引 https://cloud.tencent.co…...

浅谈管网抢维修效率对产销差率的影响

1 背景 多年来&#xff0c;漏损治理工作一直围绕检漏、分区计量或压力管理等相关话题&#xff0c;却忽视了抢维修速度与质量对漏损治理成效的影响。实际上&#xff0c;不管是DMA分区计量&#xff0c;还是检漏&#xff0c;最终还是要通过抢维修来修复漏点达到控制漏损的目的。尽…...

java设备台账管理系统myeclipse定制开发mysql数据库网页模式java编程jdbc

一、源码特点 java设备台账管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助 mysql数据库&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 java设备台账管理系统myeclipse定制开发mysql 二、功能介绍 此次系统…...

ChatGPT帮你写简历找工作

随着随着毕业时间的到来&#xff0c;应届生将要面临求职问题&#xff0c;根据官方的统计&#xff0c;2023届高校毕业生预计达1158万人&#xff0c;就业市场竞争激烈&#xff0c;无论是校园招聘&#xff0c;招聘会&#xff0c;线上招聘除了自身的准备和个人能力&#xff0c;都会…...

CentOS 8.5和CentOS8.4安装-解决Error setting up base repository问题

CentOS 8 内核采用了python3.6,而CentOS 7还是python2.7,对于想要用GPU服务器进行机器学习方面的工作,还是用python3.6的内核更好些。 CentOS 8 的新特性 DNF 成为了默认的软件包管理器,同时 yum 仍然是可用的 使用网络管理器( nmcli 和 nmtui)进行网络配置,移除了网络脚…...

数据抓取使用HTTP隧道代码示例

以下是使用Python的requests库实现HTTP隧道的代码示例&#xff1a; python import requests # 设置代理服务器地址和端口号 proxy_host 127.0.0.1 proxy_port 8888 # 设置目标网站URL url Example Domain # 创建Session对象 session requests.Session() # 设置代理服务…...

vue3【使用axios并封装axios请求】

第一步&#xff1a;安装axios npm install axios 第二步&#xff1a;编写请求文件 新建request.js 简单的axios封装&#xff0c;里面相关提示信息&#xff0c;自己可以引入element-plus去添加 /**axios封装* 请求拦截、相应拦截、错误统一处理*/ import axios from axios; i…...

「实验记录」MIT 6.824 Raft Lab2C Persist

#Lab2C - Persist I. SourceII. My CodeIII. MotivationIV. SolutionS1 - 实现persist()S2 - 实现readPersist()S3 - 持久化三字段S4 - 在newRaft()中初始化nextIdxs和matchIdxsS5 - 适当缩短心跳时间 V. Result I. Source MIT-6.824 2020 课程官网Lab2: Raft 实验主页simviso…...

软件详细设计总复习(三)【太原理工大学】

题型及分值&#xff1a; 选择 30 分&#xff0c;填空 20 分&#xff0c; 判断 10 分&#xff0c;简答 20 分&#xff0c;综合设计 20 分。 文章目录 三、行为型模式1. 命令模式2. 迭代器模式3. 观察者模式4. 状态模式5. 策略模式 三、行为型模式 1. 命令模式 举个例子&#x…...

Vue3(一):创建vue3工程、setup、vue3响应式原理、computed和watch

Vue3&#xff1a;第一章 一、创建Vue3.0工程1.使用vue-cli创建2.使用vite创建 二、Vue3中的响应式1.拉开序幕的setup2.ref函数3.reactive函数4.vue3中响应式的原理&#xff08;1&#xff09;vue2中响应式原理&#xff08;2&#xff09;Vue3中的Proxy 5.reactive和ref的对比6.se…...

Spring中的@Value注解详解

Spring中的Value注解详解 概述 本文配置文件为yml文件 在使用spring框架的项目中&#xff0c;Value是经常使用的注解之一。其功能是将与配置文件中的键对应的值分配给其带注解的属性。在日常使用中&#xff0c;我们常用的功能相对简单。本文使您系统地了解Value的用法。 Value…...

YSL赢麻了?SMI社媒心智品牌榜Top20公布:YSL破局夺魁,国货品牌现后起之秀

全文速览 1.数说故事联合用户说从美妆、彩妆、护肤三板块全新发布《SMI社媒心智品牌榜》。 2.圣罗兰、兰蔻、欧莱雅等法国高端美妆大牌垄断美妆《SMI社媒心智品牌榜》前三甲。 3.彩妆Top20榜单中&#xff0c;底妆产品稳居前列&#xff0c;色彩美妆占据一席之地。 4.护肤TOP…...

链式哈希,一致性哈希,倒排表

在普通的查询中&#xff0c;通过关键码的比较进行查找&#xff0c;而哈希是根据关键码直接定位到数据项 哈希冲突&#xff1a;同一个关键码经过哈希函数后指向同一个记录集 链式哈希 using namespace std; #define M 13 typedef int KeyType; //typedef struct //{ // KeyTyp…...

Python操作XML教程:读取、写入、修改和保存XML文档

目录 导入所需模块解析XML文档获取元素遍历XML文档写入新的元素修改元素的内容和属性删除元素保存修改后的XML文档示例演示python操作xml的常用方法 XML是一种常见的数据交换格式&#xff0c;在许多应用中都被广泛使用。通过掌握Python操作XML的基础知识&#xff0c;您将能够轻…...

Oracle数据库中了locked1勒索病毒,用友nchome配置文件损坏该如何解除

随着互联网技术的不断发展&#xff0c;网络安全问题也越来越受到人们的关注。其中&#xff0c;勒索病毒是一种比较常见的网络安全威胁。最近很多集团企业在使用Oracle数据库的过程中&#xff0c;遭遇到了locked1勒索病毒的攻击&#xff0c;导致企业的用友nchome配置文件损坏&am…...

leecode 数据库: 602. 好友申请 II :谁有最多的好友

数据导入&#xff1a; Create table If Not Exists RequestAccepted (requester_id int not null, accepter_id int null, accept_date date null); Truncate table RequestAccepted; insert into RequestAccepted (requester_id, accepter_id, accept_date) values (1, 2, 20…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

JavaScript 标签加载

目录 JavaScript 标签加载script 标签的 async 和 defer 属性&#xff0c;分别代表什么&#xff0c;有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...