11.2 jQuery技巧

如今，越来越多的人在使用jQuery类库。这也意味着，需要越来越多有用的jQuery技巧和解决方案。下面是我整理的一些实用的jQuery技巧。

1．禁用页面的右键菜单

[插图]

2．新窗口打开页面

[插图]

3．判断浏览器类型

[插图]

需要注意的是，在jQuery 1.3版本之后，官方推荐使用$.support来代替$.browser这种检测方式。

4．输入框文字获取和失去焦点

[插图]

5．返回头部滑动动画

[插图]

6．获取鼠标位置

[插图]

7．判断元素是否存在

[插图]

8．点击div也可以跳转

[插图]

9．根据浏览器大小添加不同的样式

[插图]

10．设置div在屏幕中央

[插图]

11．创建自己的选择器

[插图]

12．关闭所有动画效果

[插图]

13．检测鼠标的右键和左键

[插图]

14．回车提交表单

[插图]

15．设置全局Ajax参数

[插图]

16．获取选中的下拉框

[插图]

17．切换复选框

[插图]

18．使用siblings()来选择同辈元素

[插图]

19．个性化链接

[插图]

20．在一段时间之后自动隐藏或关闭元素

[插图]

21．使用Firefox和Firebug来记录事件日志

[插图]

22．为任何与选择器相匹配的元素绑定事件

[插图]

23．使用css钩子

jQuery.cssHooks是1.4.3新增的方法，当你定义新的CSS Hooks时实际上定义的是getter和setter方法，比如，border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSS Hooks将其封装成统一的接口borderRadius，而不是一一设置css属性。代码如下：

[插图]

更多cssHooks可以查看https://github.com/brandonaaron/jquery-cssHooks 。

24．$.proxy()的使用

使用回调方法的缺点之一是当执行类库中的方法后，上下文对象被设置到另外一个元素，比如：

[插图]

执行下面代码：

[插图]

你将遇到问题，button元素会消失，而不是panel元素。可以使用$.proxy方法解决这个问题，代码如下：

[插图]

这样才正确的执行。

25．限制Text-Area域中的字符的个数

[插图]

26．本地存储

本地存储是HTML 5提供的特性之一。它提供了非常简单的API接口，便于添加你的数据到localStorage全局属性中，代码如下：

[插图]

事实上对于老的浏览器来说，这并不是个好消息，因为他们不支持，但是我们可以使用jQuery的插件（http://plugins.jquery.com/plugin-tags/localstorage ）来提供支持，这种方式可以使得本地存储功能正常工作。

27．解析json数据时报parseError错误

jQuery在1.4版本后，采用了更为严格的json解析方式，即所有内容都必须要有双引号，如果升级jQuery版本后，ajax加载json报错，有可能就是这个原因。比如：

[插图]

但升级成jQuery 1.4后，都必须加上双引号，格式如下：

[插图]

28．从元素中除去HTML

[插图]

29．扩展String对象的方法

[插图]