分类: jQuery

加载 jQuery 的正确方式

jquery logo_6jQuery是我们用的最多的javascript函数库,占有率极高,Wordpress原生自带,并且扩展性也很强。但是加载jQuery仅仅只是一行调用代码而已那么简单吗?事实上jQuery的正确加载方式,不一定所有人都知道并掌握。掌握正确的jQuery加载方式,总是会对网站有利无弊。

确定要放在Head部分 ?

事实上最好的情况是,js文件都不要在<head>部分进行加载,否则会影响到head部分的载入速度,直接导致网站的内容(body)载入延迟。如果你确定你不需要在head部分载入jQuery,请将载入代码移动到</body>前,准确的说是第一个会用到jQuery函数的javascript代码前。

当然,如果你需要head部分加载jquery,也请确保所有的js文件,包括jquery,都要放在调用CSS文件的代码之后,来实现同步下载。这也是Google官方给出的建议。例如下面的加载不推荐:

<script src=jquery.js></script>

<link href="style.css" .../>

而是应该使用:

无需插件实现 jQuery 平滑滚动

jquery logo_6平滑滚动总能让用户体验更友好。我推荐过一款jQuery平滑滚动插件,其通过调用$.scrollTo()或$.smoothScroll()函数实现页面的平滑滚动。事实上,你不需要任何插件,不需要添加多余的代码就可以做到jquery页面平滑滚动。一切都靠jQuery自己的一行很简单的代码即可完成。

无需jQuery scroll插件实现 jQuery 平滑滚动

要实现此效果,只需运行:

$(document.body).animate({scrollTop:$(~selector).offset().top}, ~time );

即可。不需要引入jquery scroll插件。其中~selector~time是自定义的值,分别是元素目标和时间,此方法将会使页面滚动到~selector的顶部。

例如 $(document.body).animate({scrollTop:$("#header").offset().top}, 1000 ); 可以实现滚动到我的页面的顶部。

jQuery hash 插件

jquery.hash.logo

URL中的hash,也就是网址井号后面的部分,其实是一块宝地,它能创建浏览历史,也能存储一些简单数据。从Twitter开始Hash被用来定义Ajax内容,虽然如今已被HTML5的pushState所替代。这里介绍jQuery Hash 插件,可以帮助你完成简单数据的存储。

Hash存储数据有什么用

首先传统URL传递数据的弊端是,对搜索引擎不友好,搜索引擎会认为 /example和/example?key=val是不同的网址,然而hash则不同,搜索引擎认为 /example 和 /exmaple#;key=val 会是两个完全相同的网页。此外,用hash存储数据也不必刷新页面。

hash可以作为一种本地临时存储的解决方案,正如cookie那样。可以在url中保存临时的用户状态这是cookie做不了的。例如含有Ajax页面的刷新,就可以直接利用hash存储当前的状态。再例如你可以配合Hashchange监听来完成一些事情。

这算是一个尝试,虽然目前少有人在hash存数据上作文章,但是如果你真的需要,可以用这个插件参考一下。

jQuery Scroll (jQuery平滑滚动) 插件

是不是很想实现页面平滑滚动的效果呢?既美观又不唐突,而且还能自己控制速度,岂不是一个很好的效果吗?还好我们有强大的jQuery以及他的插件们,这样武装起来,特效什么的就太简单不过了。

新!无需插件实现 jQuery 平滑滚动!!

jqScrollFunction

 

想要一看个demo么

如果你在看这篇文章没在首页,你应该注意到了文章顶端的这个分享条;你可以点点评论链接,或者这里试试,看看是不是平滑滚动到了评论栏呢?

jQuery Background Position Animate (jQuery背景位置变换) 插件

弥补jQuery的不足

我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。除了上次提到的jQuery Color Animate (jQuery 颜色变换动画) 插件以外,还介绍一款背景位置变换(background position animte)插件。通过背景位置的动态变换,你甚至可以做出像是用flash作出的精湛动画效果。我们可以通过这一插件实现。

有一个例子是Google.com搜索结果页的+1按钮。当鼠标移上去时,你可以看到一道闪光闪过。这其实就只是background position变换而已。

其背景图片是: 

现在你可以理解为什么可以靠背景变换实现出现一道闪光的效果了。

使用方法

首先您肯定需要引用jQuery文件。推荐使用Google jQuery API,这样比较快一点。然后要在后面引用这个插件文件:

请先到这里下载此文件(jqBackgroundPositionAnimate.js),然后再合适位置引用他:

<script type="text/javascript" src="jqBackgroundPositionAnimate.js">
</script>

这之后便可以使用了。大致方法和其他的jQuery略有不同,要注意了:

$(selector).animate(

{  backgroundPosition:"1px 1px"  },

{  duration:speed,  complete: function(){}

});

其中,红色部分是可修改的,分别是选择器、背景位置、花费时间毫秒、callback函数。当然,后两者是可选的。

一个在线Demo

jqeury background position animate plugin demo由于页面比较复杂,所以不直接把他搬到这里来了,我把它放到这里了,请到这里参观。

jQuery Color Animate (jQuery 颜色变换动画) 插件

弥补jQuery的不足

我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。比如说,颜色、背景颜色的变换。弥补这一不足的方法给大家提供两个:

1、jQuery UI 库

jQuery是一款强大的jQuery插件性的特效库,通过jQuery UI可是实现下属功能:

Interactions

Complex behaviors like drag and drop, resizing, selection and sorting.

你可以点击上面的链接查看在线demo。其中就包含color animate

color animate

附上jQuery UI API:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js

2、Edwin Martin提供的jQuery color animate插件

如果你只是需要颜色变换功能,也不必去花费时间装载一个和jQuery本身几乎一样大的插件。我就没有这么做。好在Edwin Martin为我们提供了单独的jQuery Color Animate插件,js本身很小,只有几行。实现效果可以有: