jQuery UI addClass()方法
addClass()方法是jQuery UI框架中一个内置的方法,用于管理用户界面的视觉效果。这个方法为所有选定的元素添加类,同时为所有在CSS属性中定义的样式提供动画。它基本上是管理文本缩进、宽度、高度、填充、边距、字体大小和字母间距的动画方法,提供一个平滑的过渡效果。
语法:
$(selector).addClass(className, options);
参数:该方法接受上面提到的和下面描述的两个参数。
- className。这个参数持有需要添加的类的名称。
- options。它是一个可选参数。
返回值:它返回选定的元素,并添加新的类名称。
Options:
- 持续时间。这个选项允许你选择视觉效果的时间长度,单位是毫秒。类型是数字或字符串,默认值是400。
语法:
$(".selector").addClass(className, "fast");
- 缓和。这个选项说明你想要什么样的缓和或进展的视觉效果。其类型是字符串,默认值是摆动。
语法:
$(".selector").addClass(className, "easeOutBounce");
- complete。这个选项是回调方法,在视觉效果完成后为每个匹配的元素调用。其类型为函数。
- children。这个选项告诉人们视觉效果或动画是否应用于它的所有子代。类型是布尔值,默认值是false。
- queue:这个选项告诉人们视觉效果或动画是否被放在效果队列中。类型为布尔值或字符串,默认值为真。
jQuery UI的链接:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="样式表" type="text/css" />
jQuery代码显示此方法在单一类中的工作:
示例 1:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<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>
.welcomeClass {
width: 200px;
height: 50px;
text-align:center;
padding :10px 10px 10px 10px;
background-color: lightgreen;
border: 2px solid green;
}
.newClass {
font-size: 40px;
background-color: #cccccc;
color: red;
}
.highlight {
color:#090;
font-family:Calibri;
font-size:2em;
text-shadow:2px 2px #FF0000;
}
.height{ height: 10px;}
.square {
width: 100px;
height: 100px;
text-align: center;
padding :8px 10px 8px 10px;
background-color: #cccccc;
}
.easing-square {
width: 200px;
height: 200px;
padding: 20px;
background-color: lightgreen;
border: 2px solid green;
}
</style>
<script type = "text/javascript">
(document).ready(function() {
('.btnClass').click(function() {
if (this.id == "addID") {
('#welcomeId').addClass(
"newClass", "fast")
}
else {
('#welcomeId').removeClass(
"newClass", "fast")
}
})
( ".square" ).click(function() {
( this ).addClass( "easing-square",
700, "swing" );
$( this ).text("addclass() method "
+ "executed successfully!");
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b class="highlight">
jQuery UI addClass method
</b>
<div class="height"></div><br>
<div id = welcomeId class = "welcomeClass">
Welcome !
</div>
<div class="height"></div><br>
<button class = "btnClass" id = "addID">
Add Class
</button>
<button class = "btnClass" id = "removeID">
Remove Class
</button>
<div class="height"> </div><br>
<div class="square" >Click this </div>
</body>
</html>
在上面的例子中,被选中的元素是。”b “和 “div”。”highlight “类被应用于元素 “b”。”newClass “类被应用于元素 “div “的id welcomeId。在jQuery UI的.addClass()方法的帮助下,”easing-square “类被应用于具有square类的元素 “div”。
输出:
jQuery代码显示此方法在多个类中的工作:
设计结构:在下面的代码中,元素 “p “被选中,并在jQuery UI的.addClass()方法的帮助下添加了 “red”、”font”、”padding “和 “border “类。下面的CSS代码是为 “p “元素定义所有的类,也是为了设计用户界面部分。下面的jQuery代码是用来管理点击事件和为所选元素添加多个类。
注意:多个类在addClass()方法中用空格隔开。
- CSS 代码:
<style>
.red {
background: red;
width:400px;
}
.font{
font-size: 3em;
text-align : center;
}
.padding {
padding: 1em;
}
.border {
border: 2px solid black;
border-radius: 25px;
}
</style>
- jQuery 代码:
<script>
(document).ready(function() {
('.btnClass').click(function() {
$( "#paraId" ).addClass(
"red font padding border", 2500 );
});
});
</script>
最终方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>
jQuery UI adding multiple classes
</title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"http://code.jquery.com/jquery-1.10.2.js"></script>
<script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.red {
background: red;
width:400px;
}
.font {
font-size: 3em;
text-align : center;
}
.padding {
padding: 1em;
}
.border {
border: 2px solid black;
border-radius: 25px;
}
</style>
<script>
(document).ready(function() {
('.btnClass').click(function() {
$( "#paraId" ).addClass(
"red font padding border", 2500 );
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>jQuery UI adding multiple classes</b>
<div class="height"></div>
<p id="paraId">GFG website</p>
<button class="btnClass">
Click this
</button>
</body>
</html>
输出:
jQuery代码显示此方法与回调方法的工作:
- CSS 代码:
<style>
.height {
height: 10px;
}
.parent {
width: 500px;
height: 250px;
position: relative;
}
#btnClick {
padding: .5em 1em;
text-decoration: none;
}
#container {
width: 380px;
height: 210px;
padding: 1em;
color: #2d2d2d;
border: 1px solid black;
background: #b3b3b3;
}
.newClass {
text-indent: 20px;
letter-spacing: .2em;
width: 380px;
height: 210px;
padding: 20px;
margin: 10px;
font-size: 1.1em;
}
</style>
- jQuery 代码:
<script>
(document).ready(function() {
( "#btnClick" ).on( "click", function() {
( "#container" ).addClass(
"newClass", 4000, callback );
});
function callback() {
setTimeout(function() {
( "#container" ).removeClass( "newClass" );
}, 4000 );
}
});
</script>
最终方案:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<title>jQuery UI addClass with callback</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>
.height {
height: 10px;
}
.parent {
width: 500px;
height: 250px;
position: relative;
}
#btnClick {
padding: .5em 1em;
text-decoration: none;
}
#container {
width: 380px;
height: 210px;
padding: 1em;
color: #2d2d2d;
border: 1px solid black;
background: #b3b3b3;
}
.newClass {
text-indent: 20px;
letter-spacing: .2em;
width: 380px;
height: 210px;
padding: 20px;
margin: 10px;
font-size: 1.1em;
}
</style>
<script>
(document).ready(function() {
( "#btnClick" ).on( "click", function() {
( "#container" ).addClass(
"newClass", 4000, callback );
});
function callback() {
setTimeout(function() {
( "#container" ).removeClass( "newClass" );
}, 4000 );
}
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI add Class method with callback</b>
<div class="height"></div><br>
<div class="parent">
<div id="container">
This is to demonstrate jQuery
UI addClass method with
removeClass callback method.
</div>
</div>
<button id="btnClick">
Click to execute
</button>
</body>
</html>
在上面的代码中,id为container的 “div “元素被选中,在.addClass()函数的帮助下,一个新的类被添加到选中的 “div “元素中。回调函数也在jQuery UI的.removeClass()方法的帮助下被执行。
输出: