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实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
DOM精简教程
2006/10/03 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
python网络编程之读取网站根目录实例
2014/09/30 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
详解如何设置Python环境变量?
2019/05/13 Python
python输出决策树图形的例子
2019/08/09 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
广播体操比赛口号
2014/06/10 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
迎新生标语大全
2014/10/06 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
小学运动会前导词
2015/07/20 职场文书