一、jQuery动画效果
1.1显示效果
| 方法名称 |
解释 |
| show([speed],[easing],[fn]]) |
显示元素方法 |
| hide([speed],[easing],[fn]]) |
隐藏元素方法 |
| toggle([speed],[easing],[fn]) |
切换元素方法，显示的使之隐藏，隐藏的使之显示 |
| 参数名称 |
解释 |
| speed |
三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) |
| easing |
用来指定切换效果，默认是"swing"(摆动)，可用参数"linear"(直线) |
| fn |
在动画完成时执行的函数，每个元素执行一次 |
html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function hideFn(){
$("#showDiv").hide("slow","swing");
}
function showFn(){
$("#showDiv").show("normal","swing");
}
function toggleFn(){
$("#showDiv").toggle(5000,"linear");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:red">
div显示和隐藏
</div>
</body>
</html>
1.2滑动效果
| 方法名称 |
解释 |
| slideDown([speed,[easing],[fn]]) |
向下滑动方法 |
| slideUp([speed,[easing],[fn]]) |
向上滑动方法 |
| slideToggle([speed],[easing],[fn]) |
切换元素方法，向下使之向下,向下使之向上 |
| 参数名称 |
解释 |
| speed |
三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) |
| easing |
用来指定切换效果，默认是"swing"，可用参数"linear" |
| fn |
在动画完成时执行的函数，每个元素执行一次 |
html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function hideFn(){
$("#showDiv").fadeOut("slow","swing");
}
function showFn(){
$("#showDiv").fadeIn("normal","swing");
}
function toggleFn(){
$("#showDiv").fadeToggle(5000,"linear");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:red">
div显示和隐藏
</div>
</body>
</html>
1.3淡入淡出效果
| 方法名称 |
解释 |
| fadeIn([s],[e],[fn]) |
淡入方法 |
| fadeOut([s],[e],[fn]) |
淡出方法 |
| fadeTo([[s],o,[e],[fn]]) |
设置元素的透明度 |
| fadeToggle([s,[e],[fn]]) |
淡入淡出之间切换 |
| 参数名称 |
解释 |
| speed |
三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) |
| easing |
用来指定切换效果，默认是"swing"，可用参数"linear" |
| fn |
在动画完成时执行的函数，每个元素执行一次 |
| opacity |
一个0至1之间表示透明度的数字 |
html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function hideFn(){
$("#showDiv").fadeOut(1000);//1秒钟淡出(隐藏)
}
function showFn(){
$("#showDiv").fadeIn(1000);//1秒钟淡入(显示)
}
function toggleFn(){
$("#showDiv").fadeToggle(1000);//1秒钟淡入淡出之间切换
}
function fadeTofn(){
$("#showDiv").fadeTo(2000,0.5);//2秒钟设置div的透明度为50%
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<input type="button" value="点击按钮设置div透明度" onclick="fadeTofn()">
<div id="showDiv" style="width:300px;height:300px;background:red">
div显示和隐藏
</div>
</body>
</html>
二、jQuery的遍历
jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。
2.1原始方式遍历
java
复制代码
for(var i=0;i<元素数组.length;i++){
元素数组[i];
}
html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
//1、原始循环方式
for(var i=0;i<$lis.length;i++){
console.log($($lis[i]).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
2.2jquery对象方法遍历
html
复制代码
jquery对象.each(function(index,element){});
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
$lis.each(function(index,element){
console.log(index+"--"+$(element).html());
});
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
2.3 jquery的全局方法遍历
java
复制代码
$.each(jquery对象,function(index,element){});
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
$.each($lis, function(index,element) {
console.log(index+"--"+$(element).html());
});
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
2.4 jQuery3.0新特性for、of语句遍历
java
复制代码
for(变量 of jquery对象){
变量；
}
其中，
变量:定义变量依次接受jquery数组中的每一个元素
jquery对象：要被遍历的jquery对象
html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 版本是3以上 -->
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
for(li of $lis){
console.log($(li).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
复制代码
代码效果
