Jquery 及 javascript写函数的方法

1.jQuery 页面加载初始化的方法:

  $(function(){

      alert("第二种方法。");

  });

$(document).ready(  function(){  } );

1.1.javascript在页面初始化的方法:

1.在body里面写onload

2.在脚本里面写

  window.onload=function(){

       //要初始化的东西

  }

2.jQuery加入函数的方法:

1、$.extend(src)

    该方法就是将src合并到jquery的全局对象中去，如：

    $.extend({

        hello:function(){alert('hello');}

    });

2、$.fn.extend(src)

   该方法将src合并到jquery的实例对象中去，如:

   就是将hello方法合并到jquery的实例对象中。

   $.extend({net:{}});   //这是在jquery全局对象中扩展一个net命名空间。

   $.extend($.net,{

       hello:function(){alert('hello');}

    })  //这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

2.1.javascript 加入函数的方法:
<script language="javascript"> 

    function testDemo() {
};

</script>

1.显式函数，即在声明函数时明确定义了函数名。

function functionName([parameters]){//

代码块

};  
2.匿名函数（函数直接量），即在声明函数时没有定义函数名，而是把函数赋值给一个变量。

var functionName=function([parameters]){//

代码块

};  
3.作为对象的的构造函数，即
Var functionName=new Function

（  [arg1,[arg2..argN]],body ）
4.一次性对象的函数
var variable = new Object(){  
   variable.variA="Va1"; 
   variable.variB="Va2";  
   variable.method = function(){return this.variA + variB; }}  

静态类有两种写法：

   1. 类似Json对象的写法

       var myclass = {

              name : "123",

              pubfn : function(){

                            alert("pubfn1 is called");

                           }

       };
      调用形式：myclass.name, myclass.pubfn()

      这种写法使类的成员的访问权限均为public。

     2. 匿名函数的写法

          var myclass = function(){

                 var name = "123";　　　　　　　　//private field

                 var privatefn = function(){　　　　 //private method

                                       alert(name);

                                       }

                 return{　　　　　　　　　　　　　　　　　//return public field and method

                        Name: "hello " + name,　　　　//public field

                        pubfn : function(){

                                                 privatefn();　　　　　　　　　　　　　　　 //call private method

                                                 alert("this is a returned function");　//public method

                                                  }

                            }

            }();

       这种写法的好处是可以将私有和共有的成员方法和变量分开，实际应用中可将复杂的逻辑写的私有方法中，

       而return一个公用的接口调用私有方法。
       调用形式：myclass.Name, myclass.pubfn()

注意类结尾处的小括号，它的作用是创建对象，去除小括号的话，则调用形式为：myclass().Name, myclass().pubfn()。

jquery 插件写法 

1. 对JQuery自身的扩展插件

顾名思义，这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。

插件代码示例：

$.extend({
    handleTableUI :function(table){
        var thisTable = $("#" + table);
        $(thisTable).find("tr").bind("mouseover",function
() {
            $(this).css({ color:"#ff0011", background:
"blue" });
            });
        $(thisTable).find("tr").bind("mouseout",function
() {
            $(this).css({ color:"#000000", background:
"white" });
            });
    }
});
示例说明：当要对JQuery自身进行扩展的时候，需要采用$.extend();的形式进行开发，JQuery的extend()方法为我们提供了扩展 JQuery自身的方式，在extend()方法中，我们采用{...}的形式编写具体的方法体。其中，最重要的是要定义我们自己的扩展方法，如示例中的 handleTableUI。定义的方式是：方法名
: function(参数){ 方法体 }。通过此种方式我们就可以定义JQuery自己的扩展方法，而且这个方法可以在web页面通过智能提示显示出来。页面中调用的代码如下：

<scripttype="text/javascript">
    $(document).ready(function () {
        $.handleTableUI("newTable");
    });
</script>
 
2. 对HTML标记或页面元素进行扩展

使用这种插件的扩展方式，在使用此插件时，需要首先引用经过JQuery包装的页面元素，如：$("#tableId").Method()。

插件代码示例：

(function($) {
    $.fn.setTableUI =function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        var options = $.extend(defaults, options);
        this.each(function(){
            var thisTable=$(this);
            $(thisTable).find("tr").bind("mouseover",function
() {
                $(this).css({ color:"#ff0011",
background: "blue" });
                });
            $(thisTable).find("tr").bind("mouseout",function
() {
                $(this).css({ color:"#000000",
background: "white" });
                 });
        });
    };
})(jQuery);
示例说明：当要对页面元素进行JQuery扩展时，需要采用(function($){...})(JQuery);的方式进行开发。在“...”处，定义我们自己的方法，定义方式是：$.fn.自定义方法名 = function(参数){...};的形式定义扩展方法的具体内容。在页面调用的时候不同于对JQuery自身的扩展。具体调用代码如下：

<scripttype="text/javascript">
    $(document).ready(function () {
        $("#newTable").setTableUI();
    });
</script>
 
3. 不要用在页面显式调用JQuery的方法，而是通过直接添加JQuery插件脚本引用，即可实现对该插件的调用。
一般，如果需要用到一些全局的JQuery插件，即：插件的方法不需要显式调用，而是引用脚本即可；同时，这种插件一般对整个Web页面起到全局配置或设置的作用，如：对<body></body>内部的内容进行整体布局，此时可以采用脚本引用的方式实现。
插件代码示例：

(function($) {
    $.tableUI = { set:function () {
        var thisTable = $("table");
        $(thisTable).find("tr").bind("mouseover",function
() {
            $(this).css({ color:"#ff0011", background:
"blue" });
        });
        $(thisTable).find("tr").bind("mouseout",function
() {
            $(this).css({ color:"#000000", background:
"white" });
        });
    }
    };
    //此处需要进行自调用
    $(function () {
        $.tableUI.set();
    });
})(jQuery);
示例说明：如果上面这段代码在my.plugin.js文件中，那么，我们只需要在页面上添加对此脚本文件的引用即可，引用方式为：<scriptsrc="Scripts/my.plugin.js"type="text/javascript"></script>，当然，在所有要用到JQuery的地方，需要首先添加对JQuery库脚本的引用。在引用型插件的代码中，最主要的就是在插件中要主动调用自己所写的插件方法，上面代码中有注释的地方。否则，我们写的插件代码将不会起作用。