jQuery 添加/移除CSS类实现代码

2016-02-19 13:45 3 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享jQuery 添加/移除CSS类实现代码的教程，热爱PS的朋友们快点看过来吧！

【 tulaoshi.com - Web开发】

其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！”

1. addClass() - 添加CSS类

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类：如果CSS类已经存在，它将被移除；相反，如果CSS类不存在，它将被加上。

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
$("#target").toggleClass("newClass")
//如果ID为“target”的元素已经定义了CSS样式，它将被移除；
//反之，CSS类”newClass“将被赋给该ID。

4.hasClass("className") - 判断是否已经存在CSS

在实际运用中，我们常常先定义好这些CSS类，然后通过Javascript事件触发（比如点击某个链接）来改变页面元素样式。此外，jQuery还提供一种方法 hasClass("className")，用来判断某个元素是否已经被赋予某个CSS类。

来源:http://www.tulaoshi.com/n/20160219/1605147.html

上一篇： javascript 验证日期的函数
下一篇： Linux更改22端口的方法汇总

看过《jQuery 添加/移除CSS类实现代码》的人还看了以下文章更多>>

jQuery插件 tabBox实现代码

标签： Web开发

打包下载查了一下jq的官方插件编写文档（ http://docs.jquery.com/Plugins/Authoring ）以及文档中推荐的Mike Alsup写的一篇 A Plugin Development Pattern 。英语不是很好，但还是努力看下来（既学习到知识又能练习英语，何乐不为），照猫画虎的写了一个处女作——tabBox。顾名思义，这个插件就是方便的产生具有tab选项卡功能“盒子...

jquery 锁定弹出层实现代码

标签： Web开发

基于jquery的锁定弹出层这个东西也是随手总结出来的，引用了一些js框架jquery的方法。 div遮盖其他控件的方法参考了对于需要遮盖flash的，请将flash控件的WMode变量值设置为Transparent 使用方法：代码如下： script src="jquery.js"/script script src="effect/maskDiv.js"/script script //配置模块 var moduleEvent = [{"i...

jQuery 全选效果实现代码

标签： Web开发

多选效果如下图代码如下: 代码如下: script type="text/javascript"!-- $(document).ready(function() { $("#selectall").click(selectAll); }); function selectAll() { var checked = $("#selectall").attr("checked"); $(".selectable").each(function() { var subchecked = $(this).attr("checked"); if (subchecked != ch...

JQuery 网站换肤功能实现代码

标签： Web开发

从那以后，我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何使用jQuery编写简单代码实现它的教程。我将向你们逐步解说整个的过程，不仅仅因为要展示jQuery代码的简介，同时也要揭示jQuery库中的若干高级特性。首先，代码代码如下: $(document).ready(function() { $('.styleswitch').click(funct...

Jquery 弹出层插件实现代码

标签： Web开发

直接看代码：代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" title/title scri...

查看更多精彩>>