JQuery 高级
1、动画
三种方式显示和隐藏元素:
-
默认显示和隐藏方式
-
show([speed,[easing],[fn]])
参数:
- speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:用来指定切换效果,默认是 “swing”,可用参数 “linear”
- swing:动画执行时效果是 先慢,中间快,最后又慢
- linear:动画执行时速度是匀速的
- fn:在动画完成时执行的函数,每个元素执行一次
-
hide([speed,[easing],[fn]])
-
toggle([speed],[easing],[fn])
-
-
滑动显示和隐藏方式
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
-
淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[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").hide("slow", "swing", /*function () {}*/);
/*//默认方式
$("#showDiv").hide(5000, "swing", /!*function () {}*!/);*/
/*//滑动方式
$("#showDiv").slideUp("slow");*/
//淡入淡出的方式
$("#showDiv").fadeOut("slow");
}
//显示div
function showFn() {
/*$("#showDiv").show("slow", "swing", function () {
alert("显示了...");
});*/
// $("#showDiv").show("slow", "swing", /*function () {}*/);
/*//默认方式
$("#showDiv").show(5000, "linear", /!*function () {}*!/);*/
/*//滑动方式
$("#showDiv").slideDown("slow");*/
//淡入淡出的方式
$("#showDiv").fadeIn("slow");
}
//
function toggleFn() {
/*//默认方式
$("#showDiv").toggle("slow");*/
/*//滑动方式
$("#showDiv").slideToggle("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>
2、遍历
2.1、js 的遍历方式
for(初始化值;循环结束条件;步长)
2.2、jq 的遍历方式
-
jq对象.each(callback)
语法:
jquery对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element:就是集合中的每一个元素对象
- this:集合中的每一个元素对象
回调函数返回值:
- true:如果当前 function 返回为 false,则结束循环(break)
- false:如果当前 function 返回为 true,则结束本次循环,继续下次循环(continue)
-
$.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">
//js的方式
$(function () {
//1.获取所有的ul下的li
var citys = $("#city li");
//2.遍历li
/*for (var i = 0; i < citys.length; i++) {
//获取内容
if ("上海" == citys[i].innerHTML){
//break;
continue;
}
alert(i+":"+citys[i].innerHTML);
}*/
//2.jq方式:`jq对象.each(callback)`
citys.each(function (index, element) {
/*!//3.1 获取li对象,第一种方式 this
alert(this.innerHTML);*/
// alert($(this).html());
//3.2 获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(元素对象)
// alert(index + ":" + element.innerHTML);
// alert(index + ":" + $(element).html());
/*if ("上海" == $(element).html()){
//如果当前 function 返回为 false,则结束循环。如果返回 true,结束本次循环继续下次循环
// return false; //break
return true; //continue
}
alert(index + ":" + $(element).html());*/
/*//3.3 $.each(object, [callback])
$.each(citys, function () {
alert($(this).html());
})*/
//3.4 for(元素对象 of 容器对象)
for (li of citys){
alert($(li).html());
}
});
})
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
3、事件绑定
3.1、jquery 标准的绑定方式
jq对象.事件方法(回调函数)
-
注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为
表单对象.submit();//让表单提交
<!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").focus(); //让文本输入框获得焦点
});
</script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>
3.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按钮的单击事件
// $("#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.3、事件切换:toggle
-
jq对象.toggle(fn1,fn2...)
当单击 jq 对象对应的组件后,会执行 fn1。第二次点击会执行 fn2…
-
注意:1.9 版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
<!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 () {
//获取按钮,调用 toggle 方法
$("#btn").toggle(function () {
//改变div背景色backgroundColor颜色为 green
$("#myDiv").css("backgroundColor", "green");
}, function () {
//改变div背景色backgroundColor颜色为 pink
$("#myDiv").css("backgroundColor", "pink");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色,再次点击红色
</div>
</body>
</html>