1、Jquery 学习（红色：注意；蓝色：解释或注意；橙色：前面已出现过 ）第 1 天学习 jquery 基础部分，可以放慢角度，主要要打好基础。主要看 第 2 天完成基础部分的学习，此时应该不是很熟练，所以可以一边复习一边做例子。把练习的例子大概以章节划分。多练习几个事件处理中的一些例子。$(document).ready(function()$(“.has_children“).click(function()$(this).addClass(“highlight“).children(“a“).show().end().siblings().removeClass(“highlight“)
2、.children(“a“).hide();););#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;第一章-认识 jquery1.1-javascript 和 javascript 库1.2-加入 jquery1.3-编写简单的 jquery 代码
3、1.4-jquery 对象和 dom 对象1.5-解决 jquery 和其他库的冲突1.6-jquery 开发工具和插件第一章-认识 jquery1.1-javascript 和 javascript 库1.2-加入 jquery1.3-编写简单的 jquery 代码1.4-jquery 对象和 dom 对象1.5-解决 jquery 和其他库的冲突1.6-jquery 开发工具和插件第一章-认识 jquery1.1-javascript 和 javascript 库1.2-加入 jquery1.3-编写简单的 jquery 代码1.4-jquery 对象和 dom 对象1.5-解决 jque
4、ry 和其他库的冲突1.6-jquery 开发工具和插件修改后：鼠标悬浮时显示下拉菜单，离开后菜单自动缩回$(document).ready(function()$(“.has_children“).mouseover(function()$(this).addClass(“highlight“).children(“a“).toggle().end().siblings().removeClass(“highlight“).children(“a“).hide();););Toggle()：来切换 html 元素的可见性，通俗的说就是显示隐藏的，隐藏可见的Siblings()：获取匹配集合中
5、每个元素的同胞，通过选择器进行筛选是可选的。如：查找每个 p 元素的所有类名为 “selected“ 的所有同胞元素：$(“p“).siblings(“.selected“)理解之后，重新改了：水平导航，鼠标悬浮在哪个标题，下面显示其菜单$(document).ready(function()$(“.title“).mouseover(function()$(this).children(“.chtitle“).toggle().end().siblings().children(“.chtitle“).hide();););*margin:0;padding:0.titlelist-styl
6、e:none;float:left;margin:10px;ul.chtitlelist-style:none;margin:0;padding:0;display:none第一章第一节第二节第三节第二章第一节第二节第三节第三章第一节第二节第三节完善上面的例子。在上面的例子有一些不足之处，1，悬浮在主标题上后不能点击其子菜单 2，使用slidedown（）效果，如果鼠标移动快容易在同一时间使多个主标题的子菜单同时显示针对这两个不足之处，主要做了一下修改。1，将 mouseover（）鼠标悬浮事件修改成hover（ a，b）光标离开前光标离开后事件 2，将 slidedown（）修改成 show
7、（）效果$(document).ready(function()$(“li.title:has(ul)“).hover(function()$(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“,fun
8、ction()alert(“You have clicked the italic button“);););.buttonswidth:100px;float: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(
9、)$(“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(“Yo
10、u have clicked the “ +$(this).text()+“ button“);););Trigger（）触发事件$(document).ready(function()$(“.buttons“).bind(“click“,function()alert(“You have clicked the “ +$(this).text()+“ button“););$(.italic).trigger(“click“););点击之后禁用按钮$(document).ready(function()$(“.buttons“).bind(“click“,function()alert(“Y
11、ou have clicked the “ +$(this).text()+“ button“);$(“.buttons“).unbind(“click“););$(.italic).trigger(“click“););Unbind（）用于从指定元素中删除某事件类型查找鼠标按下使得屏幕坐标$(document).ready(function()$(“.buttons“).bind(“mousedown“,function(event)$(“p“).text(“x:“+event.screenX+“ ,y:“+event.screenY);););Event.preventDefault（）
12、；防止浏览器导航到超链接所指向的网站。也就是说，它使超链接忽略默认操作。为响应事件而添加和删除文本$(document).ready(function()$(“.add“).click(function()$(“div“).prepend(“hello good morning good afternoon !“););$(“.remove“).click(function()$(“p“).remove();););第三天练习视觉特效的例子按页显示图片无标题文档 $(document).ready(function()var $pic=$(“#images a“);$pic.hide();va
13、r imgs=$pic.length;var next=$pic.eq(0);next.css(“position“:“absolute“,“left“:10);next.show();var $pagenumbers=$(“);for(var i=0;i“+(i+1)+“).appendTo($pagenumbers);$pagenumbers.insertBefore(next);$(“.page“).hover(function()$(this).addClass(“hover“);,function()$(this).removeClass(“hover“););$(“span“).c
14、lick(function(event)$pic.hide();next=$pic.eq($(this).text()-1);next.show();););eq() 方法将匹配元素集缩减值指定 index 上的一个。对于上例，进行了修改：让文字悬浮在图片上，然后鼠标悬浮在哪个数字上，就显示哪个图片$(document).ready(function()var $pic=$(“#images a“);$pic.hide();$pic.eq(0).show();$(“#pages a“).mouseover(function()$pic.hide();$pic.eq($(this).text()-1).show();););无标题文档 1234 钟摆式滚动器无标题文档 $(document).ready(function()var $wrapper=$(“#scroller a img“);var left_rightanimator=function()$wrapper.animate(left:-790,5000,function()$wrapper.animate(left:465,5000);left_rightanimator(););left_rightanimator(););
