遥远的jQuery（六） | 一起学系列

来自小星星的你
80 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情 

本期开始我们继续复盘jQuery语法

  • jQuery中的入口函数
    • 对比：原生的window.onload
      • 等页面中所有内容（包括DOM树、音频、视频、图片等）加载完毕之后才会触发window.onload中的函数，所以书写位置不会限制该事件的执行。一个页面中只能出现一次，后面书写的后替换前面的 image.png
  • jQuery中的入口函数语法1：
    • $(document).ready(function () { //获取元素 })
    • 简化：$(function () {})
    • jQuery中的入口函数只需要等待页面中的DOM树加载完毕就可以执行了
    • 在一个页面中，可以书写多个jQuery的入口函数，执行顺序按照前后加载顺序执行
  • hide（）和show（）方法
    • hide（）：元素隐藏，隐藏的前提必须是元素display:block
    • show（）：元素显示，显示的前提必须是元素display：none
    • toggle（）：在元素隐藏和显示之间进行切换
    • 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画
    • 参数
      • 如果不传参数：直接显示和隐藏，没有过渡动画
      • 如果传递参数：
        • 单词格式：“slow”，“normal”，“fast”
        • 数字格式的事件，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
      • 过渡时间内，伴随着宽度和高度以及透明度的变化
  • slideDown（）和slideUp（）方法
    • slideDown（）：滑动显示（方向不一定）
    • slideUp（）：滑动隐藏
    • slideToggle：滑动切换
    • 让元素在display属性的block和none之间进行切换
    • 参数：
      • 如果不传参数：默认的过渡时间为400毫秒
      • 如果传递参数：
        • 单词格式：“slow”，“normal”，“fast”
        • 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
      • 注意：
        • 如果元素没有设置宽度，则不会有滑动隐藏的效果
        • 如果元素设置了高度和宽度，会进行上下垂直方向的滑动
        • 动画的效果：高度属性在0到设置值之间的变化，没有透明度动画
        • 如果元素设置了定位，偏移量方向如果是bottom参与了，滑动方向会发生变化
  • fadeIn（）和fadeOut（）方法
    • fadeIn（）：淡入，透明度逐渐增大最终显示
    • fadeOut（）：淡出，透明度逐渐降低最终隐藏
    • fadeToggle（）：切换效果
    • fadeTo（）：淡入或淡出到某个指定的透明度，给参数时，须在前面给一个时间的参数，然后在填写透明度的参数
    • 动画效果，执行的是透明度动画，也是在display属性的block和none之间切换
    • 参数：
      • 如果不传参数：默认的过渡时间为400毫秒
      • 如果传递参数“”
        • 单词格式：“slow”，“normal”，“fast”
        • 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
avatar
文章
阅读
粉丝