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. 升级CentOS 7.4内核版本--升级到最新

    在实验环境下,已安装了最新的CentOS 7.4操作系统,现在需要升级内核版本.实验环境 CentOS-7-x86_64-Minimal-1708.isoCentOS Linux release 7. ...

  2. Django ORM相关的一些操作

    一般操作 看专业的官网文档,做专业的程序员! 必知必会13条 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 ...

  3. Linux Centos7 离线安装docker 【官网翻译和注释】

    Centos7的Docker安装 需要一个维护版本的centos7,所以6不行. 卸载旧版本 旧版本的docker被称为 docker or docker-engine 如果存在请删除它们. sudo ...

  4. hdu 2767 强连通缩点处理加边问题

    #include <cstring> #include <cstdlib> #include <cstdio> 缩点的好处就是可以将乱七八糟的有向图 转化为无环的有 ...

  5. C#使用phantomjs，爬取AJAX加载完成之后的页面

    1.开发思路:入参根据apiSetting配置文件,分配静态文件存储地址,可实现不同站点的静态页生成功能.静态页生成功能使用无头浏览器生成,生成之后的字符串进行正则替换为固定地址,实现本地正常访问. ...

  6. ActiveMQ入门系列之应用：Springboot+ActiveMQ+JavaMail实现异步邮件发送

    现在邮件发送功能已经是几乎每个系统或网址必备的功能了,从用户注册的确认到找回密码再到消息提醒,这些功能普遍的会用到邮件发送功能.我们都买过火车票,买完后会有邮件提醒,有时候邮件并不是买完票立马就能收到 ...

  7. datatable 写入excel 2007

    1 添加引用: NPOI NPOI.OOXML 2 private static void GenerateFile(DataTable dt) { DataSet ds = new DataSet( ...

  8. BPM软件_K2再度入选Gartner iBPMS MQ挑战者象限_全球领先的工作流引擎

    在Gartner 于1月最新发布的2018 iBPMS MQ报告中,K2再度入选“挑战者”象限,相较去年,K2在“前瞻性”方面有了显著提升. Gartner对该标准的定义为:供应商对市场具有清晰认识, ...

  9. 利用django 实现个人博客 全记录（二）

    上一篇文章已经把基础环境搭建好了 一  创建app D:\学习\python3.7.3\python manage.py startapp blog 修改 博客的 models.py ) ) def ...

  10. C#验证控件使用方法及常用正则表达式例析(转)

    ASP.NET为开发人员提供了一整套完整的服务器控件来验证用户输入的信息是否有效.这些控件如下: 1.RequiredFieldValidator:验证一个必填字段,如果这个字段没填,那么,将不能提交 ...