改变页面元素样式使用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类: 1. removeClass() – 移除CSS类 $("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 2.addClass() – ...
其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法... removeClass() – 移除CSS类
在jQuery 1.8.1中,你可以更容易地添加或修改动画。新的“$.Animation”提供了坚实的基础,并修复了之前版本中的许多bug,以便你的动画能够支持老版浏览器。如果你的Web应用只针对现代浏览器,你可以完全移除...
综观现在已经出版的中文类jQuery图书,不是简单的概念性介绍,就是缺乏真正的实践指导,而且版本相对陈旧。为了让所有还没有完全掌握jQuery技术的开发者能迅速步入jQuery的殿堂,本书诞生了,相信它不会让你失望。 ...
在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。 一.使用addClass()和removeClass()添加和删除一个CSS类...
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色: 实例 $("p").css("background-color","red"); 更多的选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") ...
$(this).addClass('active').siblings('li').removeClass('active') // 为li添加名为active的class,并移除兄弟元素(li)上的名为active的class名 $(this).children('.level').css("display","block"); // 使li...
jquery jqzoom:名气大,鼠标移入移除事件绑定在图片父级元素A上,如果让图片CSS完全居中后有BUG。 kissy imagezoom:淘宝网的放大镜插件,由于基于kissy框架,普及率不是很高,适合于底层采用kissy的页面。 jquery ...
利用jQuery移除和添加图片 1、样式 <style type=text/css> .changeImage{ background:url(images/right.png) no-repeat center; } </style> 2、JS (1)在改变标签的样式,需要移除之前添加的样式 ...
花生米AJAX-UI系列之:基于JQUERY的水平方向柱形图控件GooFlatChart类0.1版 本功能类是建立在JQUERY1.3.2的基础之上 //feature: //1.柱状图的各种柱形类型、颜色、名称及总数量均可自定义 //2.柱形图所用的坐标系也能...
用JQuery写的拖动元素进行排序的方法,包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件,自主可控。 原理是用CSS中position定位来跟踪鼠标移动,就是让元素跟踪鼠标位置,然后判断其在页面...
通过添加 CSS 类改变元素的外观和感觉,非常干净的方法,而不是添加内联样式。使用 jQuery,这很容易做到:$(‘#myelement’).addClass(‘myclass’); 从指定元素移除 CSS 类: 你可能觉得添加 CSS 类的操作已经灰常...
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中,你可以更容易地添加或修改动画。新的“$.Animation”提供了坚实的基础,并修复了之前版本中的许多bug,以便你的动画能够支持老版浏览器。如果你的Web应用只针对现代浏览器,你可以完全移除animation...
这是一款可以选择多张图片同时上传,不要的还可以移除,实时预览图片的jQuery多张图片批量上传插件代码。 功能描述 实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复...
让我们大概看一下 jQuery 1.8 主要的大改动包括那几个方面: 1. Sizzle 选择器引擎重新架构 2. 重新改造动画处理 ...同时 jQuery 1.8 还移除了一些 API,如果你要升级到这个版本请一定阅读官方发行说明。
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
link rel="stylesheet" media="screen" type="text/css" href="css/zoomimage.css" />[removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且...