jq插件的基础知识，以及小demo

奋斗的菜鸟.com

已于 2022-05-05 20:56:14 修改

阅读量868

点赞数 2

分类专栏：插件文章标签： jquery 前端

于 2022-05-05 16:42:39 首次发布

本文链接：https://blog.csdn.net/CodePrincess/article/details/124591983

版权

插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文深入介绍了jQuery插件的概念，包括其作为代码重用和功能解耦工具的角色。文中详细解释了立即执行函数的作用，并展示了如何使用$.extend()扩展jQuery对象。此外，还通过一个具体的tab标签页插件示例，演示了如何编写和使用jQuery插件，包括如何处理用户自定义选项。文章强调了插件的优点，如代码复用，但也提及了可能存在的维护和兼容性问题。

摘要由CSDN通过智能技术生成

什么是插件，jq插件，优点，缺点，未完待续…

JQ插件就是用JQ代码编写的工具。就比如说我们用的模板，如EasyUi。我们只需要引入EasyUi的JS文件，然后调用它对应的方法，效果就出来了。实现代码的可重用性，以及功能解耦。方便我们使用，我们只需要引入JQ插件的.JS脚本，然后直接调用就可以了

关于立即执行函数：

(function(){})() 这是一个自调函数，函数定义好之后自动执行。（function(){}）表示一个匿名函数，而后面紧跟着的（）表示立即调用此函数。而且（）也是向函数传递参数的地方。

插件怎么写

通过 $.extend()来扩展jQuery 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

通过$.fn 向jQuery添加新的方法

通过$.widget()应用jQuery UI的部件工厂方式创建

$.fn写法原理原型对象的方法，在对象上扩展原型对象上没有的属性和方法可以给jquery实例用

 var f = "3.4.1"
      , k = function(e, t) {
        return new k.fn.init(e,t) 
        //调用jQuery原型上init方法创建一个jQuery实例对象(JQ对象)
    }
    jquery.prototype
    k.fn = k.prototype = {
    ....
}
$.fn.show=function(){
console.log('i am happy today')}
//$.fn.show=function(){}的调用把方法扩展到了对象的prototype上， 所以实例化一个jQuery对象的时候，它就具有了这些方法。
$('body').show()
VM437:2 i am happy today

$.extend

1.合并多个对象。这里使用的就是$.extend()的嵌套多个对象的功能。
所谓嵌套多个对象，有点类似于数组的合并的操作。

//用法: jQuery.extend(obj1,obj2,obj3,..) 
var Css1={size: "10px",style: "oblique"} 
var Css2={size: "12px",style: "oblique",weight: "bolder"} 
$.jQuery.extend(Css1,Css2) 
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性 
// Css1 = {size: "12px",style: "oblique",weight: "bolder"}

tab标签页小插件

<!--html代码-->
<!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>
    <link rel="stylesheet" href="./tabs.css">
</head>
<body>
    <div class="container">
        <ul class="option-list">
           <li class='current'>新闻频道</li>
           <li>军事频道</li>
           <li>体育频道</li>
           <li>娱乐频道</li>
           <li>音乐频道</li>
        </ul>
        <ul class="card-list">
           <li class='current'>这是新闻频道</li>
           <li>这是军事频道</li>
           <li>这是体育频道</li>
           <li>这是娱乐频道</li>
           <li>这是音乐频道</li>
        </ul>
   </div>
</body>
<script src="js/jQuery.min.js"></script>
<script src="tabs.js"></script>
<script>
    $('.container').tab({
        $opt_li:'.option-list li',
        $car_li:'.card-list li',
        type:'click'
    });
</script>
</html>

<!--css代码-->
* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
.container {
    width: 800px;
    margin: 50px auto;
}
.container .option-list {
    height: 40px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.container .option-list li {
    float: left;
    padding: 0 20px;
    height: 39px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    line-height: 40px;
    background-color: #eee;
    cursor: pointer;
}
.container .option-list li.current {
    height: 40px;
    background-color: #fff;
}
.container .card-list {
    border: 1px solid #ccc;
    border-top: none;
}
.container .card-list li {
    display: none;
    height: 300px;
    padding: 20px;

}
.container .card-list li.current {
    display: block;
}

// let $option_li=$(".option-list li");
// let $card_li=$(".card-list li");
// $option_li.click(function(){
//     let index=$(this).index();
//     $(this).addClass('current').siblings().removeClass('current');
//     $card_li.eq(index).addClass('current').show();
//     $card_li.eq(index).siblings().removeClass('current').hide();
// })
;(function($){
//b,敏感的童鞋肯定发现了功能代码里面的class元素以及事件是被写死的，要是我们在另外一个页面写的class和事件需求和这个插件的不同，


    $.fn.tab = function(options){ //$.fn=$.prototype 给jQuery对象添加方法或属性
        let this_=this;//$option_li   $card_li
        var defaults = {
            $opt_li:'',
            $car_li:'',
            current_class:'current',
            type:'mouseover' //如果需求是click事件 type:click
          //各种参数，各种属性
        }
        var options = $.extend(defaults,options);//extends将default对象的属性以及方法都整合到了options里。
        let $option_li=$(this).find(options.$opt_li);
        let $card_li=$(this).find(options.$car_li);

        let cur_class=options.current_class;//extends将default对象的属性以及方法都整合到了options里。

        $option_li.on(options.type,function(){
            let index=$(this).index();
            $(this).addClass(cur_class).siblings().removeClass(cur_class);
            $card_li.eq(index).addClass(cur_class).show();
            $card_li.eq(index).siblings().removeClass(cur_class).hide();
        })
 
        return this;
    }


})(jQuery);

引用 https://blog.csdn.net/qq_44607694/article/details/101640436

奋斗的菜鸟.com

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq插件的基础知识，以及小demo

什么是插件，jq插件，优点，缺点，未完待续…JQ插件就是用JQ代码编写的工具。就比如说我们用的模板，如EasyUi。我们只需要引入EasyUi的JS文件，然后调用它对应的方法，效果就出来了。实现代码的可重用性，以及功能解耦。方便我们使用，我们只需要引入JQ插件的.JS脚本，然后直接调用就可以了1.关于立即执行函数：(function(){})() 这是一个自调函数，函数定义好之后自动执行。（function(){}）表示一个匿名函数，而后面紧跟着的（）表示立即调用此函数。而且（）也是向函数传递参数
复制链接

扫一扫