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

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. python 2 python3 共存

    步骤: 1.安装python3 并添加环境变量2.修改python3 目录下文件名:修改python.exe 为python3.exe, 修改pythonw.exe 为pythonw3.exe C:\ ...

  2. 基于数据库构建分布式的ID生成方案

    在分布式系统中,生成全局唯一ID,有很多种方案,但是在这多种方案中,每种方案都有有缺点,下面我们之针对通过常用数据库来生成分布式ID的方案,其它方法会在其它文中讨论: 1,RDBMS生成ID: 这里我 ...

  3. es 模板

    { "template": "log*", "order":10, "settings": { "index& ...

  4. 将视频转换为 HLS(HTTP Live Streaming) 协议格式文件

    就是将视频文件转码(H264+ACC).分片(n个.ts文件).生成列表(.m3u8) 方便网站提供视频播放服务,提升加载速度,节省流量. 1.准备好源视频文件. 2.下载 ffmpeg(http:/ ...

  5. 读取word到二进制，再转成word

    static void Main(string[] args) { try { var strParams = new Dictionary<string, string>(); stri ...

  6. hdu 1217 Arbitrage (最小生成树)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1217 /************************************************* ...

  7. SQL server 存储过程实现统计赋值

    @EmptyCount int output 参数 declare  @strCount nvarchar(max); 声明变量 取值语句: set @strCount='select @Count= ...

  8. vim学习日志（8）：linux查看和修改文件编码

    查看文件的编码 方法一: 1.在Vim中可以直接查看文件编码:set fileencoding即可显示文件编码格式.注:如果你只是想查看其它编码格式的文件或者想解决用Vim查看文件乱码的问题,那么你可 ...

  9. 【嵌入式】S3C2410平台移植linux 2.6.14内核

    小续 第一次接触内核的东西,有点小激动啊 激动归激动,这实验还是要继续做下去,书上三两句话就带过去的,剩下的就留给我们了,着实考验动手能力啊 当编译过内核之后,发现这个过程也不复杂嘛(复杂的是内核的配 ...

  10. pom.xml里发布和下载包

    1.下载包 在<project>标签中 <repositories> <repository> <id>nexus</id> <url ...