Jquery 插件语法

Jquery 插件语法：

Jquery注册全局函数：

<script type="text/javascript" src="/plugin/js/jquery-1.7.min.js"></script>     <script type="text/javascript">        // 给Jquery注册全局函数        $.min=function(a,b){            return a<b?a:b;        };        $.max=function(a,b){            return a>b?a:b;        }        // 函数名相同,即使参数不同,也会覆盖前面的函数,JS没有多态概念,但是有可变参数的概念        $.max=function(a,b,c){            alert("c=" + c);            return a>b?a:b;        }        // 通过jquery.方法名,来调用注册的全局函数        alert($.min(3,5));        alert($.max(3,5));     </script>

extend方式注册全局函数

<script type="text/javascript">     $.extend({            min: function(a, b) { return a < b ? a : b; },            max: function(a, b) { return a > b ? a : b; }     });     alert($.min(3,5));     alert($.max(3,5)); </script>

Jquery注册对象函数

<script type="text/javascript" src="/plugin/js/jquery-1.7.min.js"></script>     <script type="text/javascript">        // 给Jquery对象注册函数        $.fn.min=function(a,b){            return a<b?a:b;        };        // 给Jquery对象注册函数        $.fn.max=function(a,b){            return a>b?a:b;        }        // 调用Jquery全局函数        $.max=function(a,b,c){            alert("c=" + c);            return a>b?a:b;        }        // 通过jquery对象来调用注册的全局函数        alert($("body").min(3,5));        alert($("body").max(3,5));        // 调用jquery全局函数        alert($.max(3,5)); </script>

extend方式注册对象函数

<script type="text/javascript">     $.fn.extend({        min : function(a, b) {            return a < b ? a : b;        },        max : function(a, b) {            return a > b ? a : b;        }     });     alert($("body").min(3, 5));     alert($("body").max(3, 5)); </script>

extend原型覆盖

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代码是否进行深度拷贝,其余的参数和前面介绍的一致, 看一个深度拷贝的案例

<script type="text/javascript">          // 后面的可以覆盖前面的值          var result=$.extend({},{name:"test",pass:"world"},{name:"test2",pass2:"world2"});          alert(result.name);          alert(result.pass);          alert(result.pass2); </script>

函数缺省参数的实现:

<script type="text/javascript">        $.fn.extend({            // 注册一个Jquey对象函数,支持可选参数            add:function(par){               var def={a:1,b:1};               // 如果传了参数,且参数名相同,则会被覆盖               $.extend(def,par);               alert(def.a+"=" + def.b);            }        });        // 调用对象的函数,注意传递的是JSON格式        $("body").add({a:2,b:2});        // 缺省参数        $("body").add(); </script>

&&、|| 在JS中的语法 3

在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true

几乎所有语言中||和&&都遵循“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反

l 如果第一个操作数是Boolean 类型，而且值为 false ，那么直接返回 false。

l 如果第一个操作数是Boolean 类型，而且值为 true，另外一个操作数是 object 类型，那么将返回这个对象。

l 如果两个操作数都是 object类型，那么，返回第二个对象。

l 如果任何一个操作数是 null，那么，返回 null。

l 如果任何一个操作数是 NaN，那么返回 NaN。

l 如果任何一个操作数是undefinded，那么返回 undefined。

alert(false && alice);         // false alert(true && alice);          // alice alert(alice && smith);         // smith alert(smith && alice);         // alice alert(null && alice);          // null alert(NaN && alice);           // NaN alert(undefined && alice);     // undefined alert(alice && undefined);     // undefined

|| 运算法则

  如果第一个操作数是 boolean 类型，而且值为 true， 那么，直接返回 true。

l        如果第一个操作数是 Boolean 类型，而且值为 false ，第二个操作数为 object，那么返回 object 对象。

l        如果两个操作数都是 object 类型，那么返回第一个对象。

l        如果两个操作数都是 null，那么，返回 null。

l        如果两个操作数都是 NaN，那么返回 NaN。

l        如果两个操作数都是 undefined，那么，返回 undefined。

alert(false || alice);         // alice alert(true || alice);          // true alert(alice || smith);         // alice alert(smith || alice);         // smith alert(null || alice);       // alice alert(alice || null);       // alice alert(null || null);        // null alert(NaN || alice);        // alice alert(alice || NaN);        // alice alert(NaN || NaN);          // NaN alert(undefined || alice);     // alice alert(alice || undefined);     // alice alert(undefined || undefined); // undefined

|| && 妙用

成长速度为5显示1个箭头；
成长速度为10显示2个箭头；
成长速度为12显示3个箭头；
成长速度为15显示4个箭头；
其他都显示都显示0各箭头。
用代码怎么实现？

采用 IF Switch实现略

采用 || &&来实现：

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

 

成长速度为>12显示4个箭头；
成长速度为>10显示3个箭头；
成长速度为>5显示2个箭头；
成长速度为>0显示1个箭头；
成长速度为<=0显示0个箭头

用代码怎么实现

var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

 

|| && 还可以精简代码 例如：

Var a=6; if(a >=5){ alert("你好"); } 可以写成： a >= 5 && alert("你好");

&& || 语法总结：

js中||和&&的特性帮我们精简了代码的同时，也带来了代码可读性的降低。这就需要我们自己来权衡了。

一方面精简js代码，能实质性的减少网络流量，尤其是大量应用的js公用库。个人比较推荐的做法是：如果是相对复杂的应用，请适当地写一些注释。这个和正在表达式一样，能够精简代码，但是可读性会降低，对读代码的人要求会高些，最好的办法就是写注释。