`
DoubleEO
  • 浏览: 158120 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[转]jquery不为人知的秘密

阅读更多
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源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    《轻松玩转jquery》源代码

    《轻松玩转jQuery》这本书是面向初学者和中级开发者的一本实用指南,旨在帮助读者深入理解和熟练运用jQuery库。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。源...

    jquery文本转语音播放

    首先,我们需要理解的是,jQuery本身并不直接支持文本转语音功能。它是一个JavaScript库,主要简化DOM操作、事件处理和动画效果。然而,我们可以利用jQuery与其他Web API,如Web Speech API(包括SpeechSynthesis...

    jquery ajax Datatable与json之间数据转换

    jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...

    使用JQuery实现从JSON对象转换为form提交数据

    - JSON对象中的嵌套对象和数组需要特殊处理,不能直接转换为URL编码的字符串。对于嵌套的对象,可以递归地调用`jsonToFormParams()`;对于数组,可以考虑将其转换为逗号分隔的字符串或者多个同名的键。 - 在实际...

    江哥带你玩转JQuery代码资料.zip

    《江哥带你玩转JQuery代码资料》是一个专注于讲解JQuery编程技巧和实践的资源集合,由知名前端开发者李南江(江哥)提供。这个压缩包包含了丰富的JQuery学习材料,旨在帮助初学者和进阶者提升在前端开发中的JQuery...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    【Jquery经典特效15】jQuery实现汉字转换成拼音代码

    首先,我们需要明白的是,jQuery本身并不直接提供汉字转拼音的功能。这个功能通常需要借助其他JavaScript库或API来实现,例如pinyin.js、HanyuPinyin等。这些库通常基于Unicode字符集和汉语拼音规则,将汉字映射到...

    jQuery基础.pptx

    JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? ...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    JQuery 实现图片循环旋转

    在本文中,我们将深入探讨如何使用JQuery库来实现一个图片循环旋转的广告代码,这是一种常见于电商网站上的动态效果,能吸引用户的注意力并展示多种商品。JQuery是一款强大的JavaScript库,它简化了DOM操作、事件...

    jquery精简版jquery-small.js

    jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版

    jQuery1.12.4+jQuery中文手册.rar

    **jQuery 1.12.4 知识点详解** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery...

    JQuery实现异步刷新效果

    jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,...

    jQuery xml-to-json xml转JSON插件

    然而,jQuery本身并不内置XML到JSON的转换功能,因此需要借助如xml-to-json这样的插件来实现这一功能。 这个插件的工作原理是解析XML文档,并将其转换为JavaScript对象,然后以JSON字符串的形式返回。这样,开发者...

    jqueryrotate--jQuery旋转插件及案例

    它支持CSS3的transform属性,同时为不支持该属性的老版本浏览器提供了兼容性处理。这使得旋转效果能在大多数现代浏览器中流畅运行,提高了网站的兼容性和用户友好性。 使用jQuery Rotate插件,开发者可以通过...

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    - jQuery对象转DOM对象:通过索引访问,如`jQueryObject[0]`或使用`jQueryObject.get(index)`。 4. **基本语法和注意事项** - 选择元素:`$("#id")`,`$(".class")`,`$("tagname")`,`$("selector")`。 - 操作...

    jquery例子大全 jquery demo

    **jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。在“jQuery例子大全 jQuery demo”这个压缩包中,包含了一系列的示例,旨在帮助用户快速...

    Ext + Jquery Ext + Jquery Ext + Jquery

    Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery

Global site tag (gtag.js) - Google Analytics