jQuery--API

精品服饰案例：

<div class="wrapper">
    <ul id="left">
        <li><a href="#">女靴</a> </li>
        <li><a href="#">雪地靴</a> </li>
        <li><a href="#">冬裙</a> </li>
        <li><a href="#">呢大衣</a> </li>
        <li><a href="#">毛衣</a> </li>
        <li><a href="#">棉服</a> </li>
        <li><a href="#">女裤</a> </li>
        <li><a href="#">羽绒服</a> </li>
        <li><a href="#">牛仔裤</a> </li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/1.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/2.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/3.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/4.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/5.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/6.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/7.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/8.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/9.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/10.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/11.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/12.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/13.jpg" width="200" height="200" /></a> </li>
        <li><a href="#"><img src="images/14.jpg" width="200" height="200" /></a> </li>
    </ul>
    <ul id="right">
        <li><a href="#">女包</a> </li>
        <li><a href="#">男包</a> </li>
        <li><a href="#">登山鞋</a> </li>
        <li><a href="#">皮带</a> </li>
        <li><a href="#">围巾</a> </li>
        <li><a href="#">皮衣</a> </li>
        <li><a href="#">男毛衣</a> </li>
        <li><a href="#">男棉服</a> </li>
        <li><a href="#">男靴</a> </li>
    </ul>
</div>
<script>
    $(function () {
        $("#left>li").mouseenter(function () {
            var ind = $(this).index();
            $("#center>li").hide()
            $("#center>li:eq("+index+")").show();
        });
        $("#right>li").mouseenter(function () {
            var ind = $(this).index() + 9;
            $("#center>li").hide()
            $("#center>li:eq("+index+")").show();
        });
    })
</script>

链式编程：对象不停的调用方法。对象调用方法，如果返回值还是当前对象，那么就可以继续调用方法。prop()方法：设置或获取元素的选中。
width();height();offset();scrollLeft/scrollTop();
元素的添加：
父级元素.append(子级元素)；子级元素.appendTo(父级元素)；
父级元素.prepend（子级元素）；加到第一个子级元素的前面；
子级元素.prependTo(父级元素)；加到第一个子级元素的前面；
父级元素.after(元素)；当前父级元素后面的第一个兄弟元素的位置；
父级元素.before(元素)；前父级元素前面的一个兄弟元素的位置；
empty()移除；off() 解绑；
trigger()触发；  triggerHandler();可以触发该事件，但不能触发浏览器的默认行为；