21 jquery高级

********************************* 学会查文档**********************************

1.

2.

 

 

 

1. 动画                                                                                                                                  

   

 

 

注意:toggle切换

 

2. *******************遍历******************************                                                  

两种jquery遍历方式(注意:return true 和 return false的区别)

 

 

 

 

3. 事件绑定                                                                                                                             

    1.一般使用下面绑定事件

 

    2.事件绑定的第二种方式&&事件的解绑

 

3.事件的切换

事件切换:toggle

        * jq对象.toggle(fn1,fn2...)

            * 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....

            

        * 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。

             <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

 

<!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"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn").toggle(function () {

                $("#myDiv").css("backgroundColor", "green");

            }, function () {

                $("#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>

 

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秒后,自动消失。

         */

        $(function () {

            setTimeout(show, 3000);

        });

        //显示广告

        function show() {

            $("#ad").css("display", "block");

            setTimeout(hide, 5000);

        }

        //隐藏广告

        function hide() {

            $("#ad").css("display", "none");

        }

    </script>

</head>

<body>

<!-- 整体的DIV -->

<div>

    <!-- 广告DIV -->

    <div id="ad" style="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>

</head>

<script>

    //准备一个一维数组,装用户的像片路径

    var imgs = [

        "../img/man00.jpg",

        "../img/man01.jpg",

        "../img/man02.jpg",

        "../img/man03.jpg",

        "../img/man04.jpg",

        "../img/man05.jpg",

        "../img/man06.jpg"

    ];

    //获取随机整数0 ~ imgs.length-1

    var n = 0;

    var m = imgs.length-1;//6

    function rnd(n, m){

        var random = Math.floor(Math.random()*(m-n+1)+n);

        return random;

    }

    $(function () {

        //页面加载完,停止按钮置为不可用

        $("#stopID").prop("disabled",true);

        var interval;

        //点击开始按钮

        $("#startID").click(function () {

            //点击开始后,开始按钮置为不可用,停止按钮置为可用

            $("#startID").prop("disabled",true);

            $("#stopID").prop("disabled",false);

            //每隔100ms,改变小项框的src属性

              interval = setInterval(function () {

                $("#img1ID").prop("src",imgs[rnd(n,m)]);

            },100);

        });

        //点击停止按钮

        $("#stopID").click(function () {

            //1.点击停止后,停止按钮置为不可用,开始按钮置为可用

            $("#stopID").prop("disabled",true);

            $("#startID").prop("disabled",false);

            clearInterval(interval);

            //2.把小相框的图片放置到大相框中

            //2.1获取小相框src属性值

            var img1_src = $("#img1ID").prop("src");

            //2.2设置img1_src到大相框src中

            $("#img2ID").prop("src",img1_src).hide();//为实现动画,先隐藏,在进行特效展示

            //2.2  1毫秒之后动态展示

            setTimeout(function () {

                $("#img2ID").show(1000,"linear");

            },1);

        });

    });

</script>

<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" >

<!-- 停止按钮 -->

<input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px" >

</body>

</html>

 

 

 

5.小知识---->js获取随机数

function rnd(n, m){

var random = Math.floor(Math.random()*(m-n+1)+n);

return random;

}

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值