本文纯粹是贴出一些比较实用的代码出来供大家学习和使用,也算是个人博客对这些实用代码的记录和收集吧!有用到的可以参考,没用到的直接可以飘过!

特意将这些代码写成jQuery插件的格式,这样方便大家使用的时候调用。我在平时的开发和自我学习过程中也积累了不少有用的代码,不知道怎么概括性地发布出来,所以就已文章的形式陆续贴出来与大家分享。

以单篇文章发布的插件代码都是一些简单的代码,若是一些复杂的代码或插件我会归纳到插件专区里去,这样大家下载起来也方便!

一、插件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
;(function($) {

	$.extend({
		/**
		 * 调用方法: var timerArr = $.blinkTitle.show();
		 *			$.blinkTitle.clear(timerArr);
		 */
		blinkTitle : {
			show : function() {	//有新消息时在title处闪烁提示
				var step=0, _title = document.title;

				var timer = setInterval(function() {
					step++;
					if (step==3) {step=1};
					if (step==1) {document.title='【   】'+_title};
					if (step==2) {document.title='【新消息】'+_title};
				}, 500);

				return [timer, _title];
			},

			/**
			 * @param timerArr[0], timer标记
			 * @param timerArr[1], 初始的title文本内容
			 */
			clear : function(timerArr) {	//去除闪烁提示,恢复初始title文本
				if(timerArr) {
					clearInterval(timerArr[0]);
					document.title = timerArr[1];
				};
			}
		}
	});
})(jQuery);

注意其中调用方法中的timerArr变量,若你在前面调用代码显示了效果,在页面的后面代码中需要清楚该闪烁效果的话,需要注意timerArr变量的作用域。若只是出现效果而无需清楚,则可以直接调用$.hiro.blinkNews.show()

二、调用方法

1
2
3
4
5
6
7
8
9
jQuery(function($) {
	var timerArr = $.blinkTitle.show();

	setTimeout(function() {		//此处是过一定时间后自动消失
		$.blinkTitle.clear(timerArr);
	}, 10000);

	//若人为操作消失,只需如此调用:	$.blinkTitle.clear(timerArr);

jQuery并不像他表面显示的那样,只有那些额定的方法供我们使用。其他在他库的代码内有着很多很酷很便捷的潜在方法,等待被我们发现。在本文中,我将带领你去领略一些我在jQuery库中发现的那些不怎么常见的方法。

1.理解jQuery方法:

当你调用jQuery方法时会发生什么呢?看看jQuery的方法体,非常地简单。

1
2
3
4
jQuery = function (selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context);
};

在表层的代码之下,jQuery方法(通常称之为“包装”方法)将返回一个实例化后的jQuery对象,即’jQuery.fn.init’构造函数的一个实例。

理解了这一点非常有用,当我们每次调用jQuery方法时,都会返回一个带有一组属性的完全独立的对象。而jQuery的聪明之处在于返回的这个对象是以数组的方式返回的。该对象中的所有元素(通称”集合“)都是由一个数字索引所指向,就像数组中的下标一样。而且jQuery还返回了一个对象的length属性,就像数组中的长度一样。这种思想给jQuery方法提供了无限的想象空间。比如,我们可以从’Array.prototype’中借用一些功能性方法。jQuery中的slice方法就是一个典型的例子:

1
2
3
4
5
6
7
8
9
10
/* ... jQuery.fn.extend({ ... */
slice: function() {
    return this.pushStack(
        Array.prototype.slice.apply( this, arguments ),
        "slice",
        Array.prototype.slice.call(<wbr>arguments).join(",")
    );
},
/* ... */
</wbr>

在该slice方法不管this是否是一个真实的数组,它和其他的元素会和睦地相处,因为有着”length“这么一个属性。

jQuery中还有一些其他有趣的属性,比如”selector”—选择器,”context”—-上下文等。大部分的时候,只需给jQuery方法传递对象参数即可:

1
2
var jqObject = jQuery('a');
jqObject.selector; // => "a"

一个重要的提示是,jQuery有时会返回一个全新的对象供你使用。比如你试图通过执行一段代码来改变一个集合,如”parent()”方法,但是此时jQuery将不会修改当前的对象,它会返回给你一个全新的对象。

1
2
3
4
var originalObject = jQuery('a');
var anotherObject = originalObject.parents();

originalObject === anotherObject; // => false

所有试图改变集合的方法都会返回一个新的jQuery对象,你可以通过”.end()”方法或”.prevObject”属性来访问之前的那个对象。

近段时间来访问我博客的博友们不知是否注意到,博客的一些地方添加了一些增强型Ajax加载效果,用以提高访客的交互和快速浏览不同分类、标签下最新的文章列表。而在今天又新增了增强型Ajax提交评论和回复,只要你留言你就会看到具体效果。

下面我对几处增强Ajax效果进行一下具体说明,大家以后访问我博客时也可以适当地使用。之所以说是增强型Ajax效果,是因为我并没有改变原先的代码,而是在原始代码基础上添加了jQuery控制,这样即使jQuery代码没有加载完成时,你也可以访问到相应的页面。

1.Ajax加载历史文章列表:

在博客的右边有一个最新文章板块,大家可以看到在标题的右边有上页、下页的链接,点击相应的链接便可Ajax加载上下页的文章列表,每次加载10条。图:

2.分类Ajax加载相关最新10条文章记录:

点击博客左边的每个摘要型Post的分类链接、博客右边的分类目录版块链接或者每篇完整型文章的分类链接。会出现一个loading的shadow层,加载完成后罗列出该分类下的最新文章。图:

3.标签Ajax加载相关最新10条文章记录:

点击博客左边的每个摘要型Post的标签链接、博客右边的热门标签版块链接或者每篇完整型文章的标签链接。同样会出现一个loading的shadow层,加载完成后罗列出该标签下的最新文章。图:

4.Ajax提交评论和回复别人的留言:

在此之前,没此提交评论后,当前页面都要重新加载一次,很是耗时。添加Ajax评论后,速度会更快,也大量减少了请求。我的博客一直只提供2层回复。不喜欢多层次回复,看着很难受!具体Ajax评论效果大家只需留言即可看到。

花了精力添加这些Ajax效果,无非是为了让各位博友和来访者可以更加方便地阅读我的博客,同时也希望大家可以多多给我意见。每次添加新的功能我都会在左边的蓝条里写出来,大家可以一目了然地看到我最新的修改信息。