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

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. 看MySQL官方文档的示例SQL有感

    [背景] 周末比较闲,我这个人又没有什么爱好,当然了读书除外:前一些天我一个同事说:“你一个dba想去写一本“django”书,合适吗?” 我想也是,一个人不能忘了本,所以MySQL还是要好好的搞一搞 ...

  2. highlightjs 详解

    起源: 最近想做一个代码高亮的功能.发现开源社区已经有了这类的项目.比如说highlightjs. 第一步:下载highlightjs 官网:https://highlightjs.org 可以看到它 ...

  3. 3dmax，查看场景中所有材质

  4. HTML常用模板：用DIV实现网站首页、后台管理首页（整理）

    1. 说明 网上下载的模板,用DIV实现页面模块之间的分隔(不是用frameset/frame).可以选择有无header/menu/footer,主体如何等等.删除了几个我认为重复的.重新命名而已. ...

  5. 浏览器中beforeunload的使用

    打开一些慢的网站的时候只见浏览器在不停转圈,但是页面还停留在当前页面的,有些网站的效果是你点击链接要跳到另一个页面的时候,在当前页面弹出一个框提示“正在加载中....”, 用到了浏览器的beforeu ...

  6. iPhone:动态获取UILabel的高度和宽度

    转自:http://www.cnblogs.com/spiritstudio/archive/2011/11/17/2252074.html 在使用UILabel存放字符串时,经常需要获取label的 ...

  7. [Windows Azure] Create and use a reporting service in Windows Azure SQL Reporting

    Create and use a reporting service in Windows Azure SQL Reporting In this tutorial you will learn ab ...

  8. [Windows Azure] Load Testing in Windows Azure

    The primary goal of a load test is to simulate many users accessing a web application at the same ti ...

  9. python（47）：range和xrange的区别和联系

    range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列. 比如: >>> range(5)[0, 1, 2, ...

  10. Asp.Net导出文件名中文乱码

    Asp.Net导出word为例,Excel等其他文件也一样 protected void Page_Load(object sender, EventArgs e) {string html = “网 ...