jQuery的属性操作， 是对html文档中的属性进行读取、设置和移除操作。比如，attr()、 removeAttr()。

1. attr()

attr()可以设置属性值或者返回被选元素的属性值

1.1 使用attr()获取值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>attr()获取值</title>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

          $(function () {

              var cla = $("div").attr("class");

              console.log(cla);

              var id = $("div").attr("id");

              console.log(id);

          })

     </script>

 </head>

 <body>

     <div class="divClass" id="divId"></div>

 </body>

 </html>

结果为：

1.2 使用attr()设置值

　　1.2.1 使用attr()设置一个值

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>attr() Demo</title>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

        $(function () {

            $("div").attr("class", "box");

        })

    </script>

</head>

<body>

    <div></div>

    <div></div>

</body>

</html>

结果显示为：

　　1.2.2 使用attr()设置多个值

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>attr() Demo</title>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

        $(function () {

            $("div").attr({

                "class": "divClass",

                "id": "divId"

            });

        })

    </script>

</head>

<body>

    <div></div>

</body>

</html>

设置效果为:

2. removeAttr()

移除属性

2.1 删除单个属性

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>removeAttr() Demo</title>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

        $(function () {

            $("div").removeAttr("class");

            $("div").removeAttr("id");

        })

    </script>

</head>

<body>

    <div class="divClass" id="divId"></div>

</body>

</html>

设置效果为：

2.2 removeAttr()设置多个属性值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>removeAttr() Demo</title>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             $("div").removeAttr("class id");

         })

     </script>

 </head>

 <body>

     <div class="divClass" id="divId"></div>

 </body>

 </html>

显示结果为：

jQuery属性操作之html属性操作的更多相关文章

  1. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  2. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  4. Jquery中animate可以操作css样式属性总结

    可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

  5. 【jQuery】总结:筛选器、控制隐藏、操作元素style属性

    筛选器 -> http://blog.csdn.net/lijinwei112/article/details/6938134 常用到的: $("tr[id=ac_"+id+ ...

  6. 使用jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  7. JQuery操作元素的属性与样式及位置 复制代码

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

  8. 《从零开始学习jQuery》：用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  9. JQuery操作元素的属性与样式及位置

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

  10. Jquery框架1.选择器|效果图|属性、文档操作

    1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. Codeforces 1247F. Tree Factory

    传送门 正难则反,把链操作成树不好想,那么考虑一下如何把树变成链 每次操作相当于把一个兄弟变成儿子(我把你当兄弟你竟然想把我当儿子.jpg) 注意到每次操作最多只能使树的深度增加 $1$ 因为链的深度 ...

  2. django+uwsgi+nginx: websock 报502/400

    耽搁了近2个月,终于解决了,主要是nginx/uwsgi/django相关的配置: 一.django工程settings.py,添加 WEBSOCKET_FACTORY_CLASS = "d ...

  3. CSS设置元素的隐藏和显示

    常见的三种方式 display display: none 隐藏对象 display: block 除了转换为块级元素以外,同时还有显示元素的意思 特点:隐藏之后不保留位置 visibility 值h ...

  4. java oop 基础

    1.如果将一个类打包,使用该类的时候,必须使用该类的全名,java编译器才能找到. 2.也可以使用import 导入这个包. 3.可以不需要import语句 直接使用 java.lang包中的类. 4 ...

  5. MySQL的sql_mode参数之NO_AUTO_VALUE_ON_ZERO对主键ID为0的记录影响

    最近遇到一个不合理使用数据库进行项目开发最终导致项目进度受阻的一个问题,某天几位开发人员找到我并告知数据库中某张表数据无法写入,又告知某行记录被删除了,因为被删除的记录对开发框架影响很大,他们已尝试重 ...

  6. 打印n对括号的全部有效组合（左右括号正确匹配）Java实现

    一.问题导出 今天在做算法题目的时候遇到了一道左右括号匹配的问题,问题如下: 二.问题思考 (1)这种要列出全部可能性的题目很容易想到由小到大去发现规律,用递归或者暴力搜索. 首先1的情况,一个括号只 ...

  7. Win10系统Edge浏览器怎么截取网页长图？

    有时我们在工作演示时会需要截取网页上的图片,不过简单的截图可以,但如果需要截取超过屏幕大小的整个网页,你是不是就有些束手无策了.虽然拼接图片也是种方法,但毕竟还是不方便,下面好系统重装助手就教你在Wi ...

  8. 5.安装bacula-web（监控页面）

    1.   安装bacula-web(监控页面) 用途:监控bacula状态. http://docs.bacula-web.org/en/master/index.html bacula-web-7. ...

  9. 如何正确清理C盘？

    Windows电脑操作系统一般是安装在磁盘驱动器的C盘中,一旦运行,便会产生许多垃圾文件,C盘空间在一定程度上都会越来越小.伴随着电脑工作的时间越久,C盘常常会提示显示其内存已不足.那么C盘容量不足对 ...

  10. 01 数据库sql

    1, 关于mysql,常去的地方有:https://www.yiibai.com/mysql, http://tool.oschina.net/apidocs/apidoc?api=mysql-5.1 ...