Jquery 及 javascript写函数的方法

1.jQuery 页面加载初始化的方法:
  $(function(){
      alert("第二种方法。");

  });

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

1.1.javascript在页面初始化的方法:
1.在body里面写onload
2.在脚本里面写
  window.οnlοad=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库脚本的引用。在引用型插件的代码中，最主要的就是在插件中要主动调用自己所写的插件方法，上面代码中有注释的地方。否则，我们写的插件代码将不会起作用。