跟我学JQuery---------------第三课
上第三课之前，希望大家把前2节课的知识练习一下，至少多Jquery这些api一下就能写出来，不要老去翻笔记，这样就体现不出你的水平了，第一课的比较容易，第二课的input.trigger("focus").trigger("select")和tdObj.children("input")以及var keycode = event.which; 稍微不留点神可能一下想不起来。对于基础的多加练习，把基础打牢。
?
今天讲的案例是: 横向和纵向菜单
?
?
menu.css
?
ul, li {/*清除ul和li上默认的小圆点*/list-style: none;}ul {/*清除子菜单的缩进值*/padding: 0;margin: 0;}.main, .hmain {background-image: url(../images/title.gif);background-repeat: repeat-x;width: 120px;}li {background-color: #EEEEEE;}a {/*取消所有的下划线*/text-decoration: none;padding-left: 20px;display: block;display: inline-block;width: 100px;padding-top: 3px;padding-bottom: 3px;}.main a, .hmain a {color: white;background-image: url(../images/collapsed.gif);background-repeat: no-repeat;background-position: 3px center;}.main li a, .hmain li a {color: black;background-image: none;}.main ul, .hmain ul {display: none;}.hmain {float: left;margin-right: 1px;}?
?
menu.html
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>JQuery实战-菜单效果</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/menu.css" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/menu1.js"></script></head><body><ul><li name="code">$(document).ready(function(){//$(".main > a") 跟 $(".main a")一样都是取到classname是.main元素的子元素a//记得第一课讲了.classname 和#idname$(".main > a").click(function(){var ulNode = $(this).next("ul");//第一种方式：show动画显示 默认是fast ,加上slow是慢，还可以加上时间show("4000")，hide相反//此效果是点击显示并自动隐藏 更多效果可以参考api文档//ulNode.show("slow");//ulNode.hide("slow");//第二种方式：toggle相当于做了判断，如果隐藏，就显示，相反则隐藏//相当于/*if (ulNode.css("display") == "none") {ulNode.css("display","block");} else {ulNode.css("display","none");}*///不同的是加了动画效果//ulNode.toggle("slow");//第三种方式:和二是一样的，动画效果有点不同ulNode.slideToggle();//第四种凡是：和第一种是一样的效果，动画效果不同而已//ulNode.slideDown("slow");//ulNode.slideUp("slow");changeIcon($(this));});$(".hmain").hover(function(){ $(this).children("ul").slideDown("slow"); changeIcon($(this).children("a"));},function(){$(this).children("ul").slideUp("slow"); changeIcon($(this).children("a"));});function changeIcon(menu){if(menu.css("background-image").indexOf("collapsed.gif") >0){menu.css("background-image","url('images/expanded.gif')");}else{menu.css("background-image","url('images/collapsed.gif')");}}})?
效果图：
?
?
总结：
1。.main a和.main > a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中的a节点
2。.show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是’slow’,’normal’,’fast’这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的
3。.toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同
4。.slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同
5。.slideToggle和toggle达到的效果类似
6。.DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果