黑马程序员技术交流社区

标题: Jquery动画 [打印本页]

作者: 黄金体验 时间: 2019-9-19 14:06
标题: Jquery动画
方法名说明
hide([speed],[easing],[fun]) 将jquery对象隐藏
可以传入3个参数
speed:动画速度
   预定义的值："slow","normal","fast",也可以指定毫秒数（不加引号）
easing:动画速度的变化方式。（默认为swing）
      "swing":慢-快-慢。
      "linear":匀速
function：动画结束后，执行该函数
show([speed],[easing],[fun]) 显示隐藏的jquery对象
toggle([speed],[easing],[fun]) 如果该对象被隐藏，则显示该对象
如果该对象被显示，则隐藏该对象
slideUp([speed],[easing],[fun]) 将对象隐藏，有滑动的动画效果
slideDown([speed],[easing],[fun]) 显示被隐藏的对象，有滑动的动画效果
slideToggle([speed],[easing],[fun]) 切换对象的显示状态（显示/隐藏），有滑动的动画效果
fadeOut([speed],[easing],[fun]) 淡出隐藏对象
fadeIn([speed],[easing],[fun]) 淡入显示对象
slideToggle([speed],[easing],[fun]) 淡入/淡出对象

jquery遍历
js中的遍历方式：使用for循环

Jquery中的遍历
方式1： jqObj.each(function(){})
对每个对象调用function中的代码
在function中，可以通过this来获得当前遍历到的js对象
也可以在function的参数列表中定义参数，第一个参数为索引，第二个参数为元素
$cities.each(function (index,element) {
                  // alert(index + ":" + element.innerHTML);
                  //元素是js对象，可以转换为jquery对象
                  alert(index + ":" + $(element).html());
            });

实现break：function中return false
//当列表项为‘上海’时，结束遍历
            $cities.each(function (i,e) {
                  if ($(e).html() == "上海") {
                     return false;
                  } else {
                     alert($(e).html());
                  }
            })

实现continue：function中return true
当列表项为‘上海’时，跳过，执行下一趟
            /*$cities.each(function () {
                  if ($(this).html() == "上海") {
                     return true;
                  } else {
                     alert($(this).html());
                  }
            });

方式2：$.each(object, function(I,e){})
使用方法与方式1基本相同
既可以遍历js对象，也可以遍历jquery对象

方式3： for (元素 of 集合)
jquery3.0以上版本可以使用
在idea中使用会报错，但是可以运行
for (city of $cities) {
               alert($(city).html());
            }

jquery事件绑定与解绑

绑定事件
方式1：
JqObj.event(function(){
事件发生后执行的代码
})

链式编程的方式，绑定多个事件：
JqObj.event1(function1(){
op1…
}).event2(function2(){
op2…
});

代码
$("#name").mouseover(function () {
            alert("鼠标来了!");
         }).mouseleave(function () {
            alert("鼠标走了...");
         });

方式2：on绑定，off解绑
on绑定：
jqObj.on("event", function(){
事件发生后的操作
});
off解绑:
jqObj.off("event") 解绑对象上的event事件
jqObj.off() 解绑对象上的所有事件

事件切换
            jqObj.toggle(fn1,fn2...)
            第一次点击，执行fn1，第二次点击执行fn2，
            可以传入任意数量的function

            注意：toggle()在jquery1.9版本中被删除
            高版本jquery要使用此函数，需要引入jquery-migrate-1.0.0.js

jquery的插件
$.fn.extend()：增强jquery对象的功能
在extend中定义的方法，可以被jquery对象所调用
定义方式：
$.fn.extend({
方法名:function(){
…
}, //定义的方法之间用逗号隔开
方法名2:function(){
…
}
});

之后就可以使用jqObj.方法名  来调用在插件中定义的方法了
代码
<!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">
         /*
         jquery插件：
            1.  $.fn.extend()
                  增强jquery对象的功能
            2.  $.extend()
                  增强Jquery对象/$对象的功能
         */

         //$.fn.extend()

         //定义插件
         $.fn.extend({
            //自定义插件中的第一个方法
            check:function () {
                  //插件中的this对象是一个jquery对象
                  //它代表了调用这个插件方法的对象

                  //将调用了check()方法的复选框对象设置为选中状态
                  this.prop("checked", true);
            },
            //插件中定义的方法用逗号隔开
            //自定义插件的第二个方法
            uncheck:function () {
                  this.prop("checked", false);
            }
         });

         //使用插件
         $(function () {
            //给‘点击选中复选框’按钮绑定点击事件
            $("#btn-check").click(function () {
                  //获取所有复选框,调用自定义插件中的方法
                  $("input[type='checkbox']").check();
            });

            //给‘点击取消选中复选框’按钮绑定事件
            $("#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():扩展全局对象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;
            }
         });

         //定义好后，可以通过$.方法名来调用这些方法了
         $(function () {
            var max = $.max(1,2);
            alert(max);

            var min = $.min(3, 4);
            alert(min);
         })

      </script>
</head>
<body>
</body>
</html>

案例
广告的自动显示与隐藏
<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
      <title>广告的自动显示与隐藏</title>
      <style>
         #content{width:100%;height:500px;background:#999}
      </style>

      
      <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
      <script>
         //页面加载完成3秒后，显示广告，显示5秒后，关闭
         /*function adShow() {
            $("#ad").show("slow");
         }
         function adHide() {
            $("#ad").hide("slow");
         }

         $(function () {
            setTimeout(adShow,3000);
            setTimeout(adHide,8000);
         });*/

         $(function () {
            setTimeout(function () {
                  $("#ad").show("slow");
            }, 3000);
            setTimeout(function () {
                  $("#ad").hide("slow")
            }, 8000);
         })
      </script>
</head>
<body>

<div>
      
      <div id="ad" style="display: none;">
         <img style="width:100%" src="../img/adv.jpg" />
      </div>

      
      <div id="content">
         正文部分
      </div>
</div>
</body>
</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2