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

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. Oracle 11g安装，新建表空间和用户

    windows版: 官网下载,两个压缩包,总共2G,解压到同一个文件夹下,setup.exe双击执行,首次安装的话,一直下一步就可以了,最后一步可能时间比较长,等着就好了,一般性能的机器大概要半小时左 ...

  2. Google Mesa概览

    Google Mesa的文章:https://research.google.com/pubs/pub42851.html  https://gigaom.com/2014/08/07/google- ...

  3. php分享二十四：数组

    1:isset() 对于数组中为 NULL 的值不会返回 TRUE,而 array_key_exists() 会. 2:利用array_filter和strlen快速过滤数组中等于0的值 $path ...

  4. Java常考面试题(一)

    序言 我是一只乱飞乱撞的菜鸟,写的文章目前是以记录自己学习,和方便以后查看,期待日后不久能通过自己的努力,获得一点小小的成功,然后写出我的学习经验总结性文章来. ---WH 一.什么是虚拟机?为什么J ...

  5. Merge into 详细介绍

    /*Merge into 详细介绍 MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句. 通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询, 连接条 ...

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

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

  7. linux命令（39）：shell 打印偶数行，奇数行 ,行号

    awk 命令: 1. 打印行号和内容: awk '{print NR":"$0}' 2. 输出:偶数行和奇数行到文件 awk '{print $0.txt > NR%2.tx ...

  8. Spark(Hive) SQL中UDF的使用（Python）【转】

    相对于使用MapReduce或者Spark Application的方式进行数据分析,使用Hive SQL或Spark SQL能为我们省去不少的代码工作量,而Hive SQL或Spark SQL本身内 ...

  9. Leetcode: Remove Duplicates from Sorted List II 解题报告

    Remove Duplicates from Sorted List II Given a sorted linked list, delete all nodes that have duplica ...

  10. Lintcode: Subarray Sum 解题报告

    Subarray Sum 原题链接:http://lintcode.com/zh-cn/problem/subarray-sum/# Given an integer array, find a su ...