2022-06-21 jQuery自定义插件的定义和使用(以选项卡为例)

前端OnTheRun

已于 2022-10-08 17:53:18 修改

阅读量482

点赞数 1

分类专栏： jQuery 笔记文章标签： javascript jquery jq 插件选项卡

于 2022-06-21 20:05:35 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/125397603

版权

笔记同时被 2 个专栏收录

82 篇文章

订阅专栏

jQuery

16 篇文章

订阅专栏

本文介绍了jQuery插件的概念，强调其本质上是JQuery代码，并以自定义选项卡插件tabs为例，详细阐述了插件的开发过程，包括改进默认选中方式、将js和css分离到单独文件、以及如何在新的html中引入。同时，讨论了将选项卡插件转化为Vue组件的可能性，使得只需输入标签名即可使用。

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

文章目录

jQuery插件的概念

定义:插件是以JQuery的核心代码为基础,编写出的一套复合一定规范的应用程序
本质:JQuery代码
格式:以js文件的形式下载和引入
分类(按功能):

	封装对象方法的插件:基于某个DOM元素的jq对象(局部)
 	封装全局函数的插件:(全局)
	选择器插件:类似于find()

种类(列举):ul,表单和验证,输入,ajax,导航,图形图像等

插件引入时必须遵守的规定

1.必须引入样式
2.必须引入js并初始化
3.DOM必须符合规定,即插件和引入者的本地DOM结构要保持一致性

自定义选项卡插件tabs

原生js的选项卡:2021-06-24 css选项卡的实现

引入样式和js

<!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>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 405px;
            height: 330px;
            margin: 0 auto;
        }
        
        li {
            list-style-type: none;
            width: 99px;
            height: 30px;
            background: turquoise;
            text-align: center;
            line-height: 30px;
            float: left;
            border-right: solid #cef5f0;
            color: #ffffff;
        }
        
        li:nth-child(4) {
            border-right: none;
        }
        /* li:hover {
            background: rgb(255, 208, 0);
        } */
        
        .cont {
            clear: left;
            width: 100%;
            height: 300px;
        }
        
        p {
            width: 100%;
            height: 100%;
            background: #fff3e5;
            display: none;
            font-size: 40px;
            line-height: 300px;
            text-align: center;
            color: lightcoral;
            font-weight: bolder;
        }
        
        p:nth-child(1) {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>首页</li>
            <li>友情链接</li>
            <li>加入我们</li>
            <li>联系我们</li>
        </ul>
        <div class="cont">
            <p>我是首页内容</p>
            <p>我是友情链接</p>
            <p>我是加入我们</p>
            <p>我是联系我们</p>
        </div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>
        // 插件引入时必须遵守的规定:
        // 1.必须引入样式
        // 2.必须引入js并初始化
        // 3.DOM必须符合规定,即结构要保持一致

        $.fn.extend({
            tabs: function() { //拓展一个选项卡插件到原型
                $("ul>li").click(function() {
                    // 第一步:实现当前选中的li的样式改变和其他未选中的li的样式还原
                    $(this).css({
                        background: "rgb(255, 208, 0)"
                    }).siblings().css({
                        background: "turquoise"
                    });
                    // 第二步:记录当前点击的li对应的索引值
                    // console.log($(this).index());
                    // 第三步:同步显示该索引值对应的第index个.cont>p
                    $(".cont>p").eq($(this).index()).css({
                        display: "block"
                    }).siblings().css({
                        display: "none"
                    });
                });
            }
        });
        // 调用插件
        $(".box").tabs();
    </script>
</body>

</html>

改进:改进默认选中的方式和获取节点的方式

css:注释掉css中的默认选中

        /* p:nth-child(1) {
            display: block;
        } */

jquery:

$.fn.extend({
    tabs: function(index) {
        var liObjs = document.querySelectorAll("ul>li");
        var pObjs = document.querySelectorAll(".cont>p");
        // $(pObjs).eq(0).css({
        //     display: "block"
        // });
        $(liObjs).eq(index).css({
            background: "rgb(255, 208, 0)"
        });
        $(pObjs).eq(index).css({
            display: "block"
        });
        $(liObjs).click(function() {
            $(this).css({
                background: "rgb(255, 208, 0)"
            }).siblings().css({
                background: "turquoise"
            });
            $(pObjs).eq($(this).index()).css({
                display: "block"
            }).siblings().css({
                display: "none"
            });
        });
    }
});
// 调用插件
$("#box").tabs(2);

改进:将js和css放到单独文件中并在新的html中引入

tab/tab.css

        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 405px;
            height: 330px;
            margin: 0 auto;
        }
        
        li {
            list-style-type: none;
            width: 99px;
            height: 30px;
            background: turquoise;
            text-align: center;
            line-height: 30px;
            float: left;
            border-right: solid #cef5f0;
            color: #ffffff;
        }
      
        li:nth-child(4) {
            border-right: none;
        }
        
        .cont {
            clear: left;
            width: 100%;
            height: 300px;
        }
        
        p {
            width: 100%;
            height: 100%;
            background: #fff3e5;
            display: none;
            font-size: 40px;
            line-height: 300px;
            text-align: center;
            color: lightcoral;
            font-weight: bolder;
        }

tab/tab.js

$.fn.extend({
    tabs: function(index) {
        var liObjs = document.querySelectorAll("ul>li");
        var pObjs = document.querySelectorAll(".cont>p");
        // $(pObjs).eq(0).css({
        //     display: "block"
        // });
        $(liObjs).eq(index).css({
            background: "rgb(255, 208, 0)"
        });
        $(pObjs).eq(index).css({
            display: "block"
        });
        $(liObjs).click(function() {
            $(this).css({
                background: "rgb(255, 208, 0)"
            }).siblings().css({
                background: "turquoise"
            });
            $(pObjs).eq($(this).index()).css({
                display: "block"
            }).siblings().css({
                display: "none"
            });
        });
    }
});

tab/text.html
自定义插件的使用

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="./tab.css">
<body>
    <div id="app">
        <ul>
            <li>商品详情</li>
            <li>今日上架</li>
            <li>活动精选</li>
            <li>幸运用户</li>
        </ul>
        <div class="cont">
            <p>我是商品详情</p>
            <p>我是今日上架</p>
            <p>我是活动精选</p>
            <p>我是幸运用户</p>
        </div>
    </div>
    <script src="./tab.js"></script>
    <script>
        // 调用插件
        $("#app").tabs(4);//不一定非要叫.box
    </script>
</body>

结果

在这里插入图片描述

改进:html只保留框架,里面的li节点通过动态获取并初始化

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="./tab.css">
<body>
    <div class="box">
        <ul></ul>
        <div class="cont"></div>
    </div>
    <script src="./tab.js"></script>
    <script>
        // 此处data还可以改进为从后端获取
        var data = [{
            "title": "商品详情",
            "content": "我是商品详情"
        }, {
            "title": "今日上架",
            "content": "我是今日上架"
        }, {
            "title": "活动精选",
            "content": "我是活动精选"
        }, {
            "title": "幸运用户",
            "content": "我是幸运用户"
        }];
        var titleLi = data.map(item => `<li>${item.title}</li>`).join("");
        $("ul").html(titleLi);
        var contentP = data.map(item => `<p>${item.content}</p>`).join("");
        $(".cont").html(contentP);
        // 调用插件
        $(".box").tabs(2);
    </script>
</body>