plug of jquery

最新推荐文章于 2020-10-14 20:36:19 发布

魔锋剑上缺

最新推荐文章于 2020-10-14 20:36:19 发布

阅读量638

点赞数

分类专栏： jquery

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

无参jquery插件的模板：

for example:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不带参数的jquery插件开发</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        (function($){
            $.fn.extend({
                myPlugName:function(){
                    $(this).click(function(){
                        alert($(this).val());    
                    });    
                }
            });    
        })(jQuery);
    </script>
</head>

<body>
    <input type="button" value="点击我" id="btn" />
</body>

    <script type="text/javascript">
          $("#btn").myPlugName();
    </script>
</html

带参数的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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        (function($){
            $.fn.hilight=function(options){
                var defaults={
                    foreground:'red',
                    background:'yellow'    
                };
                var opts = $.extend(defaults,options);
                $(this).css("background-color",opts.background);
                $(this).css("color",opts.foreground);
            };
        })(jQuery);
    </script>
</head>

<body>
    <div id="myDiv">This is a Params JQuery!</div>
</body>
<script type="text/javascript">
    $("#myDiv").hilight({foreground:'blue'});
</script>
</html>

jquery 其中一个标准模板为：

(function($){
            $.fn.hilight=function(options){
                var defaults={
                    foreground:'red',
                    background:'yellow'    
                };
                var opts = $.extend(defaults,options);
                //dosomethings
            };
        })(jQuery);

魔锋剑上缺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
plug of jquery

function(arg){...}这就定义了一个匿名函数，参数为arg而调用函数时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即：(function(arg){...})(param)这就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数而(function($){...}) (jQuery)则是一样的
复制链接

扫一扫