<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画练习</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
/**
* show,hide,taggle都可以接收三个参数
* 第一个参数表示动画速度,可选slow,fast,normal也可输入毫秒数,可以省略
* 第二个参数表示淡入/淡出方式,默认是swing,还有linear可选,可以省略
* 第三个参数表示执行函数,函数会在动画时执行,每个元素执行一次
*/
//利用hide函数隐藏元素
function hideFunc() {
$("#div1").hide("slow","swing",function () {
alert("div1被隐藏...");
})
}
//利用show方法显示元素
function showFunc() {
$("#div1").show("slow","swing");
}
//taggle函数会修改标签显示状态
function changeFunc() {
$("#div1").toggle("slow");
}
</script>
</head>
<body>
<input type="button" value="点击隐藏" id="b1" onclick="hideFunc()">
<input type="button" value="点击显示" id="b2" onclick="showFunc()">
<input type="button" value="切换状态" id="b3" onclick="changeFunc()">
<div id="div1">hello world!</div>
</body>
</html>
此外还有类似功能的slideDown,slideUp,slideTaggle表示滑动显示或隐藏
以及fadeIn,fadeOut,fadeTaggle表示淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
$(function () {
//获取对象
var cities=$("#city li");
alert(cities);
//JS遍历方式
for(var i=0;i<cities.length;i++){
var name=cities[i].innerHTML;
alert(name);
}
//jQuery方式遍历
//第一种方式
cities.each(function (index,element) {
//index表示索引值,element是每次遍历得到的元素对象
//index,element可以省略不写,此时可以通过this获取对象,但不能获取索引值
alert(index+":"+$(element).html());
});
//第二种方式
$.each(cities,function () {
alert($(this).html());
});
//第三种方式(jQuery3.0后才支持)
for(city of cities){
alert($(city).html());
}
})
</script>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>重庆</li>
</ul>
</body>
</html>
jQuery对象.事件方法(回调函数)
//例如
button.onClick(function(){
})
jQuery对象.on("事件名称",回调函数)
//例如
button.on("click",function(){
})
button.off("click")
jQuery对象.toggle(func1,func2,...)