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 获取滚动条位置等信息的函数
Sep 08 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
JS实现简单随机3D骰子
Oct 24 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+MySQL 制作简单的留言本
2009/11/02 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
python编程开发之日期操作实例分析
2015/11/13 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Python使用xpath实现图片爬取
2020/09/16 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
Django 实现图片上传和下载功能
2020/12/31 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
单位实习证明怎么写
2014/01/17 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
大学学生个人总结
2015/02/15 职场文书