前端小白的学习之路(jQuery 三)

吃清心的椰羊

已于 2024-03-07 18:26:10 修改

阅读量410

点赞数 7

文章标签：学习前端 jquery javascript

于 2024-03-07 17:30:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_245249828/article/details/136536793

版权

本文介绍了jQuery拓展插件，它通过扩展jQuery.fn对象增强jQuery库功能，本质是在jq原型上增添方法。还给出两个插件案例，分别是满屏滚动插件和瀑布流布局插件，并列出了相关代码文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：拓展插件的简介与应用方式案例

文章目录

一、拓展插件的简介
二、插件案例
- 满屏滚动插件
- 瀑布流布局插件

一、拓展插件的简介

jQuery的拓展插件是为了增强jQuery库功能而开发的插件，可以通过扩展jQuery.fn对象来实现。其本质就是在jq的原型上增添方法，从而可以被jq对象调用。

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>
        // 在jquery对象的原型上添加方法
        $.fn.foo = function(){
            console.log("test");
        }

        $.fn.myRadius = function(){
            $(this).css("borderRadius","50%");
        }
        // 通过jquery对象调用foo方法
        $(".box").foo();
        $(".box").myRadius();
    </script>
</body>
</html>

二、插件案例

1.满屏滚动插件

index.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery</title>
    <link rel="stylesheet" href="./css/fullpage.css">
    <style>
        p {
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <div id="container">
         <div class="section"><p>第1屏</p></div>
         <div class="section"><p>第2屏</p></div>
         <div class="section"><p>第3屏</p></div>
         <div class="section"><p>第4屏</p></div>
         <div class="section"><p>第5屏</p></div>
    </div>

    <!-- 先引入jquery文件 -->
    <script src="./js/jQuery.min.js"></script>
    <!-- 再引入插件 -->
    <script src="./js/jQuery.fullpage.js"></script>

    <script>
        // 满屏滚动功能
        $("#container").fullPage({
            // 设置每一屏的背景色
            arrColor: [ "#6666CC","#9933CC","#66CC99","#CC3333","#FF3399"],
            // 传递回调函数(滚动结束后执行该回调)
            afterLoad: function(index){
                console.log("index:",index);
                // 排他
                $(".section").eq(index).siblings().find("p").css({fontSize:"20px"})
                // 设置每一屏字体动画变大
                $(".section").eq(index).find("p").animate({fontSize:"40px"},300)
            }
        })
    </script>
</body>
</html>

fullpage.css:

body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
body,
html,
p {
    margin: 0;
    padding: 0;
}

#container > div {
    height: 100%;
}

jQuery.js : 略

jQuery.fullpage.js(满屏拓展插件)：

; (function ($) {
    // 在jquery的原型对象上添加方法
    $.fn.fullPage = function (option) {
        // console.log($(this))// 这个包含#container标签的jquery对象
        // 获取可视化页面的高度
        var height = document.documentElement.offfsetHeigt || window.innerHeight;
        // console.log(height);
        // 设置#container的高度
        $(this).css("height", height);

        // 接收传递的颜色数组
        var arrColor = option.arrColor;

        // 记录每一屏标签
        var $section = $(this).children(".section")

        // 记录#container对应的jquery对象
        var $container = $(this);

        // 找所有的.section标签
        $section.each(function (index, dom) {
            // console.log({index,dom});
            // 设置每一屏的背景色
            $(dom).css("backgroundColor", arrColor[index]);
        })

        // 定义每一屏幕的索引值
        var index = 0;

        // 监听页面/窗口滚动
        // window.onscroll = function(){
        //     console.log("test")
        // }
        // document.onmousewheel = function(){
        //     console.log("滚轮滚动了。。")
        // }
        // 定义布尔值 控制滚动的频率 （做防抖处理）
        var d = null;
        $(document).on("mousewheel", function (e) {
            // 从事件对象上获取信息
            // console.log(e)
            // -120 负数表示滚轮向后拉滚动   120 正数表示滚轮向前推滚动
            // console.log(e.originalEvent.wheelDelta);

            // 判断延迟函数是否正在执行
            if (d != null) clearTimeout(d);
            // 再执行延迟函数
            d = setTimeout(function () {
                var wheelDelta = e.originalEvent.wheelDelta;
                if (wheelDelta < 0) {
                    // 负数
                    index++;
                    // 提示最后一屏
                    if (index >= ($section.length - 1)) {
                        console.log("最后一屏，没有更多了~~")
                    }
                    // 控制索引值的范围
                    index = index > ($section.length - 1) ? ($section.length - 1) : index;

                }
                else {
                    // 正数
                    index--;
                    //  控制索引值的范围
                    index = index < 0 ? 0 : index;

                }
                // 设置页面滚动
                $container.stop().animate({
                    marginTop: -(index * height)
                }, 500,function(){
                    // 动画结束执行回调
                    option.afterLoad &&  option.afterLoad(index)
                })
                // 释放变量
                d = null;
            }, 100)
        })
    }
})(jQuery)

2.瀑布流布局插件

index.html:

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery</title>
    <link rel="stylesheet" href="./css/waterfall.css">
</head>

<body>

    <div class="layout">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>


    <script src="./js/jQuery.min.js"></script>
    <script src="./data/api.js"></script>
    <script src="./js/jQuery.waterfall.js"></script>
    <script>
        $(function(){
            // 调用瀑布流函数
            $(".layout").waterFall({data: data2});
        })
    </script>
</body>

</html>

waterfall.css:

body,
html,
ul,
ol {
    padding: 0;
    margin: 0;
}

ul,
ol {
    list-style: none;
}

.layout {
    width: 1200px;
    margin: 0 auto;
}

.layout ul {
    width: 100%;
    position: relative;
}

.layout ul li {
    width: 230px;
    height: 200px;
    /* border: 1px solid #ccc; */
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

data.js(数据):

var data2 = [{
	"height": 223,
	"color": "rgba(86,118,146,.85)"
}, {
	"height": 390,
	"color": "rgba(133,178,54,.85)"
}, {
	"height": 247,
	"color": "rgba(13,218,236,.85)"
}, {
	"height": 240,
	"color": "rgba(104,124,39,.85)"
}, {
	"height": 325,
	"color": "rgba(118,203,113,.85)"
}, {
	"height": 308,
	"color": "rgba(68,9,23,.85)"
}, {
	"height": 373,
	"color": "rgba(246,52,201,.85)"
}, {
	"height": 205,
	"color": "rgba(109,103,242,.85)"
}, {
	"height": 241,
	"color": "rgba(22,10,249,.85)"
}, {
	"height": 223,
	"color": "rgba(179,125,122,.85)"
}, {
	"height": 297,
	"color": "rgba(82,96,192,.85)"
}, {
	"height": 227,
	"color": "rgba(159,179,61,.85)"
}, {
	"height": 350,
	"color": "rgba(189,114,51,.85)"
}, {
	"height": 306,
	"color": "rgba(148,77,178,.85)"
}, {
	"height": 343,
	"color": "rgba(121,252,3,.85)"
}, {
	"height": 421,
	"color": "rgba(90,23,163,.85)"
}, {
	"height": 269,
	"color": "rgba(26,192,3,.85)"
}, {
	"height": 288,
	"color": "rgba(39,200,190,.85)"
}, {
	"height": 342,
	"color": "rgba(205,248,86,.85)"
}, {
	"height": 348,
	"color": "rgba(36,205,156,.85)"
}, {
	"height": 311,
	"color": "rgba(12,151,123,.85)"
}, {
	"height": 349,
	"color": "rgba(159,171,128,.85)"
}, {
	"height": 268,
	"color": "rgba(65,193,113,.85)"
}, {
	"height": 405,
	"color": "rgba(224,84,61,.85)"
}, {
	"height": 222,
	"color": "rgba(205,19,28,.85)"
}, {
	"height": 409,
	"color": "rgba(62,242,54,.85)"
}, {
	"height": 442,
	"color": "rgba(101,64,140,.85)"
}, {
	"height": 377,
	"color": "rgba(3,139,40,.85)"
}, {
	"height": 215,
	"color": "rgba(163,0,119,.85)"
}, {
	"height": 252,
	"color": "rgba(241,9,218,.85)"
}, {
	"height": 297,
	"color": "rgba(155,158,80,.85)"
}, {
	"height": 392,
	"color": "rgba(20,182,159,.85)"
}, {
	"height": 209,
	"color": "rgba(78,190,179,.85)"
}, {
	"height": 377,
	"color": "rgba(108,46,124,.85)"
}, {
	"height": 303,
	"color": "rgba(64,91,128,.85)"
}, {
	"height": 273,
	"color": "rgba(94,95,184,.85)"
}, {
	"height": 444,
	"color": "rgba(31,243,103,.85)"
}, {
	"height": 430,
	"color": "rgba(59,87,49,.85)"
}, {
	"height": 205,
	"color": "rgba(37,43,33,.85)"
}, {
	"height": 309,
	"color": "rgba(163,244,91,.85)"
}, {
	"height": 419,
	"color": "rgba(168,201,130,.85)"
}, {
	"height": 380,
	"color": "rgba(208,12,116,.85)"
}, {
	"height": 387,
	"color": "rgba(21,146,197,.85)"
}, {
	"height": 424,
	"color": "rgba(222,146,20,.85)"
}, {
	"height": 259,
	"color": "rgba(204,18,10,.85)"
}, {
	"height": 381,
	"color": "rgba(47,78,75,.85)"
}, {
	"height": 273,
	"color": "rgba(44,219,46,.85)"
}, {
	"height": 417,
	"color": "rgba(22,66,160,.85)"
}, {
	"height": 267,
	"color": "rgba(62,80,12,.85)"
}, {
	"height": 357,
	"color": "rgba(123,115,8,.85)"
}, {
	"height": 444,
	"color": "rgba(141,181,108,.85)"
}, {
	"height": 214,
	"color": "rgba(227,226,137,.85)"
}, {
	"height": 344,
	"color": "rgba(89,59,101,.85)"
}, {
	"height": 341,
	"color": "rgba(68,92,75,.85)"
}, {
	"height": 411,
	"color": "rgba(39,116,26,.85)"
}, {
	"height": 366,
	"color": "rgba(135,249,112,.85)"
}, {
	"height": 404,
	"color": "rgba(157,56,195,.85)"
}, {
	"height": 246,
	"color": "rgba(129,218,41,.85)"
}, {
	"height": 310,
	"color": "rgba(111,21,10,.85)"
}, {
	"height": 439,
	"color": "rgba(157,171,219,.85)"
}, {
	"height": 301,
	"color": "rgba(157,203,29,.85)"
}, {
	"height": 262,
	"color": "rgba(158,168,52,.85)"
}, {
	"height": 288,
	"color": "rgba(253,69,157,.85)"
}, {
	"height": 363,
	"color": "rgba(78,32,103,.85)"
}, {
	"height": 211,
	"color": "rgba(130,23,224,.85)"
}, {
	"height": 267,
	"color": "rgba(70,125,222,.85)"
}, {
	"height": 346,
	"color": "rgba(130,90,87,.85)"
}, {
	"height": 277,
	"color": "rgba(38,236,174,.85)"
}, {
	"height": 323,
	"color": "rgba(115,232,69,.85)"
}, {
	"height": 400,
	"color": "rgba(26,39,73,.85)"
}, {
	"height": 210,
	"color": "rgba(142,30,232,.85)"
}, {
	"height": 440,
	"color": "rgba(139,241,157,.85)"
}, {
	"height": 337,
	"color": "rgba(48,85,234,.85)"
}, {
	"height": 206,
	"color": "rgba(197,74,255,.85)"
}, {
	"height": 354,
	"color": "rgba(126,65,105,.85)"
}, {
	"height": 357,
	"color": "rgba(222,218,107,.85)"
}, {
	"height": 306,
	"color": "rgba(217,104,237,.85)"
}, {
	"height": 222,
	"color": "rgba(23,200,174,.85)"
}, {
	"height": 229,
	"color": "rgba(101,33,4,.85)"
}, {
	"height": 206,
	"color": "rgba(110,153,146,.85)"
}, {
	"height": 233,
	"color": "rgba(194,131,169,.85)"
}, {
	"height": 215,
	"color": "rgba(82,152,188,.85)"
}, {
	"height": 308,
	"color": "rgba(50,143,112,.85)"
}, {
	"height": 448,
	"color": "rgba(239,93,30,.85)"
}, {
	"height": 213,
	"color": "rgba(229,158,138,.85)"
}, {
	"height": 362,
	"color": "rgba(77,230,164,.85)"
}, {
	"height": 444,
	"color": "rgba(130,233,113,.85)"
}, {
	"height": 319,
	"color": "rgba(143,168,118,.85)"
}, {
	"height": 240,
	"color": "rgba(242,7,84,.85)"
}, {
	"height": 320,
	"color": "rgba(110,94,177,.85)"
}, {
	"height": 358,
	"color": "rgba(185,229,219,.85)"
}, {
	"height": 267,
	"color": "rgba(214,92,97,.85)"
}, {
	"height": 329,
	"color": "rgba(240,219,239,.85)"
}, {
	"height": 203,
	"color": "rgba(99,76,97,.85)"
}, {
	"height": 224,
	"color": "rgba(171,222,38,.85)"
}, {
	"height": 308,
	"color": "rgba(107,253,78,.85)"
}, {
	"height": 391,
	"color": "rgba(209,224,58,.85)"
}, {
	"height": 277,
	"color": "rgba(47,25,111,.85)"
}, {
	"height": 269,
	"color": "rgba(40,175,13,.85)"
}, {
	"height": 371,
	"color": "rgba(191,76,228,.85)"
}]

jQuery.js:略

jQuery.waterfall.js(瀑布流布局插件) ：

;(function(){
    //把waterFall挂载在jQuery原型上
    $.fn.waterFall = function(option){
        // console.log($(this));// 获取主要的jquery对象
        // 记录.layout对应的jquery对象（容器）
        var $layout = $(this);

        // 获取ul标签
        var $ul = $layout.children();

        // 记录data数据
        var result = option.data;

        // 多少列
        var columns = 5;


        // 每个名片的宽度
        var w = 230;

        // 每个名片之间的间距
        // var space = (width - (w * 5)) / (columns - 1);
        var space = 10;

        // 渲染所有的li标签
        var str = "";

        // 循环数组
        for(var i = 0 ; i < result.length ; i ++){
                str += `<li style="height:${result[i].height}px; background-color:${result[i].color};">1</li>`
        }

        // 表现字符串
        $ul.html(str);

        // 定义数组
        var arrHeight = [];

        // 记录所有li标签
        var $childs = $ul.children();
        

        // 设置每一个li标签的left 和 top 属性值
        $childs.each(function(index, dom){

            if(index < columns) {
                // 设置第一行5个标签的水平位置
                $(dom).css({
                    left: index * (w + space)
                }).slideDown(1500)
                // 把5个对应的高度数据添加数组中
                // var h = $(dom).height();
                var h = result[index].height;
                arrHeight.push(h)
            }
            else {
                // 寻找arrHeight这个数组中的最小值
                var minValue = arrHeight[0];
                var minIndex = 0;

                //循环arrHeight数组
                for(var j = 0 ; j < arrHeight.length ; j ++){
                    // 比较大小
                    if(minValue > arrHeight[j]) {
                        minValue = arrHeight[j];
                        minIndex = j;
                    }
                }

                // 设置第5个后的所有li标签的位置
                $(dom).css({
                    top: minValue + space,
                    left: minIndex * (w + space)
                }).slideDown(1500)


                // 更新arrHeight数组的高度数据
                // arrHeight[minIndex] += $(dom).height() + space;
                arrHeight[minIndex] +=result[index].height + space;
            }

            // 检查所有的索引和dom信息
            // console.log({index,dom})
        })
    }   
})()