从0开始学web-day30-jquery03

最新推荐文章于 2024-05-05 23:58:22 发布

oxygen_ls

最新推荐文章于 2024-05-05 23:58:22 发布

阅读量213

点赞数

分类专栏：前端 # jQuery 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122917791

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

1.复习
day29复习-jq02

2.三位置法轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #carousel {
            position: relative;
            width: 540px;
            height: 300px;
            border: 1px solid rgb(207, 93, 93);
            margin: 0 auto;
            overflow: hidden;
        }
        /* 布局关键是：所有图片都是定位 并且在右侧候场位置 */
        #carousel > .unit > li {
            position: absolute;
            width: 560;
            height: 300px;
            left: 560px;
            top: 0;
        }
        /* 入场位置 */
        #carousel > .unit > li:first-child {
            left: 0;
        }
        .btns a {
            position: absolute;
            top: 50%;
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0,0.5);
            font-size: 20px;
            text-decoration: none;
            color: #fff;
            text-align: center;
            line-height: 60px;
            margin-top: -30px;

        }
        .btns a:first-child {
            left: 10px;
        }
        .btns a:last-child {
            right: 10px;;
        }
        .circles {
            position: absolute;
            left: 50%;
            bottom: 20px;
            width: 160px;
            display: flex;
            margin-left: -80px;
            justify-content: space-between;

        }
        .circles > li {
            width: 20px;
            height: 20px;
            background-color: orange;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            
        }
        .circles > li.choose {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <!-- 布局 -->
    <div id="carousel">
        <ul class="unit">
            <li><img src="./images/dongwu/0.jpg" alt=""></li>
            <li><img src="./images/dongwu/1.jpg" alt=""></li>
            <li><img src="./images/dongwu/2.jpg" alt=""></li>
            <li><img src="./images/dongwu/3.jpg" alt=""></li>
            <li><img src="./images/dongwu/4.jpg" alt=""></li>
        </ul>
        <div class="btns">
            <!-- 为了防止每次点击都刷新 href里面写上 javascript: void(0);或者# -->
            <a href="javascript: void(0);" id="prev">&lt</a>
            <a href="#" id="next">&gt</a>
        </div>
        <ul class="circles">
            <li class="choose">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    
</body>
<script src="./js/jquery.js"></script>
<script>
    // 获取元素
    var $prev = $('#prev');
    var $next = $('#next');
    var $imgs = $('.unit li');
    var $circles = $('.circles > li');

    // 定义信号量
    var idx = 0;
    // 定义长度属性
    var len = $circles.length;

    // 右按钮点击事件
    $next.click(function() {
        // 添加防流氓
        if($imgs.is(':animated')) return;
        // 1 当前图片退场
        $imgs.eq(idx).animate({left: -560}, 600);

        // 2 改变信号量
        idx++;
        // 限制边界
        if(idx > len-1) {
            idx = 0;
        }

        // 3 下一张入场(从560的位置)
        $imgs.eq(idx).css({left: 560}).animate({left: 0}, 600);

        // 对应信号量小圆点要添加类名
        $circles.eq(idx).addClass('choose').siblings().removeClass('choose');

    })

    // 左按钮事件
    $prev.click(function() {
        // 添加防流氓
        if($imgs.is(':animated')) return;
        // 当前图片退场
        $imgs.eq(idx).animate({left: 560}, 600);
        // 改变信号量
        idx--;
        // 限制边界
        if(idx < 0) {
            idx = len - 1;
        }
        // 下一张图片入场
        $imgs.eq(idx).css({left: -560}).animate({left: 0}, 600);
        // 对应信号量小圆点要添加类名
        $circles.eq(idx).addClass('choose').siblings().removeClass('choose');
    })

    // 小圆点的事件
    $circles.click(function() {
        // 获取当前序号
        var index = $(this).index();

        // 如果当前序号和信号量相同的时候 什么也不做
        if(index === idx) return;

        // 与当前的信号量比较
        if(index > idx) {
            // 说明图片应该从右边进入 相当于有按钮事件

            // 1 当前图片退场
            $imgs.eq(idx).stop(true).animate({left: -560}, 600);
            
            // 改变信号量
            idx = index;
            // 对应信号量图片入场
            $imgs.eq(idx).css({left: 560}).stop(true).animate({left: 0}, 600);
            // 对应信号量小圆点要添加类名
            $circles.eq(idx).addClass('choose').siblings().removeClass('choose');

        } else {
            // 说明图片应该从左侧进入 相当与左按钮事件
            // 当前图片退场
            $imgs.eq(idx).stop(true).animate({left: 560}, 600);
            // 改变信号量
            idx = index;
            // 下一张图片入场
            $imgs.eq(idx).css({left: -560}).stop(true).animate({left: 0}, 600);
            // 对应信号量小圆点要添加类名
            $circles.eq(idx).addClass('choose').siblings().removeClass('choose');
        }
    })
</script>
</html>

3.函数节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点我执行事件</button>
</body>
<script>
    // 获取元素
    var bt = document.getElementById('btn');

    // 定义锁
    var lock = true;
    // 定义函数
    function demo() {
        console.log('demo');
    }
    // 绑定点击事件
    btn.onclick = function() {
        // 判断锁的状态
        if(!lock) return;

        // 把锁关闭
        lock = false;
        demo();

        // 开启延时器
        setTimeout(function() {
            // 把锁打开
            lock = true;
        }, 2000);
    }
</script>
</html>

4.clone和appendTo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script src="./js/jquery.js"></script>
    <script>
        // clone方法用于复制节点的
         var $lis = $('.list');
        //  clone list元素(连同子节点一起复制了)
        var $newList = $lis.clone();
        // console.log($newList);

        // appendTo方法 将子元素追加到父元素的后面作为最后一个子节点存在的
        $newList.appendTo(document.body);
    </script>
</body>
</html>

5.each方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello world</div>
    <div>hello world</div>
    <div>hello world</div>
    <script src="./js/jquery.js"></script>
    <script>
        // each方法是用于遍历的
            // 第一种使用方式$(dom).each()
        // $('div').each(function(i,item) {
        //     console.log(arguments);
        // })

        // 第二种使用方式： $.each(target, fn) 可以遍历数组 还可以遍历对象

        // 定义数组
        var arr = ['华为','苹果','小米','三星'];

        // 定义对象
        var obj = {
            msg:'hello',
            num:100
        }

        // 遍历数据
        // $.each(arr, function(index, item) {
        //     // 第一个参数表示索引值
        //     // 第二个参数表示成员值
        //     console.log(arguments);
        // })

        $.each(obj, function(key, value) {
            // 第一个参数表示key
            // 第二个参数表示value
            console.log(arguments);
        })
    </script>
</body>
</html>

6.碎片轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #carousel {
            position: relative;
            width: 560px;
            height: 300px;
            border: 1px solid red;
            margin: 0 auto;
            overflow: hidden;
        }

        #carousel > .unit > li {
            position: absolute;
            width: 560px;
            height: 300px;
        }

        /* 使用z-index自定义其顺序 */
        #carousel > .unit > li.active {
            z-index: 10;
        }
     
        .btns a {
            position: absolute;
            top: 50%;
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            margin-top: -30px;
            z-index: 20;
        }
        .btns a:first-child {
            left: 10px;
        }
        .btns a:last-child {
            right: 10px;
        }

        .circles {
            position: absolute;
            left: 50%;
            bottom: 20px;
            width: 160px;
            display: flex;
            margin-left: -80px;
            justify-content: space-between;

        }
        .circles > li {
            width: 20px;
            height: 20px;
            background-color: orange;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }
        .circles > li.choose {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <!-- 布局 -->
    <div id="carousel">
        <ul class="unit">
            <li class="active"><img src="./images/dongwu/0.jpg" alt=""></li>
            <li><img src="./images/dongwu/1.jpg" alt=""></li>
            <li><img src="./images/dongwu/2.jpg" alt=""></li>
            <li><img src="./images/dongwu/3.jpg" alt=""></li>
            <li><img src="./images/dongwu/4.jpg" alt=""></li>
        </ul>
        <div class="btns">
            <a href="javascript: void(0);" id="prev">&lt;</a>
            <a href="javascript: void(0);" id="next">&gt;</a>
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
    // 获取元素
    var $prev = $('#prev');
    var $next = $('#next');
    var $imgs = $('.unit li');
    // 定义信号量
    var idx = 0;
    // 获取长度属性
    var length = $imgs.length;

    // 定义锁
    var lock = true;


    // 创建容器元素 （猫腻容器） 并追加到unit后面
    var $maoni = $('<li class="maoni"></li>').appendTo('.unit');
  

    var arr = (function() {
        // 定义空数组
        var result = [];

        // 创建3行5列的元素
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 5; j++) {
                // 创建碎图容器
                result.push($('<div></div>')
                // 设置样式
                .css({
                    position: 'absolute',
                    width: 0,
                    height: 0,
                    // 背景图片
                    backgroundImage: 'url(./images/dongwu/1.jpg)',
                    // 改变图片的背景定位
                    backgroundPositionX: -112 * j,
                    backgroundPositionY: -100 * i,
                    // 改变盒子的位置
                    left: 112 * j,
                    top: 100 * i
                })
                // 追加到maoni容器元素中
                .appendTo($maoni));


                // 分步:
                // var $div = $('<div></div>');
                // $div.css(xxxx);
                // $div.appendTo($maoni);
                // result.push($div);
            }
        }

        // 返回结果
        return result;
    })()

    
    // 作为公共的方法
    function changeStyle() {
        // 遍历arr轮换图片
        $.each(arr, function(i, item) {
            // 替换图片
            item
                .css('backgroundImage', 'url(./images/dongwu/'+ idx +'.jpg)')
                // 动态生成碎图容器的宽高
                .animate({ width: 112, height: 100 }, 300 + Math.random() * 3000)
                
        })
            

        
        // 为了保证所有的碎图宽高生成 要开启延时器
        setTimeout(function() {
            // 遍历arr 
            // $.each(arr, )
           $maoni.find('div').each(function(i, item) {
                // 将所有的div宽高变为0 保证下一次可以动态生成容器的宽高
                // console.log(11, item);
                item.style.width = 0;
                item.style.height = 0;

                // css
                // $(item).css({
                //     width: 0,
                //     height: 0
                // })
           })


           // 让真图出现
           $imgs.eq(idx).addClass('active').siblings().removeClass('active');

           // 所有动画完毕之后 开锁
           lock = true;

        }, 3500)
    }
    
    // 右按钮事件
    $next.click(function() {
        // 判断锁的状态
        if (!lock) return;

        // 关闭锁
        lock = false;

        // 让猫腻容器加上active
        $maoni.addClass('active');

        // 改变idx
        idx++;

        // 判断边界
        if (idx > length - 1) {
            idx = 0;
        }

        // 执行方法
        changeStyle();
    })
    
    // 左按钮事件
    $prev.click(function() {
        // 判断锁的状态
        if (!lock) return;

        // 关闭锁
        lock = false;

        // 让猫腻容器加上active
        $maoni.addClass('active');

        // 改变idx
        idx--;

        // 判断边界
        if (idx < 0) {
            idx = length - 1;
        }

        // 执行方法
        changeStyle();
    })
    </script>
</body>
</html>

7.间歇模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .container {
            position: relative;
            width: 278px;
            height: 78px;
            border: 2px solid red;
            margin: 150px auto;
            /* overflow: hidden; */
        }
        .container > .list {
            position: absolute;
            width: 300px;
            left: 0;
            top: 0;
            height: 999px;
        }
        .container > .list li {
            float: left;
            height: 78px;
            width: 78px;
            margin-right: 22px;
            margin-bottom: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="list">
            <li><img src="./images/mingxing/0.jpg" alt=""></li>
            <li><img src="./images/mingxing/1.jpg" alt=""></li>
            <li><img src="./images/mingxing/2.jpg" alt=""></li>
            <li><img src="./images/mingxing/3.jpg" alt=""></li>
            <li><img src="./images/mingxing/4.jpg" alt=""></li>
            <li><img src="./images/mingxing/5.jpg" alt=""></li>
            <li><img src="./images/mingxing/6.jpg" alt=""></li>
            <li><img src="./images/mingxing/7.jpg" alt=""></li>
            <li><img src="./images/mingxing/8.jpg" alt=""></li>
        </ul>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        // 获取元素
        var $list = $('.list');
        var idx = 0;
        // 获取长度
        var length = $list.children().length;

        // js实现clone并追加
        $list.children('li:lt(3)').clone().appendTo($list);

        // 开启定时器
        setInterval(function() {
            idx++;

            // 拉动list的top值
            $list.animate({top: -90 * idx}, 600, function() {
                // 边界判断
                if(idx > length/3 -1) {
                    idx = 0;
                    // 瞬移到真图
                    $list.css({top:0})
                }
                
            })

        }, 2600)
    </script>
</body>
</html>

8.篮球积分系统-数组思维

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .fenshu {
            display: flex;
            font-size: 50px;

        }
    </style>
</head>
<body>
    <div class="fenshu">
        <h1 id="adui">0</h1>
        <h1>-</h1>
        <h1 id="bdui">0</h1>
    </div>
    <div class="dui">
        <input type="radio" name="dui" class="clickFn" id="aa" checked>A队
        <input type="radio" name="dui" class="clickFn" id="bb">B队
        <button>加一分</button>
        <button>加两分</button>
        <button>加三分</button>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        // 获取button
        var $btns = $('button');

        // 定义数组
        var fenshuArr = [0,0];
        
        // 定义容器数组
        var duiArr = [$('#adui'), $('#bdui')];

        // 定义变量
        var idx = 0;

        // 绑定点击事件
        $('.clickFn').click(function() {
            // 获取当前的序号 a队是0 b队是1
            idx = $(this).index();
        })

        // 加一分
        $btns.eq(0).click(function() {
            // 改变分数
            fenshuArr[idx]++;
            // 体现在元素中
            duiArr[idx].html(fenshuArr[idx]);
        })
        // 加2分
        $btns.eq(1).click(function() {
            // 改变分数
            fenshuArr[idx] +=2 ;
            // 体现在元素中
            duiArr[idx].html(fenshuArr[idx]);
           
        })
        // 加3分
        $btns.eq(2).click(function() {
           // 改变分数
           fenshuArr[idx] += 3;
            // 体现在元素中
            duiArr[idx].html(fenshuArr[idx]);
        })
    </script>
</body>
</html>

9.篮球积分系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .fenshu {
            display: flex;
            font-size: 50px;

        }
    </style>
</head>
<body>
    <div class="fenshu">
        <h1 id="adui">0</h1>
        <h1>-</h1>
        <h1 id="bdui">0</h1>
    </div>
    <div class="dui">
        <input type="radio" name="dui" id="aa">A队
        <input type="radio" name="dui" id="bb">B队
        <button>加一分</button>
        <button>加两分</button>
        <button>加三分</button>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        // 获取button
        var $btns = $('button');

        // 定义变量
        var fenshua = 0;
        var fenshub = 0;
        // 加一分
        $btns.eq(0).click(function() {

            // 判断给哪个队伍加分 利用is方法  is(':checked') 是否被选中
            if($('#aa').is(':checked')) {
                fenshua++;
                // 体现在元素中
                $('#adui').html(fenshua);
            } else {
                fenshub++;
                // 体现在元素中
                $('#bdui').html(fenshub);
            }

        })
        // 加2分
        $btns.eq(1).click(function() {
            if($('#aa').is(':checked')) {
                fenshua += 2;
                // 体现在元素中
                $('#adui').html(fenshua);
            } else {
                fenshub += 2;
                // 体现在元素中
                $('#bdui').html(fenshub);
            }
        })
        // 加3分
        $btns.eq(2).click(function() {
            if($('#aa').is(':checked')) {
                fenshua += 3;
                // 体现在元素中
                $('#adui').html(fenshua);
            } else {
                fenshub += 3;
                // 体现在元素中
                $('#bdui').html(fenshub);
            }
        })
    </script>
</body>
</html>