2022/3/24
一、JQuery高级
1.动画
1.默认显示和隐藏方式
1.show([speed,[easing],[fn]])：显示
1.参数：
1.speed：动画的速度。三个预定义的值（“slow”，“normal”，“fast”）
或表示动画时长的毫秒数值（如：1000）
2.easing：用来指定切换效果，默认是swing，可用参数是linear
* swing：动画执行效果是 先慢，中间快,最后又慢
* linear：动画执行时速度是匀速的
3.fn：在动画完成时执行的函数，每个元素执行一次。
2.hide([speed,[easing],[fn]])：隐藏
3.toggle([speed,[easing],[fn]])：隐藏时显示，显示时隐藏<script type="text/javascript"> //显示div function showFn(){ $("#showDiv").show("slow","swing","function(){ alert("显示了"); }); } //隐藏div function hideFn(){ $("#showDiv").hide("slow","swing","function(){ alert("隐藏了"); }); } //切换显示和隐藏div function toggleFn(){ $("#showDiv").toggle("slow"); } </script>2.滑动显示和隐藏方式
1.slideDown([speed],[easing],[fn])：向下滑显示
2.slideUp([speed],[easing],[fn])：向上滑隐藏
2.slideToggle([speed],[easing],[fn])：显示隐藏切换
3.淡入淡出显示和隐藏方式
1.fadeIn([speed],[easing],[fn])：淡入显示
2.fadeOut([speed,[easing],[fn])：淡出异常
3.faseToggle([speed,[easing],[fn])：淡入淡出切换
2.遍历
1.JS的遍历方式
* for（初始化值；循环结束条件；步长）
2.jq的遍历方式
1.jq对象.each(callback)
2.$.each(object,[callback])
3.for...of
callback:就是一个回调函数，里面传递function对象<script type="text/javascript"> $(function(){ //1.获取素有的ul下的li var city1 = $("#city li"); //js的遍历方式 //2.遍历li <!--for(var i = 0; i<city1.length;i++){ if("上海" == city1[i].innerHTML){ break; //结束循环 //continue 结束本次循环，继续下次循环 } //获取内容 alert(i+":"+city1[i].innerHTML) }--> //2.jq对象.each(callback) <!--city1.each(function(){ //3.1获取li对象 第一种方式this <!--alert(this.innerHTML);--> alert($(this).html()); });--> <!--city1.each(function(index,element){ //3.2获取li对象 第二种方式 在回调函数中定义参数 index （索引） element（元素对象） alert(index+":"+element.innerHTML); //判断如果是上海，则结束循环 if("上海"==$(element).html()){ //如果当前function返回false，则结束循环（break） //如果当前function返回true，则结束本次循环，继续下一次 return true; } alert(index+":"+$(element).html()) });--> //3.$.each(object,[callback]) <!--$.each(city1,function(){ alert($(this).html()) });--> //4.for...of:jquery3.0版本之后提供的方式 for(li of city1){ alert($(li).html()) } }); </script>
3.事件绑定
1.jquery标准的绑定方式
jq对象.事件方法（回调函数）；
* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
* 表单对象.submit（）；//让表单提交2.on绑定事件/off解除绑定<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(); //表单对象.submit();//让表单提交 }); </script>
jq对象.on("事件名称",回调函数）
jq对象.off("事件名称")3.事件切换：toggle<script type="text/javascript"> $(function(){ //1.使用on给按钮绑定单击事件 click $("#btn").on("click",function(){ alert("我被点击了...") }); //1.使用off给按钮接触btn按钮的单击事件 click $("#btn2").click(function(){ $("#btn").off("click"); //$("#btn").off(); //将组件上所有的事件全部解绑 }); }); </script>
jq.toggle(fn1,fn2...)<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>案例：广告显示和隐藏
<script type="text/javascript"> <!-- 需求： 1.当页面加载完，3秒后。自动显示广告 2.广告显示5秒，自动消失 分析： 1.使用定时器来完成。setTimeout（执行一次定时器） 2.分析发现JQuery的显示和隐藏动画效果其实就是控制display 3.使用show/hide方法来完成广告的显示 --> //入口函数，在页面加载完成之后，定义定时器，调用这两个方法 $(function(){ //定义定时器，调用adshow方法，3秒后执行一次 setTimeout(adShow,3000); //定义定时器，调用adHide方法，8秒后执行一次 setTimeout(adHide,8000); }); //显示广告 function adShow(){ //获取广告div，调用显示方法 $("#ad").show("slow"); } //隐藏广告 function adHide(){ //获取广告div，调用隐藏方法 $("#ad").hide("slow"); } </script>案例：抽奖实现
<script type="text/javascript"> <!-- 分析： 1.给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性 * 定义数组，存放图片资源路径 * 生成随机数。数组索引 2.给结束按钮绑定单击事件 1.1 停止定时器 1.2 给大相框设置src属性 --> var imgs = ["../img/01.jpg", "../img/02.jpg", "../img/03.jpg", "../img/04.jpg", "../img/05.jpg", "../img/06.jpg", ]; var startId; //开始定时器的id var index; //随机角标 $(function(){ //处理按钮是否可以使用的效果 $("#startID").prop("disabled",false); $("#stoptID").prop("disabled",true); //1.给开始按钮绑定单击事件 $("#startID").click(function(){ //1.1定义循环定时器，20毫秒执行一次 startId = setInterval(function(){ //处理按钮是否可以使用的效果 $("#startID").prop("disabled",true); $("#stoptID").prop("disabled",false); //1.2生成随机角标0-6 index = Math.floor(Math.random()*7); //0.000-0.999 * 7然后向下取整 //1.3设置小相框的src属性 $("#img1ID").prop("src",imgs[index]); },20); }); //1.给结束按钮绑定单击事件 $("#stopID").click(function(){ //处理按钮是否可以使用的效果 $("#startID").prop("disabled",false); $("#stoptID").prop("disabled",true); //1.1停止定时器 clearInterval(startId); //1.2 给大相框设置src属性 //设置点击按钮之后先隐藏图片一秒钟再显示出来 $("#img2ID").prop("src",imgs[index]).hide(); $("#img2ID").show(1000); }); }); </script>
5.插件：增强JQuery的功能
1.实现方式：
1.$.fn.extend(Object)
* 增强通过Jquery获取的对象的功能 $("#id")
<script type="text/javascript">
//1.定义jquery的对象插件
$.fn.extend({
//定义了一个check()方法。所有的jq对象都可以调用该方法
check:function(){
//让复选框选中
//this：调用该方法的jq对象
this.prop("checked",true);
},
uncheck:function(){
//让复选框不选中
this.prop("checked",false);
}
});
$(function(){
//获取按钮
//$("#btn-check").check();
//复选框对象.check();
$("btn-check").click(function(){
//获取复选框对象
$("input[type='checkbox']").check();
});
$("btn-check").click(function(){
//取消复选框对象
$("input[type='checkbox']").uncheck();
});
});
</script> 2.$.extend(Object)
* 增强JQuery对象自身的功能 $/jQuery
<script type="text/javascript">
//对全局方法扩展2个方法，扩展min方法，求2个值的最小值，扩展max方法，求2个值的最大值
$.extend({
max:function(a,b){
return a >= b ? a:b;
},
min:function(){
return a <= b ? a:b;
}
});
//调用全局方法
var max = $.max(2,3);
alert(max)
</script>
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
