JQuery学习笔记

原文链接：http://yecols.cn/blog/?p=252

 

寒假准备学习一下JQuery，这是一份学习笔记，记录学习和折腾JQuery过程中的走的弯路和遗留的疑惑。

1.14日JQuery1.4发布，再度激起了我对JQuery的热情。准备折腾下本站的about页面，用标签实现“关于本站”和“关于我”两个页面的共存，以及鼠标悬停时切换的效果，如下或看看完成后的效果。

 

 

首先推荐两个资源和一本书。 1.JQuery 1.4 API 中文文档 http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml 2.JQuery 1.4.1 在Google AJAX Lib的库文件 http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js 《锋利的JQuery》，一本看了都说好的书。 参考网上资料，这样设计该页面的html的结构：

相应的CSS样式：

#divTab{
	
	overflow:hidden;
	display: block;
}

#tab-title{
	border-bottom: 1px solid #cccccc;
	padding-bottom: 31px;
	padding-right: 20px;
}

#tab-title .selected{
	float: right;
	color:#186297;
	width: 183px;
	height: 32px;
	background: url(images/sel.gif);
	text-align: center;
	margin-right: 2px;
} /*标题被选中时的样式*/

#tab-title span{
    float: right;
	background-image: url(images/gra.gif);
	width: 183px;
	height: 32px;
	text-align: center;
	margin-right: 2px;
}

.tab-name{
	padding-top: 7px;
	font-size:14px;
	font-weight:bold;
}

#tab-content .hide{
        display:none;
}

这里用的是这样一种思想：用两张gif分别表示标签的两种状态：gra.gif表示标签未选中时的渐变样式,sel.gif表示标签被选中的样式。两张gif的高度都为32px。为了能让标签“看起来”是选项卡的效果——即标签与下面的内容页相连，让表示选中的标签sel.gif第32个像素线为背景色。再将两个标签图片所在的span：#tab-title高度设为32px，并设置border-bottom为1像素的水平线，这样，当选中标签时，标签内第32个像素线刚好被sel.gif盖过，从而实现了选项卡的效果。 添加JQuery代码，

$('#tab-title span').mouseover(function(){
	$(this).addClass("selected").siblings().removeClass();
	$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
});

加了这段代码，没有反应。仔细用Firebug检查，发现这个mouseover函数根本就没有触发，而跟踪$('#tab-title span')变量又是能正确得到对应span的。绑在其他函数上如click上同样不触发。 查找，尝试，最后发现，上述函数应该再绑定为ready的函数才能正确监听事件。 完整脚本，加上易读格式以及注释：

$(document).ready(function(){
        $('#tab-title span').mouseover(function(){
        $(this).addClass("selected")//将当前span添加类属性
        .siblings().removeClass();//其兄弟节点移除类属性
        $("#tab-content > ul").eq($('#tab-title span').index(this)).show()//内容页显示
        .siblings().hide();//其兄弟节点隐藏
        })//mouseover
    });//ready

至此，about页效果完成。可以点击查看。 关于这个JQuery封装的ready函数，与js原生函数window.onload异同和优点收集如下：

1.ready函数当DOM模型加载完时触发，window.onload当页面全部加载完时触发；

2.ready函数跨浏览器兼容；

3.ready函数可以在一个页面中出现多次。

接下来准备用animate为顶上的导航做个子菜单效果。

 

 

原文链接：http://yecols.cn/blog/?p=252