一、动画效果
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
swing：动画执行时效果是 先慢，中间快，最后又慢
linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。
示例代码：
<!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>
//隐藏div
function hideFn() {
//默认
// $("#showDiv").hide("slow", "swing", function () {
// alert("隐藏了")
// });
//滑动
$("#showDiv").fadeOut("slow", "swing", function () {
alert("隐藏了")
});
}
//显示div
function showFn() {
//默认
$("#showDiv").fadeIn("slow", "swing", function () {
alert("显示了")
});
//滑动
}
//切换div
function toggleFn() {
//默认
// $("#showDiv").toggle("slow");
//滑动
$("#showDiv").fadeToggle("slow");
}
</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:pink">
div显示和隐藏
</div>
</body>
</html>
二、遍历
JS的遍历方式
for(初始化值;循环结束条件;步长)
JQ的遍历方式
- jq对象.each(callback)
语法：jquery对象.each(function(index,element){});
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
this：集合中的每一个元素对象
- $.each(object, [callback])
- for…of: jquery 3.0 版本之后提供的方式:for(元素对象 of 容器对象)
示例代码：
<!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 () {
//1.获取所有的ul下的li
var citys = $("#city li");
//2.遍历li
// for (var i = 0; i < citys.length; i++) {
// if ("上海" == citys[i].innerHTML) {
// continue;//结束循环，继续下次循环
// }
// //弹出获取内容
// alert(i + ":" + citys[i].innerHTML);
// }
//1. jq对象.each(callback)
// citys.each(function (index, element) {
// // //获取li对象，方式一
// // // alert(this.innerHTML);
// // //获取li对象，方式二
// // //alert(index + ":" + element.innerHTML);
// if ("上海" == $(element).html()) {
// //如果当前function返回为false，则结束循环
// return true;
// }
// alert(index + ":" + $(element).html());
// });
//获取li对象，方式三
$.each(citys, function () {
alert($(this).html());
});
//3. for..of: jquery 3.0 版本之后提供的方式
for (li of citys){
alert($(li).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
三、事件绑定
1. jquery标准的绑定方式
jq对象.事件方法(回调函数)；
注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
案例代码：
<!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 () {
//1.获取name对象，绑定click事件
// $("#name").click(function () {
// alert("我被点击了");
// });
//给name绑定鼠标移动到元素之上事件，绑定鼠标移出事件
// $("#name").mouseover(function () {
// alert("鼠标来了");
// });
// $("#name").mouseout(function () {
// alert("鼠标走了");
// });
//简化操作：链式编程
// $("#name").mouseover(function () {
// alert("鼠标来了");
// }).mouseout(function () {
// alert("鼠标走了");
// });
$("#name").focus();//让文本框获得焦点
});
</script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>
2. on绑定事件/off解除绑定
jq对象.on(“事件名称”,回调函数)。
jq对象.off(“事件名称”)。
??如果off方法不传递任何参数，则将组件上的所有事件全部解绑
案例代码:
<!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 () {
//1、使用on给按钮绑定单击事件 click
$("#btn").on("click", function () {
alert("我被点击了")
});
//2、使用off解除btn按钮的单击事件
$("#btn2").click(function () {
// $("#btn").off("click");
$("#btn").off();//没有参数时，可以将组件上全部事件解绑
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
3. 事件切换：toggle
jq对象.toggle(fn1,fn2…)
??当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
案例代码：
<!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 src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//获取按钮，调用方法
$("#btn").toggle(function () {
$("#myDiv").css("backgroundColor", "pink");
}, function () {
$("#myDiv").css("backgroundColor", "green");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色，再次点击红色
</div>
</body>
</html>
四、插件
插件有增强jQuery的功能，主要实现方式有两种：
- $ .fn.extend(object)
增强通过JQuery获取的对象的功能 如$(“#id”)
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1、定义jqeury的对象插件
$.fn.extend({
//定义了一个check方法，所有的JQ对象都可以调用该方法
check: function () {
//让复选框选中
//this:调用该方法的JQ对象
this.prop("checked", true);
}, uncheck: function () {
//让复选框不选中
this.prop("checked", false);
}
});
$(function () {
//获取按钮
$("#btn-check").check();
$("#btn-check").click(function () {
//获取复选框对象
$("input[type='checkbox']").click();
});
$("#btn-uncheck").click(function () {
//获取复选框对象
$("input[type='checkbox']").uncheck();
});
});
</script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>
- $ .extend(object)
增强JQeury对象自身的功能 如$/jQuery
案例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
$.extend({
max: function (a, b) {
//返回两数中的较大值
return a >= b ? a : b;
},
min: function (a, b) {
//返回两数中的较小值
return a <= b ? a : b;
}
});
//调用全局方法
// var max = $.max(2, 6);
// alert(max);
var min = $.min(2, 6);
alert(min);
</script>
</head>
<body>
</body>
</html>
