jquery 学习之二 属性(类)


Posted in Javascript onNovember 25, 2010

addClass(class)

为每个匹配的元素添加指定的类名。
Adds the specified class(es) to each of the set of matched elements.

返回值

jQuery

参数

class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开

示例

为匹配的元素加上 'selected' 类

HTML 代码:

<p>Hello</p>

jQuery 代码:

$("p").addClass("selected");

结果:

[ <p class="selected">Hello</p> ]

为匹配的元素加上 selected highlight 类

HTML 代码:

<p>Hello</p>

jQuery 代码:

$("p").addClass("selected highlight");

结果:

[ <p class="selected highlight">Hello</p> ]
------------------------------------------------------------------------------------------------------------------------------

removeClass(class)

从所有匹配的元素中删除全部或者指定的类。
Removes all or the specified class(es) from the set of matched elements.

返回值

jQuery

参数

class (String) : (可选) 一个或多个要删除的CSS类名,请用空格分开

示例

从匹配的元素中删除 'selected' 类

HTML 代码:

<p class="selected first">Hello</p>

jQuery 代码:

$("p").removeClass("selected");

结果:

[ <p>Hello</p> ]

删除匹配元素的所有类

HTML 代码:

<p class="selected first">Hello</p>

jQuery 代码:

$("p").removeClass();

结果:

[ <p>Hello</p> ]
------------------------------------------------------------------------------------------------------------------------------

toggleClass(class)

如果存在(不存在)就删除(添加)一个类。
Adds the specified class if it is not present, removes the specified class if it is present.

返回值

jQuery

参数

class (String) :CSS类名

示例

为匹配的元素切换 'selected' 类

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p>

jQuery 代码:

$("p").toggleClass("selected");

结果:

[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
 
Javascript 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 #Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 #Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 #Javascript
学习并汇集javascript匿名函数
Nov 25 #Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 #Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 #Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 #Javascript
You might like
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP编写RESTful接口
2016/02/23 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python实现顺时针打印矩阵
2019/03/02 Python
python assert的用处示例详解
2019/04/01 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python中append实例用法总结
2019/07/30 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
安全生产知识竞赛活动总结
2014/07/07 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
涨价通知
2015/04/23 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫