邪罗刹的菠萝阁

> 吼吼 O(∩_∩)O，向 jQuery 进军啦，那么首当其冲需要添加的是 jQuery 鼠标悬停效果。
> 其实很多地方讲到了这个效果，那么我这里的特色就是让某些地方不使用此效果。

> 那么很多童鞋应该发现我的博客已经开始使用 jQuery 效果了，虽然 jQuery 1.3.2 库有50多KB。
> 不过我图片都是70多KB，也不差这一点。那么接触 JavaScript 就从 jQuery 开始吧。

P.s. 我最希望的是每个来我博客的人都能有所收获，那才是我的动力。

初步了解：
> 首先是 jQuery库 是一个简洁快速灵活的JavaScript框架。
> 它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

特点：
> 1、代码简练、语义易懂、学习快速、文档丰富。
> 2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
> 3、jQuery支持CSS1-CSS3,以及基本的xPath。
> 4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
> 5、可以很容易的为jQuery扩展其他功能。
> 6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。
> 7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能。

使用方法：
> 当前最流行的是从Google提供的服务中加载，地址如下。
> http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
> 当然也可以从 http://jquery.com/ jQuery 的官网下载上传到自己的网站然后加载。
> 在网页的 html 标签之内任何地方都可以使用以下代码进行加载。

<script type="text/javascript" src="Js文件地址"></script>

添加悬停效果：
> 以下代码可以直接写成一个 Js文件 。

jQuery(document).ready(function($){ 

	$(‘a’).mouseover(function(tot){
		this.myHref = this.href;
		this.myHref = (this.myHref.length > 45 ?
			this.myHref.substring(0,45)+" ..." : this.myHref);
		var hoverbox = "<div id='hoverbox'>"+this.myHref+"</div>";
		$('body').append(hoverbox);
		$('#hoverbox').css({
			"opacity":"0.9","top":(tot.pageY+20)+"px",
			"left":(tot.pageX+10)+"px"}).show('middle');})
			.mouseout(function(){$('#hoverbox').remove();
		}).mousemove(function(e){$('#hoverbox').css({
			"top":(tot.pageY+20)+"px","left":(tot.pageX+10)+"px"
		});
	});

});

解说：
> mouseover 表示鼠标悬停在带有 a 标签的元素上的时候执行此函数。
> this.myHref.length 表示鼠标指向的文字的链接长度，这里使用45个字符进行限制。
> 大于45个英文字符的Url则截断，然后在后面加上“ ...”。
> substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点，较大值则为终点。
> 即从第0位开始到第45位，substring(0,45)。
> 然后定义一个 hoverbox 变量。
> 使用 append 插入html代码，接着指定 hoverbox 的默认CSS，opacity 是透明度。
> pageY 指定相对Y轴坐标，pageX 指定X轴。mouseout 表示鼠标移走，mousemove 表示鼠标在元素上移动。
> 在元素上移动的时候保持不动，移开就 remove。

排除元素：
> 下面代码之间的函数都是调用 jQuery 库的，在下面代码中插入下面的下面的代码 (^o^)。

jQuery(document).ready(function($){
});

$("#sidebar").mouseover(function(tot1){
	$('#hoverbox').remove();
});

> 我的模板的 sidebar 是一个ID 所以这里用 #sidebar 查找元素。
> 这样子就不会在边栏显示了。