jQuery中的100个技巧(上)

1.当document文档就绪时执行JavaScript代码。

我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。

 

2.使用route。

 

3.使用JavaScript中的AND技巧。

使用&&操作符的特点是如果操作符左边的表达式是false,那么它就不会再判断操作符右边的表达式了。所以:

 

4. is()方法比你想象的更为强大。

下面举几个例子,我们先写一个id为elem的div。js代码如下:

其中判断是否为动画我觉得非常不错。

 

5.判断你的网页一共有多少元素。

通过使用$(“*”).length属性可以判断网页的元素数量。

 

6.使用length()属性很笨重,下面我们使用exist()方法。

 

7.jQuery方法$()实际上是拥有两个参数的,你知道第二个参数的作用吗?

8.使用jQuery我们可以判断一个链接是否是外部的,并来添加一个icon在非外部链接中,且确定打开方式。

这里用到了hostname属性。

 

9.jQuery中的end()方法可以使你的jQuery链更加高效。

 

10.也许你希望你的web 应用感觉更像原生的,那么你可以阻止contextmenu默认事件。

 

11.一些站点可能会使你的网页在一个bar下面,即我们所看到在下面的网页是iframe标签中的,我们可以这样解决。

 

 

12.你的内联样式表并不是被设置为不可改变的,如下:

这样即可改变内联样式了。

 

13.有时候我们不希望网页的某一部分内容被选择比如复制粘贴这种事情,我们可以这么做:

这样,内容就不能被选择啦。

 

14.从CDN中引入jQuery,这样的方法可以提高我们网站的性能,并且引入最新的版本也是一个不错的主意。

下面会介绍四种不同的方法。

 

15.保证最小的DOM操作。

我们知道js操作DOM是非常浪费资源的,我们可以看看下面的例子。

 

16.更方便的分解URL。

也许你会使用正则表达式来解析URL,但这绝对不是一种好的方法,我们可以借用a标签来实现它。

 

17.不要害怕使用vanilla.js。

jQuery背负的太多,这便是原因,你可以用一般的js。

 

18.最优化你的选择器

 

19.缓存你的selector。

 

20.对于重复的函数只定义一次

如果你追求代码的更高性能,那么当你设置事件监听程序时必须小心,只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。

 

21.像对待数组一样地对待jQuery对象

由于jQuery对象有index值和长度,所以这意味着我们可以把对象当作普通的数组对待。这样也会有更好地性能。

 

22.当做复杂的修改时要分离元素。

修改一个dom元素要求网页重绘,这个代价是高昂的,所以如果你想要再提高性能,就可以尝试着当对一个元素进行大量修改时先从页面中分离这个元素,修改完之后再添加到页面。

 

23.不要一直等待load事件。

我们已经习惯了把我们所有的代码都放在ready的事件处理程序中,但是,如果你的html页面很庞大,decument ready恐怕会被延迟了,所以对于一些我们不希望ready后才可以触发的事件可以放在html的head元素中。

 

24.当使用js给多个元素添加样式时更好的做法是创建一个style元素。

我们之前提到过,操作dom是非常慢的,所以当添加多个元素的样式时创建一个style元素并添加到document中是更好的做法。

 

25.给html元素分配一个名为JS的class。

现代的web apps非常的依赖js,这里的一个技巧就是只有当js可用时才能显示特定的元素。看下面的代码。

这样,只有js可用的时候id为message的元素才会显示;如果不支持js,则该元素不会显示。

 

26.监听不存在的元素上的事件。

jQuery拥有一个先进的事件处理机制,通过on()方法可以监听还不存在的事件。 这是因为on方法可以传递一个元素的子元素选择器作为参数。看下面的例子:

这样,即使li是后创建的,也可以通过on()方法来监听。

 

27.只使用一次事件监听。

有时,我们只需要绑定只运行一次的事件处理程序。那么one()方法是一个不错的选择,通过它你就可以高枕无忧了。

 

28.模拟触发事件。

我们可以通过使用trigger模拟触发一个click事件。

29.使用触摸事件。

使用触摸事件和相关的鼠标事件并没有太多不同,但是你得有一个方便的移动设备来测试会更好。看下面这个例子。

 

30.更好地使用on()/off()方法。

在jQuery1.7版本时对事件处理进行了简化,看看下面的例子吧。

 

 

31.更快地阻止默认事件行为。

我们知道js中可以使用preventDefault()方法来阻止默认行为,但是jQuery对此提供了更简单的方法。如下:

 

32.使用event.result链接多个事件处理程序。

对一个元素绑定多个事件处理程序并不常见,而使用event.result更可以将多个事件处理程序联系起来。看下面的例子。

这样,控制台会输出Hip Hop!

 

33.创建你自己习惯的事件。

你可以使用on()方法创建自己喜欢的事件名称,然后通过trigger来触发。举例如下:

 

34.在下载文件旁显示文件大小。

你知道如何在不下载一个文件的情况下通过发送一个ajax请求头得到一个文件的大小吗? 使用jQuery就很容易。

注意:这个例子如何我们直接使用浏览器是没法得到的,必须使用本地的web服务器打开运行才可以。

 

35.使用延迟简化你的Ajax请求

延迟(deferreds)是一个强大的工具。jQuery对于每一个Ajax请求都会返回一个deferred对象。 deferred.done()方法接受一个或多个参数,所有这些都参数可以是一个单一的函数或一个函数数组。当Deferred(延迟)解决时,doneCallbacks被调用。回调是依照他们添加的顺序执行。一旦deferred.done()返回Deferred(延迟)对象,Deferred(延迟)可以链接其它的延迟对象,包括增加额外的.done()方法。下面这样就会使你的代码更易读:

 

36.平行的运行多个Ajax请求。

当我们需要发送多个Ajax请求是,相反于等待一个发送结束再发送下一个,我们可以平行地发送来加速Ajax请求发送。

 

37.通过jQuery获得ip

我们不仅可以在电脑上ping到一个网站的ip,也可以通过jQuery得到。

 

38.使用最简单的ajax请求

jQuery(使用ajax)提供了一个速记的方法来快速下载内容并添加在一个元素中。

 

39.序列化对象

jQuery提供了一个方法序列化表单值和一般的对象成为URL编码文本字符串。这样,我们就可以把序列化的值传给ajax()作为url的参数,轻松使用ajax()提交表单了。

 

40.使用jQuery上传二进制文件

现在的浏览器都支持FormData API,这可以是我们很轻松的通过ajax来发送数据。 并将之结合HTML5中的File API,我们就可以上传二进制文件了。

 

41.使用Facebook的图表

我们可以引入facebook中的一个很强大的API来是我们的app更加社交化。下面是一个简单的例子:


 

 

42.获取天气信息

Open Weather Map提供了免费的天气信息,我们可以通过使用它们的JSON API来获取数据。简单的例子如下:

 

43. 获取你的最近的汤博乐(Tumblr)内容

现在非常流行的汤博乐博客服务提供了简单的方法使用JSON api, 这样我们可以使用它来获取任何博客内容,下面是使用的方法。

 

 

44.通过IP地址获得地理位置

有很多在线服务可以告诉我们IP地址所在的城市和国家,下面我们先ping到百度的IP地址,然后获取其地理位置:

 

45.使用YQL来爬网站

YQL对JavaScript开发者来说有无限的API,下面的例子是我们如何使用它来获取并解析其他站点的HTML。

 

46.使用全局的Ajax方法

我们可以通过ajax的全局方法来简化web app中处理的ajax请求。


 

47. 学会爱上console吧。

我们的浏览器给了我们一系列有用的方法使用来调试代码,找出bug,下面就是一个例子,打开console看看吧。

 

48.把代码转化为插件以提高重用率。

如果有一些代码你总是在不同的项目之间复制粘贴,你就可以考虑着把它转化成一个插件了。下面的例子就是这样。

 

49.使用匿名函数来产生一个独立的代码块

定义全局变量和函数是一种代码很粗糙的行为,更好的方式是通过使用匿名函数使你的代码独立于块之中。看下面的例子:

 

50. 用extend融合对象

当提到从多个项目到一个项目结合属性时,你最好的猜测就是扩展方法。

 

持续更新中…

3 20 收藏 2 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部