jQuery操作属性和样式详解


Posted in Javascript onApril 13, 2016

• 区分 DOM 属性和元素属性

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

通常开发人员习惯将id,src,alt等叫做这个元素的"属性"。我们将其称为"元素属性"。但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象", 并且将元素的"元素属性"存储为"DOM 属性",两者是有区别的。

甚至有些"元素属性"和"DOM 属性"的名称都不一样,比如上面的元素属性 class, 转换为 DOM 属性后对应 className。

牢记, 在 javascript 中我们可以直接获取或设置"DOM 属性":

<script type="text/javascript">
  $(function() {
    var img1 = document.getElementById("hibiscus");
    alert(img1.alt);
    img1.alt = "Change the alt element attribute";
    alert(img1.alt);
    img1.className = "classB";
  })
</script>

所以如果要设置元素的 CSS 样式类, 要使用的是 DOM 属性"className"而不是元素属性"class"。
--------------------------------------------------------------------------------
•操作"Dom 属性"

在 jQuery 提供了each()函数用于遍历 jQuery 包装集,其中的this指针是一个 DOM 对象,所以我们可以应用这一点配合原生 javascript 来操作元素的 DOM 属性:

$("img").each(function(index) {
   alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
   this.alt = "changed";
   alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
 });

•操作"元素属性"

我们可以使用 javascript 中的getAttribute和setAttribute来操作元素的"元素属性"。在 jQuery 中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性:

jQuery操作属性和样式详解

虽然我们可以使用removeAttr(name)删除元素属性,但是对应的 DOM 属性是不会被删除的, 只会影响 DOM 属性的值.比如将一个input元素的readonly元素属性去掉,会导致对应的 DOM 属性变成false(即input变成可编辑状态).

•修改 CSS 类和样式

下表是修改 CSS 类相关的 jQuery 方法:

jQuery操作属性和样式详解

注意addClass(class)和removeClass(classes)的参数可以一次传入多个 css 类, 用空格分割。removeClass 方法的参数可选, 如果不传入参数则移除全部 CSS 类。

同样当我们想要修改元素的具体某一个 CSS 样式,即修改元素属性"style"时, jQuery 也提供了相应的方法:

jQuery操作属性和样式详解

• 获取常用属性

<!doctype html>
<html lang="zh">
<head>
 <meata charset="utf-8"/>
 <title>get object width</title>
 <script src="jquery-1.11.2.min.js"></script>
 <script>
  $(function() {
   alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined
   alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff)
   alert("width():" + $("#testDiv").width()); //正确的数值 1264
   alert("style.width:" + $("#testDiv")[0].style.width); //空值
  })
 </script>
</head>
<body>
 <div id="testDiv">test text</div>
</body>
</html>

我们希望获取测试图层的宽度,使用 attr 方法获取"元素特性"为 undefined, 因为并没有为 div 添加 width。而使用 css()方法虽然可以获取到 style 属性的值, 但是在不同浏览器里返回的结果不同,IE6 下返回 auto,而 FF 下虽然返回了正确的数值但是后面带有"px"。所以 jQuery 提供了 width()方法,此方法返回的是正确的不带 px 的数值。

针对上面的问题,jQuery 为常用的属性提供了获取和设置的方法,比如 width()用户获取元素的宽度,而 width(val)用来设置元素宽度。

下面这些方法可以用来获取元素的常用属性值:

1. 宽和高相关 Height and Width

jQuery操作属性和样式详解     jQuery操作属性和样式详解

outerWidth 可以接受一个 bool 值参数表示是否计算 margin 值。

2. 位置相关 Positioning

jQuery操作属性和样式详解

以上这篇jQuery操作属性和样式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
Mac下安装vue
Apr 11 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 #Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 #Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 #Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 #Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 #Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 #Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
Python读写Redis数据库操作示例
2014/03/18 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
python中提高pip install速度
2020/02/14 Python
python中线程和进程有何区别
2020/06/17 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
班队活动设计方案
2014/01/30 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
大学班级计划书
2014/04/29 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android