JQuery：在项目中总结零散知识点（一）
2018-04-10 本文已影响27人
西柚喃木
1. css()方法
- (1) 返回 CSS 属性值
返回第一个匹配元素的 CSS 属性值。
注：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。
$(selector).css("color");
- (2) 设置 CSS 属性
设置所有匹配元素的指定 CSS 属性。
$(selector).css("color","red");
- (3) 使用函数来设置 CSS 属性
设置所有匹配的元素中样式属性的值。
注：此函数返回要设置的属性值。接受两个参数，index 为元素在对象集合中的索引位置，value 是原先的属性值。
$(selector).css(name,function(index,value))
$("button").click(function(){
$("p").css("color",function(){return "red";});
});
$("div").click(function() {
$(this).css(
"width", function(index, value) {return parseFloat(value) * 1.2;}
);
});
- (4) 设置多个 CSS 属性/值对
把“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
});
2. Callback 函数
- Callback 函数在当前动画 100% 完成之后执行。
(1) 没有CallBack函数：
$("p").hide(1000);
alert("The paragraph is now hidden");
注：这段代码的执行效果是在p隐藏前alert。
逻辑上是错误的。
(2) CallBack函数：
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
注：这段代码的执行效果是在p以1000ms速度隐藏后即动画100%完成后alert。
3. jQuery UI API - .toggleClass()
- 用法描述：当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
| 参数 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔 。 | |
| switch | Boolean | 一个布尔值，指定 class 应被添加还是被移除。 | |
| duration | Number 或 String | 一个字符串或一个数字，指定动画将运行多久。 | 400 |
| easing | String | 一个字符串，指示要使用的 easing 函数。 | swing |
| complete | Function() | 一旦动画完成时要调用的函数。 |
.toggleClass( className [, switch ] [, options ] )
| 参数 | 类型 | 描述 |
|---|---|---|
| ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔 。 |
| switch | Boolean | 一个布尔值，指定 class 应被添加还是被移除。 |
| options | Object | 所有的动画设置。所有的属性是可选的。 duration（默认值："400"） - 类型：Number 或 String - 描述：一个字符串或一个数字，指定动画将运行多久。 easing（默认值："swing"） - 类型：String - 描述：一个字符串，指示要使用的 easing 函数。 complete - 类型：Function() - 描述：一旦动画完成时要调用的函数。 children（默认值："false"） - 类型：Boolean - 描述：指定动画是否被应用到匹配元素的所有后代。此功能应慎重使用，因为判断元素是否是动画的后代的代价是很大的，会根据后代的数量线性增长。 queue（默认值："true"） - 类型：Boolean 或 String - 描述：一个布尔值，指示是否将动画放在特效队列中。如果是 false，动画将立即开始。自 jQuery 1.7 起，queue 选项也接受一个字符串，在这种情况下，动画添加到由字符串表示的队列中。 |
实例
- 为匹配的元素切换 class "big-blue"。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.toggleClass() 演示</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
}
.big-blue {
width: 200px;
height: 200px;
background-color: #00f;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div></div>
<script>
$( "div" ).click(function() {
$( this ).toggleClass( "big-blue", 1000, "easeOutSine" );
});
</script>
</body>
</html>
演示效果为每次点击方框时方框颜色由灰色变成蓝色同时变大或由蓝色变成灰色同时变小，效果以1s时间过渡。
- 若是将
$( this ).toggleClass( "big-blue", 1000, "easeOutSine" );改为$( this ).toggleClass( "big-blue", true,1000, "easeOutSine" );只会添加big-blue类。
