黑马就业班（02.JavaWeb+项目实战\day12.jQuery）part2—— JQuery高级

• 本文参考自己的项目：myday13part1（创建项目记住导入JQuery的包）

今日内容：

1. JQuery 高级
	1. 动画
	2. 遍历
	3. 事件绑定
	4. 案例
	5. 插件

1、动画
  三种方式显示和隐藏元素（这些方法在JQ文档——效果 中可以查询到）

1. 默认显示和隐藏方式
	1) show([speed,[easing],[fn]])
		参数：
		1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
		2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
				* swing：动画执行时效果是 先慢，中间快，最后又慢
				* linear：动画执行时速度是匀速的
		3. fn：在动画完成时执行的函数，每个元素执行一次。

	2) hide([speed,[easing],[fn]])
	3) toggle([speed],[easing],[fn])

2. 滑动显示和隐藏方式
	1. slideDown([speed],[easing],[fn])
	2. slideUp([speed,[easing],[fn]])
	3. slideToggle([speed],[easing],[fn])

3. 淡入淡出显示和隐藏方式
	1. fadeIn([speed],[easing],[fn])
	2. fadeOut([speed],[easing],[fn])
	3. fadeToggle([speed,[easing],[fn]])

  动画1测试代码如下：

    <script>
        //隐藏div
        function hideFn() {
            // $("#showDiv").hide("slow" , "swing" , function () {
            //     alert("我走了.....");
            // });
            //默认方式
            // $("#showDiv").hide("fast" , "swing");//不设置函数。

            //滑动方式
            // $("#showDiv").slideUp("slow");//划上，既收起

            //淡入淡出方式
            $("#showDiv").fadeOut("slow");//淡出，既隐藏
        };

        //显示div
        function showFn() {
            // $("#showDiv").show("slow" , "swing" ,function () {
            //     alert("我来了....");
            // });
            //默认方式
            // $("#showDiv").show(5000 , "linear");

            //滑动方式
            // $("#showDiv").slideDown(3000);//划下，既放出

            //淡入淡出方式
            $("#showDiv").fadeIn(3000);//淡入，既显示
        }

        //切换显示和隐藏div
        function toggleFn() {
            // $("#showDiv").toggle("fast" , "linear" , function () {
            //     alert("切换了");
            // });
            //默认方式
            // $("#showDiv").toggle("slow");//如果不设置easing，默认是“swing”

            //滑动方式
            // $("#showDiv").slideToggle("slow");

            //淡入淡出方式
            $("#showDiv").fadeToggle("slow");
        }

    </script>

---

2、遍历

1. js的遍历方式
	* for(初始化值;循环结束条件;步长)

2. jq的遍历方式
	1) jq对象.each(callback)
		1. 语法：
			jquery对象.each(function(index,element){});
				* index:就是元素在集合中的索引
				* element：就是集合中的每一个元素对象（JS对象）

				* this：集合中的每一个元素对象（JS对象）
		2. 回调函数返回值：
			* false:如果当前function返回为false，则结束循环(break)。
			* true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
	2) $.each(object, [callback])
	3) for..of: jquery 3.0 版本之后提供的方式，类似于java的foreach
		for(元素对象 of 容器对象)
注意区分JQ与JS的遍历方式！！！

  对于JQuery的遍历我们需要注意的是，如果我们使用3种JQuery的for方法或者JS的方法去遍历JQuery数组，最后获取出来的每一个元素都会是JS对象。具体见下面的代码。（JQuery对象通过数组的方式可以抓换为JS对象）
  遍历测试代码如下：

<script type="text/javascript">
        //遍历无序列表，并取出其中li标签的内容
        $(function () {
            //获取所有的ul下的li
            var citys = $("#city li");//获取
标签对应的JQ对象数组

            //1、JS的遍历方式
            for(var i=0 ; i<citys.length ; i++)
            {
                // alert(i+":"+citys[i].innerHTML);//将JQ对象转换为JS对象（数组方式），并使用JS的innerHTML属性获取标签的内容

                //下面是JS的遍历方式中break与continue的使用
                // if("上海" == citys[i].innerHTML)
                // {
                //     // break;
                //     continue;
                // }

                // alert(i+":"+citys[i].innerHTML);
                //break：只会打印北京，其他的不会打印
                //continue：出来上海其他的都会打印
            }


            // 2. jq对象.each(callback)，callback被称为回调函数
            citys.each(function (index , element) {
                //获取li对象 第一种方式 this，这个this就代表citys这个
 JQ数组下面的每一个
标签（这种方式无法获取索引）
                // alert(this.innerHTML);//注意这个this也是属于用数组的方式将JQ数组citys下的每一个JQ对象转换为JS对象，同样只能使用JS的方法innerHTML，不能使用JQ的方法html()

                //获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）
                // alert(index +":"+ element.innerHTML);//同样，遍历出来的element也是JS对象

                //导入，我们也可以将变量出来的JS对象转换为JQ对象，使用JQ的html()方法
                // alert($(this).html());
                // alert(index +":"+ $(element).html());


                //下面是JQuery的遍历方式中break与continue的使用
                if("上海" == $(element).html())
                {
                    //如果当前function返回为false，则结束循环(break) ; 如果返回为true，则结束本次循环，继续下次循环(continue)
                    //当前function指的是each方法。其实我们直接在if中return false（break）与return true（continue）即可
                    // return false;//break 只会打印北京，其他的不会打印

                    // return true;//continue 出来上海其他的都会打印
                }
                // alert(index +":"+ $(element).html());

            })


            //3 $.each(object, [callback]) :全局遍历
            // 与2中的方法类似，就是将JQ对象放入()中，不过这里这个object对象既可以是JQ对象，也可以是JS数组对象；2中的方法只能是JS对象
            // $.each(citys , function () {
            //     alert(this.innerHTML);//注意，这里的this同样是JS对象
            // })

            // $.each(citys , function (index , element) {
            //     alert(index+":"+$(element).html());//注意，这里的element同样是JS对象
            // })


            //4. for ... of:jquery 3.0 版本之后提供的方式
            for(li of citys)//li代表citys这个JQuery数组里面的每一个元素
            {
                alert($(li).html());//注意，此处的li也都是JS对象
            }

        })

    </script>

---

3、事件绑定
  事件在JQuery文档的“事件”中查询

1. jquery标准的绑定方式
	* jq对象.事件方法(回调函数)；
	* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
		* 表单对象.submit();//让表单提交
2. on绑定事件/off解除绑定
	* jq对象.on("事件名称",回调函数)
	* jq对象.off("事件名称")
		* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
3. 事件切换：toggle
	* jq对象.toggle(fn1,fn2...)
		* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
		
	* 注意：1.9版本 事件切换.toggle() 方法删除（其他的toggle方法还在）,jQuery Migrate（迁移）插件可以恢复此功能。
		 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

 &emsp绑定事件1测试代码如下：

    <script type="text/javascript">
        $(function () 
        {
            //获取name对象，绑定click事件
            $("#name").click(function () {
                alert("我被点击了...");
            });

            //给id=name绑定鼠标移动到元素之上事件，再绑定鼠标移出事件（给一个元素绑定多个事件）
            // $("#name").mouseover(function () {
            //     alert("鼠标来了...");
            // })
            // $("#name").mouseout(function () {
            //     alert("鼠标走了...");
            // })

            //JQuery中可以使用链式编程来简化操作
            // $("#name").mouseover(function () {
            //     alert("鼠标来了...");
            // }).mouseout(function () {
            //     alert("鼠标走了...");
            // });

            /*
            对于focus事件：当元素获得焦点时，触发 focus 事件。
            如果我们focus事件没有使用回调函数，会自动触发浏览器默认的事件行为，
            既页面一加载，就会自动使得文本输入框获得焦点
             */
            //阻塞一下，因为页面一加载，就会使得文本输入框获得焦点
            alert("我要获得焦点了...");
            $("#name").focus();
            /*
            同样，表单对象.submit(): 当提交表单时，会发生 submit 事件。可以使用回调函数进行表单校验
            如果没有设置回调函数，页面一加载表单会自动提交
            */
        })

    </script>

---

 &emsp绑定事件2（on方法）测试代码如下：

<script type="text/javascript">
        $(function () {
            //1.使用on给按钮绑定单击事件  click
            $("#btn").on("click" , function () {
                alert("我被点击了");
            });

            //2. 使用off解除btn按钮的单击事件。点击“btn2”按钮实现这个功能
            $("#btn2").click(function () {
                // $("#btn").off("click");
                $("#btn").off();//将组件上的所有事件全部解绑
            })
        });

    </script>

---

 &emsp绑定事件3（事件切换）测试代码如下：

<script type="text/javascript">
        $(function () {
            //获取按钮，调用toggle方法
            $("#btn").toggle(function () {
                $("#myDiv").css("backgroundColor" , "green");
            } , function () {
                $("#myDiv").css("backgroundColor" , "pink");
            });
        });
        //注意，要导入“jquery-migrate-1.0.0.js”包，事件的toggle方法才能使用
    </script>

---

4、案例

案例1. 广告显示和隐藏

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

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        /*
           需求：
               1. 当页面加载完，3秒后。自动显示广告
               2. 广告显示5秒后，自动消失。

           分析：
               1. 使用JS的定时器来完成。setTimeout (执行一次定时器)，setInterval(循环执行)
               2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
               3. 使用  show/hide方法来完成广告的显示
        */
        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法
        $(function () {
            //setTimeout方法是BOM的window对象的方法，可以省略window对象
            //定义定时器，调用adShow方法 3秒后执行一次
            setTimeout(adShow , 3000);//调用adShow方法不需要加()

            //定义定时器，调用adHide方法，8秒后执行一次
            setTimeout(adHide , 8000);//因为定时是从页面加载时候开始定时的，因此这里定义8秒！！！

            /*
            JS中在方法参数列表中调用方法的时候，如果在“”里面的，需要给方法加()，
            而在“”外面，则直接使用方法名调用即可，不需要加()。
            上面也可以写为 setTimeout("adHide()", 8000);
             */
        });

//我们在定时器中可以使用css属性的方式来控制广告图片的显示与隐藏，但是突然出现和消失，不好看
//我们发现动画按钮hide()与show（）同样是通过控制"display:none;"属性的方式来控制元素的出现与消失
//且动画的方式会更加平滑。
        function adShow() {
            $("#ad").show("slow");
        }

        function adHide() {

            $("#ad").hide("slow");
        }

    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display:none;">  <!--我们在div中定义了"display: none;"，这样这个图片就会被隐藏 -->
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

案例2. 抽奖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>

        /*
            分析：
                1. 给开始按钮绑定单击事件
                    1.1 定义循环定时器
                    1.2 切换小相框的src属性
                        * 定义数组，存放图片资源路径
                        * 生成随机数。数组索引


                2. 给结束按钮绑定单击事件
                    1.1 停止定时器
                    1.2 给大相框设置src属性

         */

        //准备一个一维数组，装用户的像片路径
        var imgs = [
            "../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"
        ];

        //首先，定义2个变量，不要定义到window.load里面去
        var startId;//用于记录循环显示定时器的状态，以便停止时可以清除定时器
        var index;//用于记录停止时图片的角标
        $(function () {
            //首先，页面一加载，将开始按钮置为可用，而停止按钮置为不可用
            $("#startID").prop("disabled" , false );//通过disabled属性设置按钮的可用与不可用
            $("#stopID").prop("disabled" , true );

            /*
            注意，disabled是标签button的属性，而不是CSS样式style里面的一个属性，隐藏我们使用prop设置标签属性，而不是使用css设置样式
            DHTMl文档中，有一栏“标签属性/属性”指的就是标签属性与DOM的对应，
            而“样式”一栏就是css样式（Style属性中设置）与DOM的对应。
             */

            $("#startID").click(function () {
                //点击开始按钮，马上将开始按钮置为不可用，而停止按钮置为可用
                $("#startID").prop("disabled" , true );
                $("#stopID").prop("disabled" , false );

                startId = setInterval( function () {
                    //使用JS的Math对象生成随机数，并将值赋予index
                    index = Math.floor(Math.random()*7);//0.000--0.999 --> * 7 --> 0.0-----6.9999，取到的数就是0-6
                    //不断设置小像框中的值
                    $("#img1ID").prop("src" , imgs[index]);//通过prop方法设置src属性

                } , 20);//每0.02秒切换一次
            });


            $("#stopID").click(function () {
                //点击开始按钮，马上将开始按钮置为可用，而停止按钮置为不可用
                $("#startID").prop("disabled" , false );
                $("#stopID").prop("disabled" , true );

                //清除定时器，这样定时器的方法便不会执行
                clearInterval(startId);

                //先设置大像框的src属性，先隐藏
                $("#img2ID").prop("src" , imgs[index]).hide();
                $("#img2ID").show(1000);//1秒后动画显示大像框
            });
        });

    </script>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStart()">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStop()">


</body>
</html>

5、JQuery的插件
  插件：增强JQuery的功能。实现方式如下：

1. $.fn.extend(object) ：对象级别的插件
	* 增强通过Jquery获取的对象的功能  $("#id")是一个JQuery对象，我们可以增强这个对象的功能。（既可以为通过Jquery获取的对象添加新的方法）
2. $.extend(object)：全局级别的插件
	* 增强JQeury对象自身的功能  $/jQuery

  增强通过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">
        //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框

        //1.定义jqeury的对象插件（注意这里定义的格式）
        $.fn.extend({
            //定义了一个check()方法。所有的jq对象都可以调用该方法
            check : function () {
                //让复选框选中
                //this:调用该方法的jq对象（注意，只有这种情况下this代表JQ对象）
                this.prop("checked" , true);//我们设置checked属性为checked或者true都可以
            },//注意定义多个方法直接用逗号隔开

            uncheck : function () {
                this.prop("checked" , false);
            }
        });

        $(function () {
            $("#btn-check").click(function () {
                //获取所有type属性为checkbox属性的input标签，既获取所有复选框
                $("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>

  增强JQeury对象自身的功能

<!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个值最大值
        //全局方法既不需要JQuery对象也可以使用的！可以直接通过$来调用，注意区分
        $.extend({
            max:function (a,b) {
                return a>=b ? a:b;
            },
            min:function (a,b) {
                return a<=b ? a:b;
            }
        });

        //调用全局方法，注意全局方法的调用方式
        var max = $.max(4,3);
        alert(max);

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

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