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. .Net C# EF database first connectionstring

    <connectionStrings> <add name="CupCreditCheckDB" connectionString="metadata= ...

  2. TCP协议探究（四）：定时器

    1 概述 重传定时器:使用于当希望收到另一端的确认. 坚持(persist)定时器:使窗口大小信息保持不断流动,即使另一端关闭了其接收窗口 保活(keepalive)定时器:用于检测一个空闲连接的另一 ...

  3. Fiddler 基础

    Fiddler 基础 来源 https://blog.csdn.net/ohmygirl/article/details/17855031 1.为什么是Fiddler? 抓包工具有很多,小到最常用的w ...

  4. SvcUtil.exe工具生成客户端代理类

    1.以管理员身份运行vs下命令工具: 2.运行代码示例:C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Bin>svcutil http: ...

  5. Hexo折腾记--小白修改新主题

    UPDATE 2019.5.28 不好意思我又换了个新主题ARIA啦...这回没有个人定制了 前言 如果您曾经来过我的博客,就会发现我的个人博客(https://rye-catcher.github. ...

  6. 简单SQL注入试探、一

    DVWA——简单SQL注入小记 前不久刚开始接触SQL注入,今天来记录一些最近的一些收获和一些SQL注入方面的知识. 主要是基于DVWA这个开源的平台来进行练习. 废话不多说开始解题. 从简单的SQL ...

  7. 用Leangoo看板进行可视化的缺陷跟踪管理

    转自:https://www.leangoo.com/10464.html 缺陷管理通常关注如下几个方面: 1. 缺陷的处理速度 2. 缺陷处理的状态 3. 缺陷的分布 4. 缺陷产生的原因 使用Le ...

  8. Webstorm2017.3.3软件的安装使用

    下载 ▶进入jetbrains的官方网站点击download,即下载开始.官方网站链接:http://www.jetbrains.com/webstorm/ 安装 ▶双击刚下载完成的.exe文件开始进 ...

  9. 解决maven 引用JDK内部类编译错误 程序包：com.sun.xml.internal.bind.marshaller.CharacterEscapeHandler不存在

    当maven项目里面有用到JDK内部的一些类或者接口的时候,用maven编译一般会出现如下错误: 程序包:com.sun.xml.internal.bind.marshaller.CharacterE ...

  10. vscode 踩坑汇总

    gopls 提示 update 将 "go.useLanguageServer": true 改为 "go.useLanguageServer": false