JqueryUI - 添加类( Add Class)
本章将讨论addClass()方法，它是用于管理jQueryUI视觉效果的方法之一。 addClass()方法允许动画对CSS属性的更改。
addClass()方法为匹配的元素添加指定的类，同时为所有样式更改设置动画。
语法 (Syntax)
在jQueryUI的1.0版中添加
addClass()方法的基本语法如下 -
.addClass( className [, duration ] [, easing ] [, complete ] )
| Sr.No. | 参数和描述 |
|---|---|
| 1 | className 这是一个包含一个或多个CSS类（由空格分隔）的String。 |
| 2 | duration 它的类型为Number或String，表示效果的毫秒数。 值为0会直接在新样式中使用元素，而无需进度。 其默认值为400 。 |
| 3 | easing 这是String类型，表示在效果中进行的方式。 它的默认值是swing 。 可能的值在here 。 |
| 4 | complete 这是对此元素的效果完成时为每个元素调用的回调方法。 |
在jQueryUI 1.9版中添加
对于1.9版本，此方法现在支持children选项，该选项还将为后代元素设置动画。
.addClass( className [, options ] )
| Sr.No. | 参数和描述 |
|---|---|
| 1 | className 这是一个包含一个或多个CSS类（由空格分隔）的String。 |
| 2 | options 这表示所有动画设置。 所有属性都是可选的。 可能的值是 -
|
例子 (Examples)
以下示例演示了addClass()方法的用法。
通过单班
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI addClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('.button').click(function() {
if (this.id == "add") {
$('#animTarget').addClass("myClass", "fast")
} else {
$('#animTarget').removeClass("myClass", "fast")
}
})
});
</script>
</head>
<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button class = "button" id = "add">Add Class</button>
<button class = "button" id = "remove">Remove Class</button>
</body>
</html>
让我们将上面的代码保存在HTML文件addclassexample.htm ，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果 -
新页面打开单击“ Add Class和“ Remove Class按钮以查看类对该框的影响。
传递多个class
此示例显示如何将多个类传递给addClass方法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI addClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.red { color: red; }
.big { font-size: 5em; }
.spaced { padding: 1em; }
</style>
<script>
$(document).ready(function() {
$('.button-1').click(function() {
$( "#welcome" ).addClass( "red big spaced", 3000 );
});
});
</script>
</head>
<body>
<p id = "welcome">Welcome to IOWIKI!</p>
<button class = "button-1">Click me</button>
</body>
</html>
让我们将上面的代码保存在HTML文件addclassexample.htm ，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果 -
新页面打开