jQuery笔记和案例(2)

目录

 

jQuery帮我们解决了浏览器兼容问题

类操作

案例：tab栏切换

显示和隐藏之动画

下滑显示和上滑隐藏动画

案例：下拉菜单

淡入淡出动画

案例：京东轮播图

animate动画

删除元素

案例： 360开机动画

复习上午内容

动画队列及停止动画

动画延迟

显式迭代

案例：手风琴效果-王者荣耀版

jQuery创建元素与添加

案例：表格生成数据

添加元素的几种方式

行内属性 - multiple

案例： 城市选择

---

jQuery帮我们解决了浏览器兼容问题

• 1.x 版本也兼容老版本浏览器

 

类操作

• 用jQuery来操作类名

• 方法

  • addClass

    • 添加类

  • removeClass

    • 删除类

  • toggleClass

    • 切换类

  • hasClass

    • 判断是否有某个类

 

案例：tab栏切换

 

 

显示和隐藏之动画

• 就是在 show 和 hide 方法里传入一个动画时长，就有动画了，单位是毫秒

• 有个 toggle 切换显示和隐藏

• 不传没有动画

• 动画效果跟定位方向有关，显示动画就是从定位方向往外扩，隐藏动画就是缩小到定位的方向

• 详细参数

  • 参数1： 动画时长

    • 了解一下也可以传入字符串：'slow', 'normal', 'fast'

  • 参数2：动画效果，只有两个选项： 'swing' 和 'linear' ，默认是 'swing'

    • 用的少

  • 参数3： 回调函数

    • 当动画结束调用回调函数

  • 以上三个参数都是可选的，也就是说可以都不传，也可以就传1个，或者2个，或3个一起

  • 甚至还可以就写参数1和参数3，不写参数2

 

下滑显示和上滑隐藏动画

• slideDown

  • 下滑

• slideUp

  • 上滑

• slideToggle

  • 滑动切换

• 以上三个方法，默认都有动画效果，动画时长默认为0.25s

• 他们的都是共同的参数，参数跟 show 和 hide方法都是一样的

• jQuery里面所有效果动画参数都是一样的

 

 

案例：下拉菜单

 

 

淡入淡出动画

• 也是显示和隐藏，只不过是以透明度的形式来显示和隐藏

• 方法

  • fadeIn

    • 淡入

  • fadeOut

    • 淡出

  • fadeToggle

    • 淡出入

  • fadeTo

    • 淡到

    • 参数1：动画时长

    • 参数2：淡入到多少透明度

    • 参数3：动画效果

    • 参数4：动画完成的回调函数

• 他们的参数跟show、hide是一样的，参数1：动画时长 参数2：动画效果 参数3：动画完成的回调函数

 

案例：京东轮播图

 

animate动画

• 我们上面学的动画都是跟显示和隐藏有关

• 如果我想用别的动画，就可以用animate来指定动画效果，例如放大、缩小、移动

• 用法：

  jq对象.animate({
      要动画改变的属性值
  },动画时长, 动画效果, 动画完成的回调函数)

• animate回调函数里的this

  • 谁调用这个animate，回调函数里的this就是谁

  • this永远都是DOM对象

 

删除元素

• 语法：

  jq对象.remove()

   

 

案例： 360开机动画

 

复习上午内容

• jQuery的1.x版本解决了老版本浏览器的兼容问题

• 类操作

  • jq对象.addClass()

    • 添加类，如果要加多个，在内容里写空格

  • jq对象.removeClass()

    • 删除类

  • jq对象.toggleClass()

    • 切换类

  • jq对象.hasClass()

    • 判断是否有某个类，有得到true，没有得到false

• 动画相关

  • 显示和隐藏：

    • show和hide

    • 默认不传参数没有动画

    • 参数1：动画时长

    • 参数2：动画效果

    • 参数3：动画完成的回调函数

    • 这三个参数都是可选的

  • 下滑和上滑

    • slideDown和slideUp

    • 默认不传参数也有动画效果

    • 它也有三个参数，跟show和hide一样

  • 淡入和淡出

    • fadeIn

    • fadeOut

    • fadeToggle

    • fadeTo

      • 参数1：动画时长

      • 参数2：淡入到多少透明度

      • 参数3：动画效果

      • 参数4：回调函数

  • animate动画

    • 可以设置自己想设置的属性加动画

    • 参数1：对象，对象里写想用动画效果变到的属性

    • 参数2：动画时长

    • 参数3：动画效果

    • 参数4：回调函数

 

动画队列及停止动画

• 动画队列：

  • 把要执行的动画都加在一个队列里，先加的先执行，后加的后执行

  • 每个元素自己有一个自己的 动画队列， 跟别的元素不冲突

• 停止动画：

  • jq对象.stop()

    • 参数1： 是否清空动画队列，默认为false

      • 为true代表清空，也就相当于把后面的动画也停（停止所有动画）

      • 为false代表只停当前动画，继续后面的动画

    • 参数2：

      • 是否立即到当前动画的终点

      • 默认为false，代表不到，改成true代表立即到终点

动画延迟

• delay

  • 传入延迟时间，单位是毫秒

  • 它延迟的是后面的动画队列

显式迭代

• 隐式迭代：

  • jQuery内部会自动帮我们遍历每个元素设置为相同的属性，这就叫隐式迭代

• 显式迭代：

  • 就是自己写代码来遍历找到的每个元素

  • 语法

    jQuery对象.each(function (下标, 被遍历的dom元素) {
        
    })

    • 2个形参的名字可以随便写，建议叫 index 和 item

 

案例：手风琴效果-王者荣耀版

 

 

jQuery创建元素与添加

• $('元素')

  • html怎么写，$里面就怎么写

  • 例：

    let $a =  $('<a href="javascript:">点我啊</a>')

• 添加子元素到最后

  • JQ对象.append()

  • 可以传入一个jq对象，甚至还可以传入html标签，那样它会自动把html标签解析出来并添加

  • 相当于添加元素时，append()跟html()用法是一样的，但是append不会覆盖原来的内容，html会覆盖

• 子元素加到某个父元素上（子元素找爹）

  • jq对象.appendTo( 父元素 )

  • 还可以传入选择器，选择器找到多少个，就加到多少个身上

 

案例：表格生成数据

 

 

添加元素的几种方式

• append：

  • 父加子，加入到最后

  • 传jQuery对象或者标签

• appendTo：

  • 子加到父，加到最后

  • 传入jQuery对象，也可以直接传选择器

• prepend：

  • 父加子，加入到最前

• prependTo

  • 子加到父，加到最前

 

行内属性 - multiple

• multiple：多选的属性

• 写上就有效果，不选就没有效果

 

案例： 城市选择