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公用库。个人比较推荐的做法是:如果是相对复杂的应用,请适当地写一些注释。这个和正在表达式一样,能够精简代码,但是可读性会降低,对读代码的人要求会高些,最好的办法就是写注释。