JavaWeb——JQuery之高级操作应用及实践案例总结（动画、遍历、事件绑定）
【摘要】
目录
1 JQuery动画
2 JQuery遍历
3 JQuery事件绑定
1 JQuery动画
JQuery有三种方式显示和隐藏元素：
1）默认显示和隐藏方式： --show([speed, [easing], [fn]]) --hide...
目录
1 JQuery动画
JQuery有三种方式显示和隐藏元素：
- 1）默认显示和隐藏方式：
--show([speed, [easing], [fn]])
--hide([speed, [easing], [fn]])
--toogle([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]])
【注意】：以上方法的参数
- 1）speed：动画的速度，三个预定的值（"fast"、"normal"、"slow"）或表示动画时长的毫秒值；
- 2）easing：用来指定切换效果，默认是"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("fast","swing",function(){
-
});*/
-
/* //默认方式
-
$("#showDiv").hide(5000,"swing");*/
-
/* //滑动方式
-
$("#showDiv").slideUp("slow");*/
-
-
//淡入淡出方式
-
$("#showDiv").fadeOut("slow");
-
}
-
-
//显示div
-
function showFn(){
-
/* $("#showDiv").show("slow","swing",function(){
-
});*/
-
-
/* //默认方式
-
$("#showDiv").show(5000,"linear");*/
-
/* //滑动方式
-
$("#showDiv").slideDown("slow");*/
-
-
//淡入淡出方式
-
$("#showDiv").fadeIn("slow");
-
}
-
-
//切换显示和隐藏div
-
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 JQuery遍历
js的遍历方式是使用for循环，JQuery提供了三种遍历方式：
- 1）JQuery对象.each(callback)：回调函数中的参数 index（索引） element（元素对象）；
- 2）$.each(object,[callback])：
- 3）for..of：JQuery3.0 版本之后提供的方式
【注意】：如果遍历中加判断条件，当前function返回为false，则结束循环(相当于js中使用的break)，如果返回为true，则结束本次循环，继续下次循环(相当于js中使用的continue)；
【练习案例】：
-
<!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++) {
-
//获取内容
-
alert(i+":"+citys[i].innerHTML);
-
}*/
-
-
/*//2. 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，则结束循环(break)。
-
//如果返回为true，则结束本次循环，继续下次循环(continue)
-
return true;
-
}
-
alert(index+":"+$(element).html());
-
});*/
-
/* //3 $.each(object, [callback])
-
$.each(citys,function () {
-
alert($(this).html());
-
});*/
-
-
//4. 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>
3 JQuery事件绑定
JQuery事件绑定方式包括：
- 1）JQuery标准的绑定方式：JQuery对象.事件方法（回调函数）；注意：如果调用事件方法，不传递回调参数，会触发浏览器默认行为；
- 2）on绑定事件、off解除绑定：JQuery对象.on("事件名称"，回调函数)、JQuery对象.off("事件名称")；注意：若off方法不传递任何参数，则会将组件上所有的事件解除；
- 3）事件切换toggle：JQuery对象.toggle(fn1,fn2...)，当点击对应组件时，会执行fn1，再次点击会执行fn2...，若只有2个，则循环执行。注意：JQuery1.9后该功能删除了，要使用的话引入jquery-migrate-1.0.0.js插件。
【练习案例1】：JQuery标准的绑定方式
-
<!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("鼠标走了...")
-
});*/
-
// alert("我要获得焦点了...")
-
// $("#name").focus();//让文本输入框获得焦点
-
//表单对象.submit();//让表单提交
-
});
-
</script>
-
</head>
-
<body>
-
<input id="name" type="text" value="绑定点击事件">
-
</body>
-
</html>
【练习案例2】：on绑定事件、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】：事件切换toggle
-
<!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>
-
作于202008121900，已归档
———————————————————————————————————
本文为博主原创文章，转载请注明出处！
若本文对您有帮助，轻抬您发财的小手，关注/评论/点赞/收藏，就是对我最大的支持！
祝君升职加薪，鹏程万里！
文章来源: winter.blog.csdn.net，作者：Winter_world，版权归原作者所有，如需转载，请联系作者。
原文链接：winter.blog.csdn.net/article/details/107956233
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）