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

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. php实现ZIP压缩文件解压缩(转)

    测试使用了两个办法都可以实现: 第一个:需要开启配置php_aip.dll <?php //需开启配置 php_zip.dll //phpinfo(); header("Content ...

  2. cnetos7最小化安装ifconfig命令找不到怎么办

    我们在安装完centos7最小化系统安装完成后,执行ifconfig命令会报命令未找到.实际上在centos7上,使用“ip addr”和“ip link”命令来查找网卡详情.ifconfig命令已经 ...

  3. react-native react-navigation使用

    npm install react-navigation --save 安装 代码中引入StackNavigator组件   5CF902D1-9639-494D-8775-A9A87F376734. ...

  4. MySQL 自带工具使用介绍

    MySQL 数据库不仅提供了数据库的服务器端应用程序,同时还提供了大量的客户端工具程序,如mysql,mysqladmin,mysqldump 等等,都是大家所熟悉的.虽然有些人对这些工具的功能都已经 ...

  5. 关于 NSInvocation

    Invocation   调用的意思. 可想而知NSInvocation 是一个 方法调用 封装的类. 这体现了  面向对象的思想, 及一切皆对象.函数也不例外. 一般编程中,应该很少用到这个. 但是 ...

  6. Eclipse_Configure

    原文链接:http://android.eoe.cn/topic/android_sdk 1. 下载Eclipse 在前面我们配置好了JDK环境后,就可以开始配置Android的集成开发环境了,官方G ...

  7. Android应用一般上架流程

    Android App上架所需文件 上架准备  App文件: 1. 安装包 2. 应用商标:图片格式KB. 3. 应用截图(4~6张):图片格式JPG或者PNG.图片大小480*800,且每张大小一致 ...

  8. 【Unity】6.3 通过 C# 脚本创建和访问游戏对象

    分类:Unity.C#.VS2015 创建日期:2016-04-16 一.简介 在游戏开发过程中,脚本不但需要访问脚本所在的游戏对象的组件,还经常需要访问和控制真他游戏对象.另外,根据项目需求,还可能 ...

  9. 菜鸟学数据库（六）——方便快捷的开启、关闭Oracle服务

    背景: 作为一个程序员,在日常的工作中,我们电脑经常需要同时运行很多程序,如:Eclipse.浏览器.即时通讯软件等,甚至经常需要打开几个Office文档或者pdf文档.这时候你的内存估计已经爆表了吧 ...

  10. nginx源码分析：打开监听套接字的流程

    问题源于在分析nginx的源码时,找了半天没有找到nginx是怎么把监听套接字读事件添加到事件循环中的,后经过仔细的分析,终于搞明白,于是记录一下. 在上一篇module机制中介绍了nginx添加mo ...