jQuery操作属性值方法介绍

2024-04-02 19:04:59 276人浏览八月长安

摘要

一、获取或设置元素的属性值 attr()获取或设置匹配元素的属性值，语法如下：获取元素属性值示例： <!DOCTYPE html> <html lang="en

一、获取或设置元素的属性值

attr()获取或设置匹配元素的属性值，语法如下：

获取元素属性值示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta Http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性操作</title>
    <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      td{
          width: 100px;
          border: 1px solid #cccccc;
          cursor: pointer;
      }
    </style>
    <!--引入Jquery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           $("img").click(function(){
              // 获取属性的值
              alert($("img").attr("src")) ;              
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

设置单个元素属性值示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性操作</title>
    <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      td{
          width: 100px;
          border: 1px solid #cccccc;
          cursor: pointer;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           $("img").click(function(){
              // 获取属性的值
              //alert($("img").attr("src")) ; 

              // 添加单个属性
              $("img").attr("alt","QQ斗地主"); 
              alert($("img").attr("alt")) ;             
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

添加多个属性值示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性操作</title>
    <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      td{
          width: 100px;
          border: 1px solid #cccccc;
          cursor: pointer;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           $("img").click(function(){
              // 获取属性的值
              //alert($("img").attr("src")) ; 

              // 添加单个属性
              //$("img").attr("alt","QQ斗地主"); 
              //alert($("img").attr("alt")) ;

              // 添加多个属性
              $("img").attr({"alt":"QQ斗地主","title":"斗地主"}); 
              console.log($(this).attr("alt")); 
              console.log($(this).attr("title"));            
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

二、删除属性值

removeAttr()匹配的元素中删除一个属性，语法如下：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性操作</title>
    <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      td{
          width: 100px;
          border: 1px solid #cccccc;
          cursor: pointer;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           $("img").click(function(){
              // 获取属性的值
              //alert($("img").attr("src")) ; 

              // 添加单个属性
              //$("img").attr("alt","QQ斗地主"); 
              //alert($("img").attr("alt")) ;

              // 添加多个属性
              //$("img").attr({"alt":"QQ斗地主","title":"斗地主"}); 
              //console.log($(this).attr("alt")); 
              //console.log($(this).attr("title")); 

              // 删除属性
              $(this).removeAttr("src");           
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

到此这篇关于jQuery操作属性值的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery操作属性值方法介绍

本文链接: https://www.lsjlt.com/news/142177.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

jQuery操作属性值方法介绍

一、获取或设置元素的属性值 attr()获取或设置匹配元素的属性值，语法如下：获取元素属性值示例： <!DOCTYPE html> <html lang="en...

99+

2022-11-13
jQuery操作value值方法介绍

val()可以获取或设置元素的value属性值。语法如下：示例： <!DOCTYPE html> <html lang="en"> <head>...

99+

2022-11-13
jQuery操作文本方法介绍

text()可以获取或设置元素的文本内容。例如：示例： <!DOCTYPE html> <html lang="en"> <head> ...

99+

2022-11-13
jQuery操作HTML代码方法介绍

html()可以对HTML代码进行操作，类似于元素JavaScript中的innerHTML。例如：示例： <!DOCTYPE html> <html lan...

99+

2022-11-13
jQuery样式操作方法整理介绍

目录1.操作css方法2.设置样式类方法2.1添加类2.2移除类2.3切换类3.tab栏切换案例实现效果案例分析核心代码html结构4.jQuery类操作与className区别1....

99+

2022-11-13

jQuery样式操作方法 jQuery样式操作函数 jQuery样式操作
C#操作进程的方法介绍

进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。在早期面向进程设计的计算机结构中，进程是程序的基本执行...

99+

2022-11-13
NodeJs操作MYSQL方法详细介绍

目录在项目中操作数据库的步骤安装与配置 mysql 模块1. 安装 mysql 模块2. 配置 mysql 模块3. 测试 mysql 模块能否正常工作使用 mysql 模块操作 M...

99+

2022-11-13
PHP5.0对象模型的属性和方法介绍

本篇内容主要讲解“PHP5.0对象模型的属性和方法介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“PHP5.0对象模型的属性和方法介绍”吧!今天我们向大家介绍的是关于PHP5.0对象模型的属性...

99+

2023-06-17
Mysql表的操作方法详细介绍

目录创建表查看表结构修改表删除表创建表语法: CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 ...

99+

2022-11-13
Bash Shell字符串操作方法介绍

这篇文章主要介绍“Bash Shell字符串操作方法介绍”，在日常操作中，相信很多人在Bash Shell字符串操作方法介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bash Shell字符串操作方法介绍...

99+

2023-06-09
HTML5的download属性详细介绍和使用方法

这篇文章主要介绍“HTML5的download属性详细介绍和使用方法”，在日常操作中，相信很多人在HTML5的download属性详细介绍和使用方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方...

99+

2022-10-19
C# 列表List的常用属性和方法介绍

1.创建列表 (列表可以存储任何类型的数据，在创建列表对象的时候首先要指定你要创建的这个列表要存储什么类型的)（泛型） //创建列表 //方法一 ...

99+

2022-11-12
python操作mysql数据库的方法介绍

下面讲讲关于python操作mysql数据库的方法，文字的奥妙在于贴近主题相关。所以，闲话就不谈了，我们直接看下文吧，相信看完python操作mysql数据库的方法这篇文章你一定会有所受益。 &n...

99+

2022-10-18
怎么修改css属性样式？常见方法介绍

在网页设计中，CSS样式表是不可避免的一部分。通过CSS样式表，我们可以对网页元素进行样式修改，以达到美化页面的目的，并提高用户体验。本文将介绍如何修改CSS属性。一、选择器首先，在修改CSS属性之前，我们需要了解选择器。在CSS样式表中，...

99+

2023-05-14
nodejs URL模块操作URL相关方法介绍

url模块处理HTTP请求时url模块使用率超高，因为该模块允许解析URL、生成URL，以及拼接URL。首先我们来看看一个完整的URL的各组成部分。 href -------------------...

99+

2022-06-04

模块操作方法
win10电脑自带录屏操作方法介绍

win10电脑自带录屏怎么使用针对有些用户来说是个难题，因为没有玩游戏的原因所以大部分这种用户不知道如何应用自带的录屏工具，其实对于win10的娱乐功能，微软就加入了录屏也有直播推流等功能的xbox部件，这儿就给这些不知道如何应用自带录屏功...

99+

2023-07-10
对command对象属性及其方法进行介绍说明

在Java中，Command对象是一个表示命令的抽象类，它用于封装一个操作的信息，包括命令的名称、参数等。Command对象可以用于...

99+

2023-09-22

command
python字符串常见使用操作方法介绍

目录1.字符串的驻留机制2.什么叫字符串的驻留机制3.字符串驻留机制的优缺点4.字符串的查询操作的方法4.1字符串的大小写转换操作的方法4.2字符串内容对其操作和方法4.3判断字符串...

99+

2022-11-13
Ajax中GET与POST请求操作方法梳理介绍

目录Ajax简介Ajax特点Ajax GET请求的基本操作Ajax GET请求的缓存问题Ajax POST请求的基本操作Ajax 设置请求头信息nodemon工具安装基于JSON的数...

99+

2022-11-13

Ajax GET请求 Ajax POST请求
Vista操作系统文件共享方法图文介绍

　　我们要把D盘中的名为Vista的文件夹共享的话，首先在该文件夹上点鼠标右键选择“共享”。系统将出现“文件共享”设置向导，首先是“选择要与其共享的用户&rdq...

99+

2023-06-02

Vista 操作系统文件共享方法图文