今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性。jQuery操作元素的属性是非常方便的,在此记录一下:

1.给元素添加class属性:

addClass(class)

(1)添加单个class可以直接写class名字,例如:

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

(2)添加多个class多个class中间空格隔开:例如:

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

2.给元素删除class属性:

removeClass([class])

(1)删除单个class字节写上class名字,例如:

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

(2)删除匹配元素的所有类

$("p").removeClass();

3如果存在(不存在)就删除(添加)一个类。

toggleClass(class)

例如:

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

jQuery操作元素的class属性的更多相关文章

  1. 用JQuery操作元素的style属性

    可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color");  //获取p元素的样式颜色 无论color属 ...

  2. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  3. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  4. 使用jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  5. 《从零开始学习jQuery》:用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  6. jQuar总结10:jQuery操作元素的属性

    jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...

  7. jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  8. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  9. JQuery操作元素的属性与样式及位置 复制代码

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

随机推荐

  1. js深拷贝与浅拷贝的区别及实现

    1. 对于基本数据类型 其值在内存中占据着固定大小的空间,并被保存在栈内存中.当一个变量向另一个变量复制基本类型的值,会创建这个值的副本,并且我们不能给基本数据类型的值添加属性.其为深拷贝. 2. 对 ...

  2. ZooKeeper读书笔记

    <ZooKeeper读书笔记> 1.Zookeeper是什么?Zookeeper是一个典型的分布式数据一致性的解决方案,分布式应用可以基于它实现诸如数据发布/订阅.负载均衡.命名服务.分布 ...

  3. C# 移动开发(Xamarin.Form) Plugin.BLE 蓝牙连接

    随着Xamarin.Form项目接近尾声,仔细一算才发现过来大半年时间了. 期间除了刚开始有闲情写写,现在总算有空来总结一下了. 来先说 Plugin.BLE (https://github.com/ ...

  4. 详解nginx.conf文件配置项(包括负载均衡)

    http://www.cnblogs.com/hsapphire/archive/2010/04/08/1707109.html #运行用户 user  nobody nobody; #启动进程 wo ...

  5. ldap_modify: No such object (32) matched DN: cn=config

    centos 6.9 部署 kerbors ldap 报错 [root@hadoop data]# ldapmodify -Y EXTERNAL -H ldapi:/// -f chdomain.ld ...

  6. ListView中含有EditText时候--要命的焦点问题迎刃而解

    最近做项目的时候遇到了一个问题,就是在ListView的item上面含有一个EditText,要求是这样: 1当点击item的时候,item可以点击; 2当点击EditText的时候EditText也 ...

  7. [Redis] 基于redis的分布式锁

    前言分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁. 可靠性首先,为了确保 ...

  8. Comparator.comparing比较排序

    使用外部比较器Comparator进行排序 当我们需要对集合的元素进行排序的时候,可以使用java.util.Comparator 创建一个比较器来进行排序.Comparator接口同样也是一个函数式 ...

  9. vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下

    vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...

  10. Modal 高度 在里面css里写高 | iview

    .modalCss { height: 330px; overflow: auto; padding-right: 10px; }