plug of jquery

逃离我推掉我的手 2022-07-14 05:25 70阅读 0赞

function(arg)\{...\}  
这就定义了一个匿名函数，参数为arg  
  
而调用函数 时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即：  
(function(arg)\{...\})(param)  
这 就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数  
  
而(function($)\{...\}) (jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery  
  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
其实就等于  
var fn = function($)\{....\};  
fn(jQuery);  
  
其实可以这么理解，不过要注意的是fn是不存在的  
那个函数直接定义，然后就运行了。就“压缩”成下面的样子了  
(function($)\{...\})(jQuery)   
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
简单理解是(function($)\{...\})(jQuery)用来定义一些需要预先定义好的函数  
$(function()\{ \})则是用来在DOM加载完成之后运行\\执行那些预行定义好的函数.  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
  
开发jQuery插件时总结的一些经验分享一下。   
一、先看   
  
jQuery(function()\{   
\});   
全写为   
jQuery(document).ready(function()\{   
  
\});   
  
意义为在DOM加载完毕后执行了ready()方法。   
二、再看   
  
(function()\{   
  
\})(jQuery)；   
其实际上是执行()(para)匿名方法,只不过是传递了jQuery对象。   
  
三、总结   
  
jQuery(function()\{　\});用于存放操作DOM对象的代码，执行其中代码时DOM对象已存在。不可用于存放开发插件的代码，因 为jQuery对象没有得到传递，外部通过jQuery.method也调用不了其中的方法（函数）。   
(function()\{　\})(jQuery)；用于存放开发插件的代码，执行其中代码时DOM不一定存在，所以直接自动执行DOM操作的代码 请小心使用。

无参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 其中一个标准模板为：