`
agevs
  • 浏览: 67787 次
  • 来自: 北京
博客专栏
924aba1e-229a-352e-b6d4-f15f3159a438
各种Web前端技巧经验分享...
浏览量:0
文章分类
社区版块
存档分类
最新评论

jQuery添加/改变/移除CSS类

阅读更多

 改变页面元素样式使用Javascript也可实现,但有没有更简洁的办法,答案是肯定的,现在有了jQuery,似乎让Js代码瘦身了不少,应验了那句话:“jQuery让JavaScript代码变得简洁!”,言归正传,来看jquery如何添加、移除CSS类:

1. removeClass() - 移除CSS类

$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称

 

2.addClass() - 添加CSS类.前端UI框架分享

$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称

 

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

$("#target").toggleClass("newClass")
//如果ID为“target”的元素已经定义了CSS样式,它将被移除;
//反之,CSS类“newClass”将被赋给该ID。

 

4.hasClass("className") - 判断是否已经存在CSS前端UI框架分享

在实际运用中,我们通常是先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个按钮)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。顺便告诉前端开发的新手,jquery是值得拥有的,有空了好好研究吧。

分享到:
评论

相关推荐

    jQuery添加/改变/移除CSS类及判断是否已经存在CSS

    ”,言归正传,来看jquery如何添加、移除CSS类: 1. removeClass() – 移除CSS类 $("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 2.addClass() – ...

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

    其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法... removeClass() – 移除CSS类

    最新jquery.1.8.1

    在jQuery 1.8.1中,你可以更容易地添加或修改动画。新的“$.Animation”提供了坚实的基础,并修复了之前版本中的许多bug,以便你的动画能够支持老版浏览器。如果你的Web应用只针对现代浏览器,你可以完全移除...

    jQuery权威指南-源代码

    综观现在已经出版的中文类jQuery图书,不是简单的概念性介绍,就是缺乏真正的实践指导,而且版本相对陈旧。为了让所有还没有完全掌握jQuery技术的开发者能迅速步入jQuery的殿堂,本书诞生了,相信它不会让你失望。 ...

    jQuery添加和删除指定标签的方法

    在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。 一.使用addClass()和removeClass()添加和删除一个CSS类...

    jQuery详细教程

    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色: 实例 $("p").css("background-color","red"); 更多的选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") ...

    HTML+css+jQuery实现导航栏效果--pc端

    $(this).addClass('active').siblings('li').removeClass('active') // 为li添加名为active的class,并移除兄弟元素(li)上的名为active的class名 $(this).children('.level').css("display","block"); // 使li...

    jquery图片放大镜imagezoom v1.0下载(原创)

    jquery jqzoom:名气大,鼠标移入移除事件绑定在图片父级元素A上,如果让图片CSS完全居中后有BUG。 kissy imagezoom:淘宝网的放大镜插件,由于基于kissy框架,普及率不是很高,适合于底层采用kissy的页面。 jquery ...

    jQuery动态移除和添加背景图片的方法详解

    利用jQuery移除和添加图片 1、样式 <style type=text/css> .changeImage{ background:url(images/right.png) no-repeat center; } </style> 2、JS (1)在改变标签的样式,需要移除之前添加的样式 ...

    [原创]基于JQUERY的水平方向柱形统计图控件GooFlatChart类

    花生米AJAX-UI系列之:基于JQUERY的水平方向柱形图控件GooFlatChart类0.1版 本功能类是建立在JQUERY1.3.2的基础之上 //feature: //1.柱状图的各种柱形类型、颜色、名称及总数量均可自定义 //2.柱形图所用的坐标系也能...

    JQuery对元素拖拽排序,元素拖拽,JQuery拖拽Demo

    用JQuery写的拖动元素进行排序的方法,包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件,自主可控。 原理是用CSS中position定位来跟踪鼠标移动,就是让元素跟踪鼠标位置,然后判断其在页面...

    一些有用的JavaScript和jQuery的片段分享

    通过添加 CSS 类改变元素的外观和感觉,非常干净的方法,而不是添加内联样式。使用 jQuery,这很容易做到:$(‘#myelement’).addClass(‘myclass’); 从指定元素移除 CSS 类: 你可能觉得添加 CSS 类的操作已经灰常...

    jQuery权威指南366页完整版pdf和源码打包

    jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单...dom对象/7 1.2.3 jquery控制页面css /9 1.3 本章小结/11 第2章...

    最新JQuery版本1.8

    在jQuery 1.8中,你可以更容易地添加或修改动画。新的“$.Animation”提供了坚实的基础,并修复了之前版本中的许多bug,以便你的动画能够支持老版浏览器。如果你的Web应用只针对现代浏览器,你可以完全移除animation...

    可预览移除图片的jQuery多张图片批量上传插件代码.zip

    这是一款可以选择多张图片同时上传,不要的还可以移除,实时预览图片的jQuery多张图片批量上传插件代码。 功能描述 实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复...

    jQuery 1.8 正式版

    让我们大概看一下 jQuery 1.8 主要的大改动包括那几个方面: 1. Sizzle 选择器引擎重新架构 2. 重新改造动画处理 ...同时 jQuery 1.8 还移除了一些 API,如果你要升级到这个版本请一定阅读官方发行说明。

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    jQuery 图片浏览放大插件 ZoomImage V1.0.rar

    link rel="stylesheet" media="screen" type="text/css" href="css/zoomimage.css" />[removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且...

Global site tag (gtag.js) - Google Analytics