jQuery基础教程之DOM操作-样式操作
来源:互联网 发布:python时间毫秒数 编辑:程序博客网 时间:2024/06/05 22:35
jquery中提供了一系列的方法,让我们可以轻松地对DOM中的元素进行class的获取、设置、追加、移除、切换以及判断某个元素是否具有某个class。
- 获取、设置样式
这里就是利用attr()方法去设置和获取元素的的class属性,但是要注意这个通过attr()方法设置class属性和通过addClass()方法追加元素class属性的区别。 - 追加样式:addClass()
这个方法会为每个匹配的元素追加指定的样式。这个方法的用法有两个:- .addClass( className )
这里的className参数可以是一个样式也可以是两个或者多个。各个class名称之间用空格隔开。例如:1
$(
'p'
).addClass(
'myClass yourClass'
);
- .addClass( function(index, className) )
注意,这种用法是从1.4版本才开始加入的。
function(index,className)返回的值做为追加的class。其中index的值为当前元素在元素组中的索引值,className指向的是当前元素的原始class。
- .addClass( className )
- 移除样式:removeClass()
这个方法会为每个匹配的元素移除指定的样式。这个方法的用法有两个:- .removeClass( className )
这里的className参数可以是一个样式也可以是两个或者多个。各个class名称之间用空格隔开。例如:1
$(
'p'
).removeClass();
//不带参数的话,就是移除所有的样式
2
$(
'p'
).removeClass(
'myClass'
);
3
$(
'p'
).removeClass(
'myClass yourClass'
);
- .removeClass( function(index, className) )
注意,这种用法是从1.4版本才开始加入的。
function(index,className)返回的值做为要移除的class。其中index的值为当前元素在元素组中的索引值,className指向的是当前元素的原始class。
- .removeClass( className )
- 切换样式:toggleClass()
使用这个方法可以控制样式上的重复切换,它的用法到jquery1.4版本之后就有三种用法了。- .toggleClass( className )
如果类名存在则删除匹配元素中的该class,如果不存在则追加。 - .toggleClass( className, switch )
这种用方法是根据switch这个表达式计算的值是否为真,如果为真的话,就进行追加class。为假则移除。
可能这样说比较难以理解,大家还是看DEMO吧。 - .toggleClass(function(index, className),[switch])
关于这个方法里面的function(index, className)和前面addClass和removeClass的用法差不多。
switch是可选的参数,然后再根据switch这个表达式计算的值是否为真,如果为真的话,就进行追加class(function(index, className)这个函数返回的值)。为假则移除。
这种用法这样说,可能大家很难理解,其实我自己也不是很理解,也不知道能用到什么地方,呵呵·~1.4.4增加了好多方法哦~~,大家还是看DEMO吧。
- .toggleClass( className )
- 判断是否含有某个样式:hasClass()
这个方法可以用来判断元素中是否含有某个class,如果有则返回true,没有则返回false
- jQuery基础教程之DOM操作-样式操作
- jQuery基础教程之DOM操作-属性操作
- 《jQuery基础教程》-- 操作DOM
- jQuery基础教程DOM操作
- jQuery之dom操作(属性、样式操作)
- jQuery基础教程之DOM操作-节点操作函数(一)
- jQuery基础教程之DOM操作-节点操作函数(二)
- jQuery基础教程之DOM操作-HTML&文本&值的操作
- jQuery基础教程之DOM操作-节点操作函数(一)
- jQuery基础教程笔记-DOM操作
- jQuery快速入门基础教程之jQuery操作DOM(四)
- 3.2.9: jQuery的DOM操作之样式操作
- 15、使用jQuery操作DOM之操作样式
- 17、使用jQuery操作DOM之操作样式表
- 41、实例 使用jQuery操作DOM之操作样式
- jQuery基础教程之DOM操作-遍历节点-children()方法
- jQuery基础教程之DOM操作-遍历节点-parent()方法
- jQuery基础教程之DOM操作-遍历节点-parents()方法
- Linux(CentOS)挂载移动硬盘,实现文件拷贝、备份
- CSDN博客频道4月技术图书有奖试读活动
- NET Windows编程系列课程
- android中控制EditText不可编辑的问题
- 方便Office文件编辑的利器 : Office Tab (MS_Office插件)
- jQuery基础教程之DOM操作-样式操作
- openFlow实现CoverFlow效果
- android小记之FlashLight --- 高仿小米手电筒
- Servlet生命周期
- Java Interface & Abstract Class
- Myeclipse error retrieving feature.xml的解决办法
- 硬盘主引导记录详解
- 嵌入式文件系统之--cramfs文件系统的制作工具
- Linux下安装swftools