<script>

        //隐藏div
        function hideFn(){
            //1.1：---->默认效果方式
            //第一个参数：slow,normal,fast，或表示动画时长的毫秒数值(如：1000)
            //第二个参数：swing(慢--快--慢) ,linear（匀速）
            //第三个参数可以无，可以有
            //$("#showDiv").hide("slow","in",function () {
        /*    $("#showDiv").hide(5000,"linear",function () {
                alert("隐藏了");
            });*/
            //1.2：---->滑动效果方式
   /*         $("#showDiv").slideUp("slow","swing");*/

            //1.3：---->淡入淡出效果方式
            $("#showDiv").fadeOut("slow","swing");
        }
        //显示div
        function showFn(){
                         //1.1：---->默认效果方式
            //第一个参数：slow,normal,fast，或表示动画时长的毫秒数值(如：1000)
            //第二个参数：swing(慢--快--慢) ,linear（匀速）
            //第三个参数可以无，可以有
            //$("#showDiv").hide("slow","in",function () {
        /*    $("#showDiv").show(5000,"linear",function () {
                alert("显示了");
            });*/

                         //1.2：---->滑动效果方式
     /*       $("#showDiv").slideDown("slow","swing");*/

                        //1.3：---->淡入淡出效果方式
            $("#showDiv").fadeIn("slow","swing");
        }
        //隐藏和显示切换div
        function toggleFn(){
            //1.1：---->默认效果方式
            //第一个参数：slow,normal,fast，或表示动画时长的毫秒数值(如：1000)
            //第二个参数：swing(慢--快--慢) ,linear（匀速）
            //第三个参数可以无，可以有
            //$("#showDiv").hide("slow","in",function () {
           /* $("#showDiv").toggle(2000,"swing");*/

            //1.2：---->滑动效果方式
         /*   $("#showDiv").slideToggle("slow","swing");*/

            //1.3：---->淡入淡出效果方式
            $("#showDiv").fadeToggle("slow","swing");
        }
    </script>
 
 
  <script type="text/javascript">
        /*
             js----->jq
             $(js对象）

             jq---->js
             jq对象.get(索引号)
             jq对象[索引号]
                遍历
                    1. js的遍历方式
                     * for(初始化值;循环结束条件;步长)
                    2. jq的遍历方式
                        1. jq对象.each(callback)
                           citys.each(function (index, element) {
                               //alert(index+":"+element.innerHTML);//js
                                       //alert(index+":"+$(element).text());//jq
            });
                        2. $.each(object, [callback])--->(object--->jq对象)
                         $.each(citys,function (index, element) {
                               //alert(index+":"+element.innerHTML);//js
                                      //alert(index+":"+$(element).text());//jq

                                      第一种和第二种回调函数一样，都有两种，而且一模一样
            });
                        3. for..of:jquery 3.0 版本之后提供的方式

        */
        $(function () {
            var citys = $("#city li");

            //             1.1    ------->js数组遍历
            /*     for (var i = 0; i <citys.length ; i++) {
                     //var innerHTML = citys[i].innerHTML;//js
                     var innerHTML = $(citys[i]).text();//jq
                     if ("天津"==innerHTML){
                         //break;//结束本次循环，不进行i+1（下次）循环---->结果不会有重庆
                         continue;//结束i次循环，但进行i+1（下次）循环---->结果会有重庆

                     }
                     alert(i+"："+innerHTML);
                 }*/

            //          1.2    ------->jq数组遍历
            //1.21:1. jq对象.each(callback)----->callback是回调函数
            //第一种：没有索引号：可以有值：this代表每项
            /* citys.each(function () {
             js----->jq
             $(js对象）

             jq---->js
             jq对象.get(索引号)
             jq对象[索引号]
                 alert($(this).html());
                 alert(this.innerHTML);
             });*/
            //第二种：有索引号：有值：第一个参数是索引号index,第二个参数是每项的值
            //两者都是js对象
            /*    citys.each(function (index, element) {
                    //alert(index+":"+element.innerHTML);//js
                    //alert(index+":"+$(element).text());//jq
                });*/

            for (li of citys) {
                //li---->js
               // alert(li.innerHTML); //---->js
                alert($(li).html()); //---->jq
            }
        });

    </script>
 
 
 
 
  <script type="text/javascript">
        function hide() {
            //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();//让表单提交
        }

        $(function () {
                 //1.1：标准绑定
          /*  $("#name").click(function () {
                alert("我被点击了。。。。。");
            });*/
                 //1.2：ON绑定
       /*   $("#name").on("click",function () {
                alert("on--click--我被点击了。。。。。");
            })*/
                  //on("事件办法名",回调函数);
            $("#name").on("mouseover",function () {
                alert("on--click--我被点击了。。。。。");
            }).on("mouseout",function () {
                alert("on--mouseout--我被点击了。。。。。");
            })
            $("#name").off("mouseout");//已经解除jq对象($("#name"))中的mouseout事件绑定
        });

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

            //2. 使用off解除btn按钮的单击事件
            $("#btn2").click(function () {
                //解除btn按钮的单击事件
                //$("#btn").off("click");
                $("#btn").off();//将组件上的所有事件全部解绑
            });
        }

        $(function () {
            $("#btn").on("click", function () {
                alert("使用on绑定点击事件");
            });
            $("#btn2").on("click", function () {
                $("#btn").off("click");
            });

        });

    </script>
 
 
 
 
  <script type="text/javascript">
        function hide() {
            //获取按钮，调用toggle方法
            $("#btn").toggle(function () {
                //改变div背景色backgroundColor 颜色为 green
                $("#myDiv").css("backgroundColor", "green");
            }, function () {
                //改变div背景色backgroundColor 颜色为 pink
                $("#myDiv").css("backgroundColor", "pink");
            });
        }

        $(function () {
            $("#btn").toggle(function () {
                $("#myDiv").css("background", "orange");
            }, function () {
                $("#myDiv").css("background", "green");
            }, function () {
                $("#myDiv").css("background", "red");
            }, function () {
                $("#myDiv").css("background", "pink");
            }, function () {
                $("#myDiv").css("background", "grey");
            }, function () {
                $("#myDiv").css("background", "blue");
            }, function () {
                $("#myDiv").css("background", "black");
            }, function () {
                $("#myDiv").css("background", "white");
            }, function () {
                $("#myDiv").css("background", "yellow");
            }, function () {
                $("#myDiv").css("background", "green");
            })
        })

    </script>
 
 
     <script>
        function hide() {
            //定义定时器，调用adShow方法 3秒后执行一次
            setTimeout(adShow, 3000);
            //定义定时器，调用adHide方法，8秒后执行一次
            setTimeout(adHide, 8000);

            //显示广告
            function adShow() {
                //获取广告div，调用显示方法
                $("#ad").show("slow");
            }

            //隐藏广告
            function adHide() {
                //获取广告div，调用隐藏方法
                $("#ad").hide("slow");
            }
        }

        /*
            需求：
                1. 当页面加载完，3秒后。自动显示广告
                2. 广告显示5秒后，自动消失。

            分析：
                1. 使用定时器来完成。setTimeout (执行一次定时器)
                2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
                3. 使用  show/hide方法来完成广告的显示
         */

        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法
        $(function () {
            setTimeout(adshow,3000);
            setTimeout(adhide,8000);

        });

        function adshow() {
            //$("#ad").show("slow", "swing");
            //$("#ad").slideDown("slow", "swing");
            $("#ad").fadeIn("slow", "swing");
        }

        function adhide() {
            //$("#ad").slideUp("slow", "swing");
            //$("#ad").hide("slow", "swing");
            $("#ad").fadeOut("slow", "swing");
        }
    </script>
 
 
 
 
   <script language='javascript' type='text/javascript'>
        function hide() {
            var imgs = ["../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg",
            ];
            var startId;//开始定时器的id
            var index;//随机角标

            //处理按钮是否可以使用的效果
            $("#startID").prop("disabled", false);
            $("#stopID").prop("disabled", true);

            //1. 给开始按钮绑定单击事件
            $("#startID").click(function () {
                // 1.1 定义循环定时器 20毫秒执行一次
                startId = setInterval(function () {
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled", true);
                    $("#stopID").prop("disabled", false);

                    //1.2生成随机角标 0-6
                    index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                    //1.3设置小相框的src属性
                    $("#img1ID").prop("src", imgs[index]);

                }, 20);
            });

            //2. 给结束按钮绑定单击事件
            $("#stopID").click(function () {
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);

                // 1.1 停止定时器
                clearInterval(startId);
                // 1.2 给大相框设置src属性
                $("#img2ID").prop("src", imgs[index]).hide();
                //显示1秒之后
                $("#img2ID").show(1000);
            });
        }

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

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

         */

        var array = [
            "../img/man00.jpg"
            , "../img/man01.jpg"
            , "../img/man02.jpg"
            , "../img/man03.jpg"
            , "../img/man04.jpg"
            , "../img/man05.jpg"
            , "../img/man06.jpg"];

        var index;
        var start;
        $(function () {
            $("#startID").prop("disabled", false);
            $("#stopID").prop("disabled", true);
            $("#startID").click(function () {
                start = setInterval(function () {
                    //index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                    $("#startID").prop("disabled", true);
                    $("#stopID").prop("disabled", false);
                    index = Math.floor(Math.random() * 7);
                    $("#img1ID").prop("src", array[index]);
                }, 20);
            });

            $("#stopID").click(function () {
                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);
                clearInterval(start);
                $("#img2ID").prop("src", array[index]).hide();
                // $("#img2ID").fadeIn("1500","swing");
                $("#img2ID").show("1500", "swing");
                //$("#img2ID").slideDown("1500","swing");
            });
        });

    </script>
 
 
 
 <script type="text/javascript">
        //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
        function hide() {
            $.fn.extend({
                //定义了一个check()方法。所有的jq对象都可以调用该方法
                check: function () {
                    //让复选框选中

                    //this:调用该方法的jq对象
                    this.prop("checked", true);
                },
                uncheck: function () {
                    //让复选框不选中

                    this.prop("checked", false);
                }

            });
        }

        $.fn.extend({
            check: function () {
                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>
 
 
 <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;
            }
           
           
        });

        //调用全局方法
        var max = $.max(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);
    </script>