1.JQuery动画
三种方式显示和隐藏元素：
1.默认显示和隐藏方式
- show([speed],[easing],[fn])：显示
- hide([speed],[easing],[fn])：隐藏
- toggle([speed],[easing],[fn])：切换
2.滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed],[easing],[fn])
- slideToggle([speed],[easing],[fn])
3.淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed],[easing],[fn])
参数：
- speed：动画的速度。三个预定义值（slow，normal和fast）或者表示动画时长（单位毫秒）
- easing：表示切换的效果，默认“swing”，可用参数“linear”
swing：动画执行效果先慢，中间快，最后又慢
linear：动画执行效果匀速
- fn：动画执行时完成的函数，每个元素执行一次
2.JQuery遍历
2.1.JS的遍历方式
for(初始化值,循环结束条件,步长)
2.2.JQuery的遍历方式
- JQuery对象.each(callback)
- $.each(Object,[callback])
- for…of：3.0以后版本提供
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历</title>
<script src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//1.获取所有ul下的li
let city = $("#city li");
//2.遍历li
//2.1.JS的遍历方式
//for(初始化值,循环结束条件,步长)
// for (var i = 0; i < city.length; i++) {
// //获取内容
// alert(i + ":" + city[i].innerHTML);
// }
//2.2.JQuery的遍历方式
// //* JQuery对象.each(callback)
// city.each(function (index,element) {
// //1.获取li第一种方法，但是无法获取索引
// //alert(this.innerHTML);
//
// //2.获取li第二种方法
// //在回调函数中定义参数
// //index(索引) element(元素对象)
// alert(index + ":" + element.innerHTML);
// })
// //* $.each(Object,[callback])
// $.each(city,function () {
// alert($(this).html());
// })
//* for..of:
for(li of city){
alert($(li).html());
}
})
</script>
</head>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
3.JQuery事件绑定
- 1.JQuery标准绑定方式
JQuery对象.事件方法(回调函数);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery绑定事件</title>
<script src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// //获取name对象，绑定click对象
// $("#name").click(function () {
// alert("我被点击了")
// });
// //给name绑定鼠标移动到元素之上的事件，绑定鼠标移出事件
// $("#name").mouseover(function () {
// alert("鼠标来了")
// });
// $("#name").mouseout(function () {
// alert("鼠标走了")
// });
//简化操作，链式编程
$("#name").mouseover(function () {
alert("鼠标来了")
}).mouseout(function () {
alert("鼠标走了")
});
});
</script>
</head>
<body>
<input id="name" type="text" value="绑定事件">
</body>
</html>
- 2.on绑定事件/off解除绑定
JQuery对象.on(“事件名称”,回调函数)
JQuery对象.off(“事件名称”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery绑定事件</title>
<script src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//使用on绑定单击事件
$("#btn").on("click",function () {
alert("我被点击了");
})
//使用off解除btn1按钮的单击事件
$("#btn1").click(function () {
//解除btn按钮的单击事件
$("#btn").off("click")//将组件上的所有事件全部解绑
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn1" type="button" value="使用off解绑点击事件">
</body>
</html>
- 3.事件切换：toggle
- JQuery对象.toggle(fn1,fn2…)：当单击JQuery对象对应的组件后，会执行fn1，第二次点击会执行fn2…
！！！注意：1.9版本之后toggle事件绑定的功能移除了，但是动画效果还能使用，如果要使用的话，需要引入Migrate插件恢复此功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery绑定事件</title>
<script src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//获取按钮，调用toggle方法
$("#btn").toggle(function () {
//改变div背景色为绿色
$("#mydiv").css("backgroundColor","green");
},function () {
//改变背景色为粉色
$("#mydiv").css("backgroundColor","pink");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;hight:300px;background: pink">
点击按钮变成绿色，再次点击变粉色
</div>
</body>
</html>