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

作者：Monodyee | 2024-03-13 05:05:10

踩

jq插件

什么是插件，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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$.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"} 
1
2
3
4
5
6

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!--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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// 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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/227932