JQuery学习系列总结—菜单制作

来源:互联网 发布:老七贸易知乎 编辑:程序博客网 时间:2024/06/05 06:20

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、可以使用background-repeat来控制背景图的重复填充方式

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

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

10、background-position可以控制背景图的位置,属性值既可以用数值,也可以用center,left,top这些值来控制横向和纵向的位置,这个属性的两个值,第一个对应横向,第二个对应纵向

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

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

13、IE6以外的其他浏览器可以通过设定dislpay的值为block来让a元素充满所在区域,对于IE6,则需要设定display为inline-block,同时设定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的$方法,也可以传入多个选择器