jQuery的向来以其完善的文档著称,而不像早期的Prototype那样库写的很牛,而文档很糟糕,其他使用者不得不看他的源码以了解一些功能。
但是,文档的更新速度是远没有其程序变化的快的。这里介绍一些隐藏在jQuery源码内部的“秘密”。
序列化一个对象
类似于Prototype中的$H(obj).toQueryString()
jQuery中也有一个内部函数,用于在ajax时候序列化对象用:
jQuery.param
var obj={A:1,B:2,C:3};
jQuery.param(obj); //A=1&B=2&C=3
获取原始的event对象
用过jQuery都知道,jQuery提供了一个事件对象,用于在事件处理函数中使用,并且这个对象已经将ie中的事件修复成了标准的W3C事件。具体可以参考我这篇日志
但他并没有完全统一所有事件,比如获取mousemove的event事件中鼠标的相对坐标的位置,ie和ff分别用的x和layerX来实现,而jQuery没有给统一。我们只能使用原始的event对象再自己判断,此时就可以使用
e.originalEvent
这样就得到了原始的event对象了
在ie中,这个指向的是window.event,而在其他浏览器中,就是传递给事件处理函数的第一个参数。
像上面那个例子,我就用了如下的代码,用于获取鼠标的相对坐标。
$(“#menuWrap“).mousemove(function(e) {
var xx=e.originalEvent.x||e.originalEvent.layerX||0;
});
再说选择器,两个特殊的选择器,没有在文档里列出来。有可能只是选择器正则匹配的失误,也可能是故意的,但我源码中看不出来。望各位看官指点。注意,下面两个特殊选择器,随时可能在以后版本中消失,慎用。本文涉及的是1.2.6,经测试1.2.3也可使用。
创建一个空jQuery对象:
$(“ “); //切记,引号中间至少有_一个_空格
这段简易的代码即可创建一个空的jQuery对象。这就类似创建一个代码片段。但由于是空的,所以无法append进任何东西。但你可以用add将你要的东西添加进去。
获取document,有时候需要写一些关于document的事件,比如keypress之类的,或者其他的,就可以用
$(““); //切记,引号中间_没有_空格
这一定程度上可以用于混淆代码,比如将$(document).ready()写成$(”“).ready(),不知道的人就看不懂了。当然,要看过本文的人就都知道了~~(笑~)
顺便一说,前端加密是没有可能的,混淆也是有限度的。有jQuery的操作是链式操作,没有中间变量,同时通常绑定函数也是匿名函数,所以对于 jQuery代码的混淆更是没有太大用处。除非,不再使用匿名函数,每次都外部定义一个。同时不再使用链式操作,用next,parent之类操作的时候,统统再定义一个中间变量。这样你的jQuery代码已经没有jQuery风格了,对混淆会稍微有点点帮助。注意,以上所有混淆操作,只防君子不防小人!切记,前端开发不可能加密!所以一切都做好开源的准备!了解GPL、MIT之类的都是有必要的!
如果你要用中间变量,像前面说的为了混淆,有时候你可能需要用到之前的一个对象,就好像在链式写法中用end()的效果,那就可以用prevObject属性,end()就是返回这个属性。
$(“#id“).prevObject; //切记,最后没有括号,这个是属性不是方法
下面说的这个其实不是很秘密,但值得一提
attr是很伟大的方法,以下这些都是可以执行的,你就可以通过这些来进行一些简单的判断,比如这个元素的标签名啦之类的。
$(“body“).attr(“tagName“);
$(“body“).attr(“nodeName“);
$(“body“).attr(“nodeType“);
还有个相关的,他返回的是布尔值true/false
jQuery.nodeName( elem, nodeName )
第一个参数是一个DOM对象,不是jQuery对象,第二个就是节点名称(标签名)了,大小写无关。返回true/false
有人问,为什么我不直接使用elem.nodeName==nodeName呢,爱用写这么麻烦呢?
看一下jQuery的源码就知道了
nodeName: function( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() == name.toUpperCase();
},
明白了吧?浏览器兼容性问题,某些浏览器中的nodeName是大写,有些是小写,够恶心吧?兼容一下总是好的。
但是,文档的更新速度是远没有其程序变化的快的。这里介绍一些隐藏在jQuery源码内部的“秘密”。
序列化一个对象
类似于Prototype中的$H(obj).toQueryString()
jQuery中也有一个内部函数,用于在ajax时候序列化对象用:
jQuery.param
var obj={A:1,B:2,C:3};
jQuery.param(obj); //A=1&B=2&C=3
获取原始的event对象
用过jQuery都知道,jQuery提供了一个事件对象,用于在事件处理函数中使用,并且这个对象已经将ie中的事件修复成了标准的W3C事件。具体可以参考我这篇日志
但他并没有完全统一所有事件,比如获取mousemove的event事件中鼠标的相对坐标的位置,ie和ff分别用的x和layerX来实现,而jQuery没有给统一。我们只能使用原始的event对象再自己判断,此时就可以使用
e.originalEvent
这样就得到了原始的event对象了
在ie中,这个指向的是window.event,而在其他浏览器中,就是传递给事件处理函数的第一个参数。
像上面那个例子,我就用了如下的代码,用于获取鼠标的相对坐标。
$(“#menuWrap“).mousemove(function(e) {
var xx=e.originalEvent.x||e.originalEvent.layerX||0;
});
再说选择器,两个特殊的选择器,没有在文档里列出来。有可能只是选择器正则匹配的失误,也可能是故意的,但我源码中看不出来。望各位看官指点。注意,下面两个特殊选择器,随时可能在以后版本中消失,慎用。本文涉及的是1.2.6,经测试1.2.3也可使用。
创建一个空jQuery对象:
$(“ “); //切记,引号中间至少有_一个_空格
这段简易的代码即可创建一个空的jQuery对象。这就类似创建一个代码片段。但由于是空的,所以无法append进任何东西。但你可以用add将你要的东西添加进去。
获取document,有时候需要写一些关于document的事件,比如keypress之类的,或者其他的,就可以用
$(““); //切记,引号中间_没有_空格
这一定程度上可以用于混淆代码,比如将$(document).ready()写成$(”“).ready(),不知道的人就看不懂了。当然,要看过本文的人就都知道了~~(笑~)
顺便一说,前端加密是没有可能的,混淆也是有限度的。有jQuery的操作是链式操作,没有中间变量,同时通常绑定函数也是匿名函数,所以对于 jQuery代码的混淆更是没有太大用处。除非,不再使用匿名函数,每次都外部定义一个。同时不再使用链式操作,用next,parent之类操作的时候,统统再定义一个中间变量。这样你的jQuery代码已经没有jQuery风格了,对混淆会稍微有点点帮助。注意,以上所有混淆操作,只防君子不防小人!切记,前端开发不可能加密!所以一切都做好开源的准备!了解GPL、MIT之类的都是有必要的!
如果你要用中间变量,像前面说的为了混淆,有时候你可能需要用到之前的一个对象,就好像在链式写法中用end()的效果,那就可以用prevObject属性,end()就是返回这个属性。
$(“#id“).prevObject; //切记,最后没有括号,这个是属性不是方法
下面说的这个其实不是很秘密,但值得一提
attr是很伟大的方法,以下这些都是可以执行的,你就可以通过这些来进行一些简单的判断,比如这个元素的标签名啦之类的。
$(“body“).attr(“tagName“);
$(“body“).attr(“nodeName“);
$(“body“).attr(“nodeType“);
还有个相关的,他返回的是布尔值true/false
jQuery.nodeName( elem, nodeName )
第一个参数是一个DOM对象,不是jQuery对象,第二个就是节点名称(标签名)了,大小写无关。返回true/false
有人问,为什么我不直接使用elem.nodeName==nodeName呢,爱用写这么麻烦呢?
看一下jQuery的源码就知道了
nodeName: function( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() == name.toUpperCase();
},
明白了吧?浏览器兼容性问题,某些浏览器中的nodeName是大写,有些是小写,够恶心吧?兼容一下总是好的。