JQuery学习笔记
2010-01-30 01:17
197 查看
原文链接:http://yecols.cn/blog/?p=252
寒假准备学习一下JQuery,这是一份学习笔记,记录学习和折腾JQuery过程中的走的弯路和遗留的疑惑。
1.14日JQuery1.4发布,再度激起了我对JQuery的热情。准备折腾下本站的about页面,用标签实现“关于本站”和“关于我”两个页面的共存,以及鼠标悬停时切换的效果,如下或看看完成后的效果。
![](http://yecols.cn/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-30-at-12.16.30-AM.png)
首先推荐两个资源和一本书。
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的结构:
这里用的是这样一种思想:用两张gif分别表示标签的两种状态:gra.gif表示标签未选中时的渐变样式,sel.gif表示标签被选中的样式。两张gif的高度都为32px。为了能让标签“看起来”是选项卡的效果——即标签与下面的内容页相连,让表示选中的标签sel.gif第32个像素线为背景色。再将两个标签图片所在的span:#tab-title高度设为32px,并设置border-bottom为1像素的水平线,这样,当选中标签时,标签内第32个像素线刚好被sel.gif盖过,从而实现了选项卡的效果。
添加JQuery代码,
加了这段代码,没有反应。仔细用Firebug检查,发现这个mouseover函数根本就没有触发,而跟踪$('#tab-title span')变量又是能正确得到对应span的。绑在其他函数上如click上同样不触发。
查找,尝试,最后发现,上述函数应该再绑定为ready的函数才能正确监听事件。
完整脚本,加上易读格式以及注释:
至此,about页效果完成。可以点击查看。
关于这个JQuery封装的ready函数,与js原生函数window.onload异同和优点收集如下:
1.ready函数当DOM模型加载完时触发,window.onload当页面全部加载完时触发;
2.ready函数跨浏览器兼容;
3.ready函数可以在一个页面中出现多次。
接下来准备用animate为顶上的导航做个子菜单效果。
原文链接:http://yecols.cn/blog/?p=252
寒假准备学习一下JQuery,这是一份学习笔记,记录学习和折腾JQuery过程中的走的弯路和遗留的疑惑。
1.14日JQuery1.4发布,再度激起了我对JQuery的热情。准备折腾下本站的about页面,用标签实现“关于本站”和“关于我”两个页面的共存,以及鼠标悬停时切换的效果,如下或看看完成后的效果。
![](http://yecols.cn/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-30-at-12.16.30-AM.png)
首先推荐两个资源和一本书。
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
相关文章推荐
- jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)
- JQuery学习笔记
- JQuery学习笔记
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- jQuery 学习笔记 一 初体验
- Java程序员的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
- jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画
- jquery学习笔记之选择器
- jQuery学习笔记之九------事件对象
- JQuery简介及语法学习笔记
- jQuery学习笔记——流水账part1
- jQuery学习笔记之十------高级事件
- 总结jQuery学习笔记-带你由浅入深学习jQuery(3)
- 【学习笔记】锋利的jQuery(四)AJAX
- jQuery学习笔记(一)
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能
- 菜鸟的jQuery源码学习笔记(一)
- JQUERY1.9学习笔记 之基本过滤器(十一) 奇数选择器
- jQuery学习笔记之选取选定复选框的同行某列元素
- JQuery学习笔记之change事件