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. 关于DB2的使用（DB2数据命令）

           公司所用的数据库有金仓和DB2 首先要用命令窗口直接打开db2需要在cmd中输入:db2cmd 1:启动DB2数据库:db2start 2:连接数据库:db2 connect to  数 ...

  2. 【转载】Jmeter接口测试+压力测试

     jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单.因为jmeter是java开发的,所以运行的时候必须先要 ...

  3. hdu 6058 思维

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=6058 分析题目的时候,由于枚举的区间很多,而第k大的值范围小,应该要想到去枚举第k大的值然后找到这个值对答 ...

  4. 启动tomcat提示某个端口被占用

    原文参见:https://www.cnblogs.com/liuyanxia/p/6755520.html 解决办法 找出占用1099端口的进程,进入windows命令,查看什么进程占用了1099端口 ...

  5. 爬虫遇到IP访问频率限制的解决方案

    背景: 大多数情况下,我们遇到的是访问频率限制.如果你访问太快了,网站就会认为你不是一个人.这种情况下需要设定好频率的阈值,否则有可能误伤.如果大家考过托福,或者在12306上面买过火车票,你应该会有 ...

  6. JS的一些简单基础运算题

    1.输入一个四位数,在控制台分别显示个位,十位,百位,千位的数值 var a = prompt("请输入一个四位数的正整数"); var b = parseInt(a/1000); ...

  7. css三大特性及权重说明

    一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...

  8. bootstrap 处理警告

    $("#id").bootstrapValidator({}).on('success.field.bv', function (e, data) { })

  9. 三、DQL语言

    目录 一.基础查询 (一)语法 (二)特点 (三)示例 二.条件查询 (一)语法 (二)筛选条件的分类 三.排序查询 (一)语法 (二)特点 四.常见函数 (一)介绍 (二)分类 五.单行函数 (一) ...

  10. go语言怎么从（json后的）多层map中取值

    // 一个PHP中的多层关联数组,即Go中的多层map,如何从json字符串中解析,然后取到map中的某个具体的值. // 数据结构如下: cityInfo := "{ "stat ...