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. hdu 6053 trick gcd 容斥

    http://acm.hdu.edu.cn/showproblem.php?pid=6053 题意:给定一个数组,我们定义一个新的数组b满足bi<ai 求满足gcd(b1,b2....bn)&g ...

  2. android-studio-ide 安装到运行第一个helloword,坑记录

    1: 安装是提示  机器虚拟化问题,系统如开启了Hyper-V,必须关闭服务 2:安装完后,建立第一个项目,gradle build 一直转圈,最后报错 Gradle project sync fai ...

  3. SpringBoot与缓存、消息、检索、任务、安全与监控

    一.Spring抽象缓存 Spring从3.1开始定义了org.springframework.cache.Cache和org.springframework.cache.CacheManager接口 ...

  4. seaborn:一个更强大的画图工具

    数据加载: 1. Countplot 和之前的pandas绘图相比,使用countplot可以自动计算每类的数量. 2. KDE Plot KDE,是"kernel density esti ...

  5. 许愿墙JQ

    <!doctype html> <html> <head>     <meta charset="utf-8">     <t ...

  6. asp.net 简单的身份验证

    1 通常我们希望已经通过身份验证的才能够登录到网站的后台管理界面,对于asp.net 介绍一种简单的身份验证方式 首先在webconfig文件中添加如下的代码 <!--身份验证--> &l ...

  7. QT版本下载链接

    http://download.qt.io/archive/qt/

  8. gradle安装教程

    https://blog.csdn.net/andwey/article/details/92800650 https://www.cnblogs.com/Jimc/p/10081605.html

  9. django请求周期和请求信息

    Django的请求周期 1,概述 首先我们知道HTTP请求及服务端响应中传输的所有数据都是字符串. 在Django中,当我们访问一个的url时,会通过路由匹配进入相应的html网页. 那么: Djan ...

  10. seaborn图形

    kdeplot(核密度估计图) 核密度估计(kernel density estimation)是在概率论中用来估计未知的密度函数,属于非参数检验方法之一.通过核密度估计图可以比较直观的看出数据样本本 ...