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. Spring实战（五）Spring中条件化地创建bean

    1.@Conditional 为生成bean设置条件 Spring 4中引入了一个新的注解---@Conditional,它用在有@Bean的方法上. 如果给定条件计算结果为true,Spring会创 ...

  2. String的equals和hashCode方法

    对于判断对象是否相等,肯定需要重写它的equals和hashCode方法.不然使用默认的方法只会比较地址,因此会出现错误. 以String类为例,且看它的equals方法 public boolean ...

  3. C++反汇编第五讲,认识C++中的Try catch语法,以及在反汇编中还原

    我们以前讲SEH异常处理的时候已经说过了,C++中的Try catch语法只不过是对SEH做了一个封装. 如果不懂SEH异常处理,请点击博客链接熟悉一下,当然如果不想知道,也可以直接往下看.因为异常处 ...

  4. c# 自定义解析JSON字符串数据

    解析json字符串有很多方式, 1 : 在网上下载json解析的dll类库并添加引用, 调用相关方法; 2 : 使用自带类库JavaScriptSerializer的序列号和反序列化; 对于以上两个方 ...

  5. Google开源项目风格指南

    Google开源项目风格指南 来源 https://github.com/zh-google-styleguide/zh-google-styleguide Google 开源项目风格指南 (中文版) ...

  6. HTTP请求方式及其区别

    一.请求方式 所有的请求都可以给服务器传递内容,也可以从服务器获取内容. GET:从服务器获取数据(给的少拿的多) POST:向服务器推送数据(给的多拿的少) DELETE:删除服务器的一些内容 PU ...

  7. base64转换成文件图片

    最近搞小程序分享画布遇到的坑 canvas drawImage 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.ge ...

  8. vue 项目文件流数据格式转blob图片预览展示

    为了图片安全性,有时候上传图片后后台不会直接返回图片地址,会返回文件流的数据格式,这种格式需要处理下才能展示在页面上   // 使用axios请求上传接口 axios({ method: 'get', ...

  9. IDEA乱码总结和处理

    工程乱码 打开File-Setting, 找到File Encodings这个选项,把encoding设置成你工程的编码即可,一般是UTF-8,如下图(红框的地方),然后重新rebuild一下,基本就 ...

  10. python django中的orm外键级联删除

    今天添加了一个路由表,路由表做外键,然后添加了几个组,路由表为组的外键,当我使用删除功能对路由表进行删除时,竞然将我的组也相当的删除了:尽管这是测试,但放到生产环境中还是会发生意外的:这个问题要解决: ...