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

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（八）：属性操作的更多相关文章

  1. jquery之属性操作

    jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...

  2. 前端 ----jQuery的属性操作

    04-jQuery的属性操作   jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...

  3. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  4. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  5. jQuery系列（四）：jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  6. JQuery常用属性操作，动画，事件绑定

    jQuery 的属性操作        html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.        text() 它可以设置和获取起始标签和 ...

  7. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  8. jQuery的属性操作

    下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...

  9. 前端jQuery之属性操作

    属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置 ...

  10. 19 01 16 jquery 的 属性操作 循环 jquery 事件 和事件的绑定 解绑

    jquery属性操作 1.html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').htm ...

随机推荐

  1. maven依赖包冲突解决办法

    今天在写一个demo时报了以下错误 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding /slf4j-lo ...

  2. 如何获取 XAML 控件的模板代码

    有时候 .NET 自带提供的控件并不能满足我们的实际需求,需要进行修改,或者参考代码来建立新的控件. 可以在编辑器的文档大纲窗口中,找到所需的对象,然后在其上点右键,编辑模板,编辑副本 弹出创建 St ...

  3. Android 版本对于 API

    Android版本 API 代号 官网链接 Android 2.3.3 API 10 Gingerbread 官网 Android 3.0 API 11 Android 3.1 API 12 Andr ...

  4. c++中c_str()用法

    string c="abc123"; ]; strcpy(d,c.c_str()); cout<<"c:"<<c<<endl ...

  5. MSSQL分组取后每一组的最新一条记录

    数据库中二张表,用户表和奖金记录表,奖金记录表中一个用户有多条信息,有一个生效时间,现在要查询: 奖金生效时间在三天前,每个用户取最新一条奖金记录,且用户末锁定 以前用的方法是直接写在C#代码中的: ...

  6. prometheus-dashboard-to-grafana

    https://prometheus.io/docs/visualization/grafana/ https://www.digitalocean.com/community/tutorials/h ...

  7. 银联在线支付B2C UnionPay.NET

    新春即将来临,首先给大家拜个早年,祝攻城狮们新年快乐.万事如意.合家欢乐.团团圆圆.幸福健康.来年更能大展宏图 实现各自的梦想! 同时预祝各大科技公司大佬们事业蒸蒸日上.公司转型突破创新.冲出突围带领 ...

  8. Tornado使用-队列Queue

    1.tornado队列的特点 和python标准队列queue相比,tornado的队列Queue支持异步 2.Queue常用方法 Queue.get() 会暂停,直到queue中有元素 Queue. ...

  9. 【web技术】html特效代码（一）

    小续 还记得当初和八哥一起制作百家成员chm电子书的时候,各种特效啊,这里收集了一些个人比较喜欢的html特效,看个人喜欢了,不喜勿喷啊 html特效代码(一) html特效代码(二) 3D相册代码 ...

  10. asp.net上传大文件-请求筛选模块被配置为拒绝超过请求内容长度的请求

    HTTP错误404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求,原因是Web服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(IIS 7 默认文件上传大 ...