今天在做一个菜单折叠插件的时候需要根据页面的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. hihocoder1079 离散化

    思路:线段树 + 离散化. 测试用例: 3 10 1 10 1 3 6 10 实现: #include <bits/stdc++.h> using namespace std; typed ...

  2. String 截取字符串#中间的文本

    通过正则实现: String regex = "#([^#]+)#"; @Test public void test() { String text = "#中俄建交七十 ...

  3. Redis为什么这么快

    Redis为什么这么快 1.完全基于内存,绝大部分请求是纯粹的内存操作,非常快速.数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1): 2.数据结构简单, ...

  4. Really simple SSH proxy (SOCKS5)

    原文: https://thomashunter.name/blog/really-simple-ssh-proxy-socks5/ SOCKS5 is a simple, eloquent meth ...

  5. std::map插入已存在的key时,key对应的内容不会被更新

    std::map插入已存在的key时,key对应的内容不会被更新,如果不知道这一点,可能会造成运行结果与预期的不一致 “Because element keys in a map are unique ...

  6. XCode调试器LLDB

    与调试器共舞 - LLDB 的华尔兹 你是否曾经苦恼于理解你的代码,而去尝试打印一个变量的值? NSLog(@"%@", whatIsInsideThisThing); 或者跳过一 ...

  7. .netcore中使用EFCore连接SQL Server并部署至Ubuntu

    前面一篇记录了如何在windows下开发asp.net core程序,并部署至ubuntu系统中.但仅仅是建立了一个demo项目,项目本身并没有实现多少功能.多数时候,我们的项目是要和数据库打交道.E ...

  8. Vue构建命令

    node -v npm -v vue -V npm install vue (这个命令不行) 提示信息:+ vue@2.6.10 updated 1 package and audited 1 pac ...

  9. 骑芯供应链(W 笔试)

    单选题 1.调用本身构造方法 答案:this(X) 2.若y=3,a=2,b=4,运行y+=a++/--b,求y的值 答案: 3.不能控制servlet生命周期的方法是? 选项:init().serv ...

  10. Android studio Github 断开连接

    http://blog.csdn.net/agoodcoolman/article/details/50562301 使用软件:Android studio svn:Github 从github直接从 ...