邪罗刹的菠萝阁

> 小邪今天把博客文章标题加上了 jQuery 点击文字替换效果，有兴趣可以返回文章列表点点看。
> 呵呵，实际上灰常简单的，就只需要一个 Click 事件，然后修改 Text 为载入中就好了。

> jQuery 查找元素的语法跟 CSS 中是一样的，比如我的文章标题就是 .post .title h2 a 。
> O(∩_∩)O 然后我打算把博客上所有的链接都加上自动替换的效果，嘿嘿嘿嘿，那样子就太壮观啦。

1. 首先载入 jQuery 库（谷歌提供的托管地址）：

1
2
3

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js">
</script>

2. 然后添加点击后替换文字效果的JS代码：

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
jQuery(document).ready(function($){ 
 
$('a').click(function(){
	$(this).text('载入中 ...');
	});
 
});
</script>

> 呵呵，相信你看出了我说话的漏洞了，我并没有说替换后还会变回来。
> 所以在对带 Target="_blank" 的打开新窗口的链接使用此效果之后，新的窗口打开。
> 而旧的窗口还在那里，同时里面的链接文字就一直保持在 “载入中 ...” 的字样，那样就杯具了。

3. 进阶使用点击后替换文字效果的JS代码：

> 那么下面要实现的就是在 1.8 秒钟以后自动将链接文字替换回来。
> 一般网页的载入时间是 1.3 秒钟，然后假设新窗口打开之后立即切换回来，就总共算 1.8 秒。

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
jQuery(document).ready(function($){ 
 
$('a').click(function(){
	myloadoriginal = this.text;
	$(this).text('载入中 ...');
	var myload = this;
	setTimeout(function() { $(myload).text(myloadoriginal); }, 1800);		
});
 
});
</script>

4. 关于 jQuery 选择器的简单解说：

> 如果觉得麻烦直接就直接使用我的进阶方法吧，这个是对整个站点的所有链接实现的。
> 然后就可以完美地实现 jQuery 人性化的加载提示功能，祝你好运 O(∩_∩)O。

> 其实 jQuery 的元素选择器跟 CSS 几乎一致，层层递进比较容易理解。
> .post .title h2 a 是选择我的模板的文章标题，具体的请根据实际情况指定。

5. 自行下载 jQuery 库：

> 传送门：http://code.google.com/p/jqueryjs/downloads/list
> 然后上传到自己的站点，并将以下代码上的地址修改我你站点上文件的路径。

1

<script type="text/javascript" src="jQuery库的地址"></script>

6. 欢迎来 Follow 我的 Twitter @AngelSolo 。