jQuery支持方法用来操作HTML元素的CSS 属性
下面的方法为jQuery 提供的CSS操作方法:
- addClass() – 为指定的元素添加一个或多个CSS类。
- removeClass() – 为指定的元素删除一个或多个CSS类。
- toggleClass() – 为指定的元素在添加/删除CSS类之间切换。
- css() -设置或是取得CSS类型属性。
下面的StyleSheet为后面例子使用的CSS风格:
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
jQuery addClass示例
下面的例子为给定的元素添加CSS风格类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div>
<br>
<button>Add classes to elements</button>
</body>
</html>
你也可以在addClass 添加多个类的名称,如:
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass 示例
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggle()示例,下面的例子使用toggle为HTML元素在添加/删除CSS类blue之间切换
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
下一篇介绍css()的用法。
分享到:
相关推荐
JQuery全教程快速入门+库文件+实例,说明和教程都很详细,里面还附带库文件和效果功能实例,是个快速学习JQuery的好东西!
jQuery入门指南教程 这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。 这个指南包括...
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 jQuery项目历史 1.4 第一个jQuery驱动的页面 1.4.1 下载jQuery 1.4.2 建立HTML文档 1.4.3 编写jQuery代码 1.4.4 最终结果 1.5 小结 第...
参数值:字符串,例:url(test.gif) no-repeat,设置编辑器背景,格式同CSS同名参数一致。建议直接设置textarea的css背景 备注:v1.1.1新添加 loadCSS:加载样式 参数值:URL地址、URL数组以及直接内部样式,例如:'...
可以通过按Shift或Control / Command键来选择多个日期。 演示 在检查工作演示 入门 正在安装 包括这些文件 [removed][removed]<!-- jQuery is required --> <link href="/path/to/nepali-date-picker.css...
创建侧面菜单CSS3过渡的最简单方法 入门 在您的身体上设置位置 左侧菜单 <body class = "sidemenu-left" > 右侧菜单 <body class = "sidemenu-right" > 身体后侧菜单 . . . jQuery切换侧菜单 ...
包括 Baze-Modal 的 CSS 和 Javascript 文件以及 jQuery。 < link rel =" stylesheet " href =" path/to/baze.modal.css " > . < script src =" path/to/jquery.js " > </ script > < script...
python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 05 进制转换 06 原码补码反码 07 物理层和...
<li id="menu"><a href="#" target="_self">新手入门</a> 购物保障</a><br /> 购物流程</a><br /> 会员介绍</a><br /> 常见问题</a><br /> | <li><a href="#" target="_self">礼品卡</a></li> | ...
启用触摸功能的jQuery插件,可让您创建漂亮的响应式轮播滑块。 ###特征: React灵敏 触摸事件 滑鼠事件 完全可定制 选择要显示的项目数 多个滑块 CSS3 3d过渡 可自定义的控件 JSON格式 自定义事件 有用的回调 ...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
public class JVMine extends java.applet.Applet 简单实现!~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag...
public class JVMine extends java.applet.Applet 简单实现!~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag...
public class JVMine extends java.applet.Applet 简单实现!~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag...
public class JVMine extends java.applet.Applet 简单实现!~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag...
public class JVMine extends java.applet.Applet 简单实现!~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag...
public class JVMine extends java.applet.Applet 简单实现!~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag...