效果：
点击第二个菜单项后出现一个向上滑动的动画，控制margin-top底部另一个div中的文字
上移从而替换掉原有的文字。
原理其实不难无非就是css的控制加之jquery的代码
对docemnt中所有li绑定一个hover事件，事件中根据鼠标的状态（无非是移入与移除），
使用animate的动画方式使原有的div向上移70px，移出时再将页面效果变回原有的样子。
代码如下：
$(function () {
var webNav = {
val: {
target: 0
},
init: function () {
$(".gnb ul li").on("hover", webNav.hover);
},
hover: function (e) {
if ($(this).index() == webNav.val.target) { return };
if (e.type == "mouseenter") {
$(this).find("a>p").stop(true, true).animate({ "margin-top": "-70px" }, 300);
} else if (e.type == "mouseleave") {
$(this).find("a>p").stop(true, true).animate({ "margin-top": "0px" }, 300);
}
}
};
webNav.init();
});Demo下载：http://www.cfxixi.com/showtopic-528.aspx
前几天在看《jquery基础教程》，看到事件委托的时候，关于live()方法讲的不是很详细，就去搜了一下关于live()和delegate()的。
然后在一处看到live()已经被移除了，囧，然后去看了最新的jq源码，果然被移除了，现在是1.9.1版本，不知道live()是在之前哪个版本被移除的，惭愧啊，之前都没留意。
看源码发现bind()和delegate()都是由on()实现的。on()的描述如下：
一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样。
在需要为较多的元素绑定事件的时候，优先考虑事件委托，可以带来性能上的好处。比如：
如上图，将click事件绑定在document对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理。
注意到.on()的描述中第二个可选参数：selector。如下图，添加了第二个参数，选择符button：
结果：
当事件冒泡到document对象时，检测事件的target，如果与传入的选择符（这里是button）匹配，就触发事件，否则不触发。
注意.on()也可以接收一个对象参数，该对象的属性是事件类型，属性值为事件处理函数。下面是官方文档的一个例子：
最后有一点，原先的live()方法，处理函数是默认绑定在document对象上不能变的，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法，事件只会绑定到$()函数的选择符表达式匹配的元素上（上面我的例子中，为了简单绑定到了document），因此可以精确地定位到页面中的一部分，而事件冒泡的开销也可以减少。delegate()与on()同理，毕竟是用on()实现的：
本文链接
作者：老默 http://senir.blog.163.com (转载请注明出处）
这几个筛选器都是找父亲的，但具体用法不同
.parent(expr)-查找父亲，只查一级，正宗的父亲，表达式应该很少用
.parents(expr)-加了复数，就变成多个父亲了，从父亲开始查，一直往上查，查到根元素，然后通过expr表达式过滤
.closest(expr)-这个跟parents类似，但是这个是从当前元素开始查，并且查到符合表达式的就停止了
.parentsUntil(expr)-跟parents类似，区别是不会查到根元素，遇到expr匹配的就停止了，同时不包括expr匹配到的那个元素
测试用例：
<div id="main">
<div id="hot" >
<h2>热门推荐</h2>
<ul>
<li>
<ul>
<li >融氏橄榄油</li>
<li>帮宝适纸尿裤</li>
<li id="h">有机大米</li>
<li>妙洁垃圾袋</li>
<li>优乐美奶茶</li>
<li>亲亲果冻</li>
</ul>
</li>
<li>
<ul>
<li>海飞丝洗头膏</li>
<li>六神花露水</li>
<li>舒肤佳香皂</li>
<li>心相印纸巾</li>
<li>哇哈哈矿泉水</li>
<li>王老吉</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
//此处为jQuery代码
</script>
测试1：找到id="h"的元素的父元素并设置背景色为灰
效果：
上面的代码等价于
如果要找爷爷辈的
则会失败
测试2：找到id="h"的祖辈元素中符合是ul标签的元素，设置背景色为灰
效果：
parents不但找到了父亲，还找到了曾祖父 ^_^，但是closest就不会，因为closest找到父亲就停止找了
测试3：用closest找到id="h"的祖辈元素中符合是ul的标签的元素，设置背景色为灰
效果：
测试4：测试closest是从当前元素开始查找，而parents是从父辈元素开始查找，找到id="h"的父辈元素中是li标签的元素，并设置背景色为灰
效果：
效果：
测试5：找到id="h"的父元素中是ul标签的元素，并设置背景色为灰，目的是测试parentsUntil查找到的expr就停止了，但不包含符合expr的那个元素，对比测试1
效果：