[ jQuery] 你还在使用jquery的click(),bind()方法么?-优快云博客

本文详细介绍了如何使用jQuery创建自定义插件，包括插件的基本结构、如何添加功能、事件处理以及如何优化代码。通过实例演示，帮助开发者快速掌握jQuery插件开发技巧。

2019独角兽企业重金招聘Python工程师标准>>>

下面只是一个demo，当然这里包含了jquery的插件的写法。

关于jquery的插件的写法，可以自行百度。如果你的自学能力够厉害的话，可以查看jquery的源码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  <title></title>  
</head>  
<body>  
    <input type="button" value="test" id="test"/>  
    <script type="text/javascript">  
        $(function(){  
            $("#test").hello({  
                "size":1  
            });  
        });  
    </script>  
    <script type="text/javascript">  
    ;(function($){  
        $.fn.hello = function(options){  
            var defaults = {"size":0},  
  
                opts     = $.extend({},defaults,options),  
  
                show = {  
                    play:function(options){  
                        var _root =  this;   
                        _root.autoPlay();  
                        _root.eventClick();  
                    },  
                    autoPlay:function(){  
                        console.log("auto");  
                    },  
                    eventClick:function(){  
                        //$("#test").on("click",{show:"dd"},function(e){  
                        //    console.log("click :" +  e.data.show);  
                        //});  
  
                        $("#test").on({  
                            click:function(){  
                                alert("click");  
                            },  
                            mouseenter:function(){  
                                alert("enter");  
                            },  
                            mouseleave:function(){  
                                alert("leave");  
                            }  
                        });  
                    }  
                };  
            return this.each(function(){  
                show.play(opts);  
            });  
        };  
    })(jQuery);  
    </script>  
</body>  
</html>

如里你从这里学到了什么，那么恭喜！

转载于:https://my.oschina.net/u/2331760/blog/407376