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>