【Jquery】——第三讲

Jquery第三讲

1.页面中的菜单项可以通过嵌套的ul和li来表示

2.菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单。

3.浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。Opera浏览器

比较特殊，li的标识符和其他浏览器不同。

4.list-style属性值为none时，可以清除ul和li前面的小圆点

5.清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值

6.可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小

要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域

7.可以使用bakcground-repeat来控制背景图的重复填充方式。

8.如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的

9.text-decoration属性值为none时，可以取消文字上的下划线

10.background-position可以控制背景图的位置，属性值既可以用数值，也可以用center，

left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个

对应纵向

11.background-image的值为none表示没有背景图

12.background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示。

13.IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区

域。对于IE6，则需要设定display为inlineblock，同时设定a的宽度。

14.display的值为none可以用于隐藏元素。

15..main a和.main > a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中的a节点

16.show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是’slow’,’normal’,’fast’这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的。

17.toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的

元素隐藏起来，隐藏的元素显示出来。参数使用方法和show， hide相同。

18.slideDown， slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改

元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show， hide不

同。

19.slideToggle和toggle达到的效果类似

20.DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中，

JQuery的动画会出现闪烁的糟糕效果。

21.float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动。

22.可以给多个选择器定义同样的样式，选择器之间用, 分割。同样对于JQuery的$方法，

也可以传入过个选择器。

$(document).ready(function () {
    //页面中的DOM已经装载完成时，执行的代码
    $(".main>a").click(function () {
        //找到主菜单项对应的子菜单项
        var ulNode = $(this).next("ul");
        /*if (ulNode.css("display") == "none") {
            ulNode.css("display", "block");

        } else {
            ulNode.css("display", "none");
        }
        */

        //    ulnode.show("slow");
        //    ulNode.hide();
        //    ulNode.toggle();

        //    ulNode.slideDown("slow");
        //    ulNode.slideUp;

        ulNode.slideToggle();
        changeIcon($(this));


    });
    $(".hmain").hover(function () {
        $(this).children("ul").slideDown();
        changeIcon($(this).children("a"));
    }, function () {
        $(this).children("ul").slideUp();
        changeIcon($(this).children("a"));

    });
});
/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
    if (mainNode) {
        if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
            mainNode.css("background-image", "url('images/expanded.gif')");
        } else {
            mainNode.css("background-image", "url('images/collapsed.gif')");
        }

    }
}