首页 > 代码库 > 一天一点新东西-jq插件写法

一天一点新东西-jq插件写法

2024-08-11 17:25:52   218人阅读

1.通过$.extend()来扩展jQuery

$.extend({
    test: function () {
        //函数方法
    }
})

直接通过$调用函数
$.test()

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

index.js

;(function ($,window,document,undefined) {//分号是好习惯
    var methods={
        init: function () {
            return this.each(function () {
                //相应方法
            })
        },
        otherfunc: function () {

        }
    }
    $.fn.myPlugin = function(param) {
        //this是被选中的jq对象元素
        console.log(this.text());
        //if ( methods[method] ) {
        //    return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        //} else if ( typeof method === ‘object‘ || ! method ) {
        //    return methods.init.apply( this, arguments );
        //} else {
        //    $.error( ‘Method ‘ +  method + ‘ does not exist on jQuery.tooltip‘ );
        //}
        return this.each(function () {
            //this被选中的dom对象元素
            var $this=$(this);
            $this.text(param);
        });


    }
})(jQuery,window,document)

index.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://www.mamicode.com/index.js"></script>
    <script>
        $(function(){
            $(‘.nnn‘).myPlugin(‘5‘);
        })
    </script>
</head>
<body>
<div class="nnn">1</div>
<p class="nnn">2</p>
</body>
</html>

注意调用插件方法$().myPlugin()最好在dom加载完成之后。
一天一点新东西-jq插件写法






























        

            
                
                  
                
                

                    联系

                    我们