《jquery的主要学习计划.doc》由会员分享，可在线阅读，更多相关《jquery的主要学习计划.doc（33页珍藏版）》请在金锄头文库上搜索。
1、Jquery学习（红色：注意；蓝色：解释或注意；橙色：前面已出现过）第1天学习jquery基础部分，可以放慢角度，主要要打好基础。主要看 第2天完成基础部分的学习，此时应该不是很熟练，所以可以一边复习一边做例子。把练习的例子大概以章节划分。多练习几个事件处理中的一些例子。$(document).ready(function()$(.has_children).click(function()$(this).addClass(highlight).children(a).show().end().siblings().removeClass(highlight).children(a).hide
2、();););#menuwidth:300px;.has_childrenbackground:#555;color:#fff;cursor:pointer;.highlightcolor:#fff;background:green;divpadding:0;margin:10px 0;div abackground-color:#888;display:none;float:left;width:300px; 第一章-认识jquery 1.1-javascript和javascript库 1.2-加入jquery 1.3-编写简单的jquery代码 1.4-jquery对象和dom对象 1.
3、5-解决jquery和其他库的冲突 1.6-jquery开发工具和插件 第一章-认识jquery 1.1-javascript和javascript库 1.2-加入jquery 1.3-编写简单的jquery代码 1.4-jquery对象和dom对象 1.5-解决jquery和其他库的冲突 1.6-jquery开发工具和插件 第一章-认识jquery 1.1-javascript和javascript库 1.2-加入jquery 1.3-编写简单的jquery代码 1.4-jquery对象和dom对象 1.5-解决jquery和其他库的冲突 1.6-jquery开发工具和插件 修改后：鼠标悬浮
4、时显示下拉菜单，离开后菜单自动缩回$(document).ready(function()$(.has_children).mouseover(function()$(this).addClass(highlight).children(a).toggle().end().siblings().removeClass(highlight).children(a).hide();););Toggle()：来切换html元素的可见性，通俗的说就是显示隐藏的，隐藏可见的Siblings()：获取匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。如：查找每个 p 元素的所有类名为 selected
5、 的所有同胞元素：$(p).siblings(.selected)理解之后，重新改了：水平导航，鼠标悬浮在哪个标题，下面显示其菜单$(document).ready(function()$(.title).mouseover(function()$(this).children(.chtitle).toggle().end().siblings().children(.chtitle).hide();););*margin:0;padding:0.titlelist-style:none;float:left;margin:10px;ul.chtitlelist-style:none;marg
6、in:0;padding:0;display:none第一章第一节第二节第三节第二章第一节第二节第三节第三章第一节第二节第三节完善上面的例子。在上面的例子有一些不足之处，1，悬浮在主标题上后不能点击其子菜单2，使用slidedown（）效果，如果鼠标移动快容易在同一时间使多个主标题的子菜单同时显示针对这两个不足之处，主要做了一下修改。1，将mouseover（）鼠标悬浮事件修改成hover（a，b）光标离开前光标离开后事件2，将slidedown（）修改成show（）效果$(document).ready(function()$(li.title:has(ul).hover(function(
7、)$(this).children(.chtitle).show();,function()$(this).children(.chtitle).hide();););查找被点击的按钮$(document).ready(function() $(.bold).bind(click,function() alert(You have clicked the bold button); ); $(.italic).bind(click,function() alert(You have clicked the italic button); ););.buttonswidth:100px;floa
8、t:left;text-align:center;margin:5px;border:2px solid;font-weight:bold;bolditalicbind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。$(selector).bind(event,data,function)如：$(document).ready(function() $(button).bind( click:function()$(p).slideToggle();, mouseover:function()$(body).css(background-color,red);, mouseout:function()$(body).css(background-color,#FFFFFF); ););在这里绑定了三个事件，分别是点击事件、鼠标悬浮对象、鼠标离开悬浮对象对上面的例子进行修改：（1，bind（）事件换成click（）点击事件2，弹出对话框）$(document).ready(function() $(.buttons).click(function() alert(You have click
