jQuery选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<body>

<ul>
<li>1</li>
<li class="a">2</li>
<li>3</li>
<li class="b">4</li>
<li>5</li>
<li class="c">6</li>
<li>7</li>
<li id="box">8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
console.log($('#box'))
//注意:不管使用任何选择器,获取到的元素都是一个元素集合。
console.log($('.a'))
console.log($('li'))
console.log($('li:nth-child(odd)'))
console.log($('li:nth-child(even)'))
</script>
</body>

image-20211124162915805

jQuery元素筛选器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/*
jQuery 的筛选器
+ 对 jQuery 的元素集合进行二次筛选
+ 注意: 只有 jQuery 的元素集合才可以使用, 原生 DOM 对象不能使用

1. first()
=> 元素集合里面的第一个
2. last()
=> 元素集合里面的最后一个
3. eq(索引)
=> 元素集合里面指定索引的那一个

4. next()
=> 当前元素的下一个元素
5. nextAll()
=> 语法
1. 元素集合.nextAll() 获取到当前元素后面的所有兄弟元素
2. 元素集合.nextAll(选择器) 获取到当前元素后面所有元素中指定选择器的那一个
6. nextUntil()
=> 语法
1. 元素集合.nextUntil() 获取到当前元素后面所有的兄弟元素
2. 元素结合.nextUntil(选择器) 获取到当前元素后面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)

7. prev()
=> 当前元素的上一个元素
8. prevAll()
=> 语法
1. 元素集合.prevAll() 获取到当前元素上面的所有兄弟元素
2. 元素集合.prevAll(选择器) 获取到当前元素上面的所有兄弟元素中指定选择器的那一个
9. prevUntil()
=> 语法
1. 元素结合.prevUntil() 获取到当前元素上面所有的兄弟元素
2. 元素结合.prevUntil(选择器) 获取到当前元素上面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)

10. parent()
=> 获取到当前元素的父元素
11. parents()
=> 语法
1. 元素集合.parents() 拿到结构父级的所有父元素
2. 元素集合.parents(选择器) 拿到结构父级里面所有父元素中符合选择器的那一个元素
12. children()
=> 语法
1. 元素集合.children() 拿到该元素的所有子元素
2. 元素集合.children(选择器) 拿到该元素的所有子元素中符合选择器的那一个元素
13. sinblings()
=> 拿到该元素的所有兄弟元素, 自己除外

14. find()
=> 找到该元素中所有后代元素里面符合选择器条件的元素
15. index()
=> 获取到的就是该元素在其父元素里面的索引位置
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 1. first
// console.log($('li').first())
// 2. last
// console.log($('li').last())
// 3. eq(索引)
// console.log($('li').eq(2))

// 4. next()
// console.log($('span').next())()
// 5. nextAll()
// console.log($('span').nextAll())
// console.log($('span').nextAll('.box'))
// 6. nextUntil()
// console.log($('span').nextUntil())
// console.log($('span').nextUntil('.box'))

// 7. prev()
// console.log($('span').prev())
// 8. prevAll()
// console.log($('span').prevAll())
// console.log($('span').prevAll('.box'))
// 9. prevUntil()
// console.log($('span').prevUntil())
// console.log($('span').prevUntil('.box'))

// 10. parent()
// console.log($('span').parent())
// 11. parents()
// console.log($('span').parents())
// console.log($('span').parents('body'))
// 12. chidlren()
// console.log($('ul').children())
// console.log($('ul').children('.box'))
// 13. siblings()
// console.log($('span').siblings())

// 14. find()
// console.log($('body').find('span'))
// 15. index()
console.log($('span').index())
console.log($('.a'))
console.log($('.a').first().index())
console.log($('.a').last().index())

jQuery操作文本内容

  1. html()

    =>语法:

    1. 元素集合.html()
      • 获取该元素的超文本内容, 以字符串的形式返回
      • 获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容
    2. 元素集合.html(‘内容’)
      • 设置元素集合内元素的超文本内容
      • 完全覆盖式的写入
      • 隐式迭代:元素集合内多少元素,就写入多少元素
  2. text()

    =>语法:

    1. 元素集合.text()

      • 获取该元素的文本内容,以字符串的形式返回
      • 因为是文本内容, 不涉及 html 结构, 所以拿到的是所有元素的文本内容
      • 以一个字符串的形式返回
    2. 元素集合.text(‘内容’)

      • 设置元素集合内元素的文本内容
      • 完全覆盖式的写入4
      • 隐式迭代: 元素集合内有多少元素, 就写入多少元素
    3. val()

      => 语法:

      1. 元素集合.val()
        • 获取元素集合内元素的 value 值
      2. 元素集合.val(‘内容’)
        • 设置元素集合内元素的 value 值
        • 完全覆盖式的写入
        • 隐式迭代: 元素集合内有多少元素, 就写入多少元素
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      // 1. html()
      // 获取
      // console.log($('div').html())
      // 设置
      // $('div').html('<span>我是新来的</span>')


      // 2. text()
      // 获取
      // console.log($('div').text())
      // 设置
      // $('div').text('<span>我是新来的 span 标签</span>')


      // 3. val()
      // 获取
      // console.log($('input').val())
      // 设置
      // $('input').val('hello world')

      jQuery操作类名

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      /*
      jQuery 操作元素类名

      1. addClass()
      + 添加元素类名
      2. removeClass()
      + 删除元素类名
      3. hasClass()
      + 判断有没有类名
      4. toggleClass()
      + 切换类名
      + 如果原先有, 就是删除
      + 如果原先没有, 就是添加
      */

      // 1. addClass()
      $('div').addClass('box')

      // 2. removeClass()
      $('div').removeClass('box')

      // 3. hasClass()
      console.log($('div').hasClass('box'))

      // 4. toggleClass()
      $('div').toggleClass('box')

      操作元素样式

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
            1. css()
      1-1. 语法: 元素集合.css('width')
      => 获取元素的某一个样式的值, 不管是行内还是非行内都能获取到
      1-2. 语法: 元素集合.css('样式名', '样式值')
      => 设置元素的行内样式
      => 隐式迭代: 元素集合内有多少元素设置多少元素
      => 设置的时候, 如果你需要设置的单位是 px 可以不写
      1-3. 语法: 元素集合.css({ 样式名1: 样式值1, 样式名2: 样式值2, ... })
      => 批量给元素设置行内样式
      => 隐式迭代: 元素集合内有多少元素设置多少元素
      => 设置的时候, 如果你需要设置的单位是 px 可以不写
      */

      // 1. 获取某一个样式
      // console.log($('div').css('width'))
      // console.log($('div').css('height'))
      // console.log($('div').css('font-size'))

      // 2. 设置某一个样式
      // $('div').css('margin', 50).css('opacity', 0.5)
      $('div').css('width',600).css('font-size',50).css('background-color','skyblue')
      // 3. 批量设置元素样式
      // $('div').css({
      // margin: 50,
      // width: 700
      // })

      jQuery操作属性

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
        jQuery 操作元素属性
      + 几种属性操作
      => 原生属性, id class src ...
      => 自定义属性, getAttribute() ...
      => H5 自定义属性, dataset data-xxx
      + jQuery 有三种操作属性的方法
      => attr() 和 removeAttr()
      => prop() 和 removeProp()
      => data() 和 removeData()

      1. attr() 和 removeAttr()
      1-1. attr()
      => 语法: 元素集合.attr(属性名)
      -> 获取元素的该属性, 主要用来获取标签属性, 包括一些自定义属性
      => 语法: 元素集合.attr(属性名, 属性值)
      -> 设置元素的标签属性, 只是把属性设置在标签上, 当作一个自定义属性使用
      -> 对于原生属性有些有用, 有些没有用
      => 注意:
      -> 设置的时候, 需要两个参数
      -> 设置的不管是什么数据类型, 都会变成字符串类型
      -> 有的原生属性好使, 有的不好使
      1-2. removeAttr()
      => 语法: 元素集合.removeAttr(属性名)
      -> 删除元素身上的自定义属性
      -> id class 等属性也可以删除
      => 注意:
      -> 多用于删除 attr 方法设置的属性

      2. prop() 和 removeProp()
      2-1. prop()
      => 语法: 元素集合.prop(属性名)
      -> 获取元素的原生属性, 也可以获取元素的自定义属性
      -> 但是 attr 方法设置的自定义属性他获取不到
      => 语法: 元素集合.prop(属性名, 属性值)
      -> 主要设置元素的原生属性, 也可以设置自定义属性
      -> 他设置的自定义属性不会显示在标签上, 而是存储在元素身上
      => 注意:
      -> 设置的自定义属性不会显示在标签上
      -> 你设置的时候是什么数据类型, 获取到的时候还是什么数据类型
      -> attr 设置的自定义属性他拿不到
      2-2. removeProp()
      => 语法: 元素集合.removeProp(属性名)
      -> 删除元素的属性, 但是只能删除由 prop 设置的自定义属性
      -> 原生属性 id class ... 不能删除

      3. data() 和 removeData()
      3-1. data()
      => 语法: 元素集合.data(属性名)
      -> 获取使用 data() 方法存储的数据, 获取元素身上 data-xxx 的属性
      => 语法: 元素集合.data(属性名, 属性值)
      -> 设置的时候, 只是把数据存储在元素身上的某一个对象空间内
      -> 但是不会出现在标签上, 不会由 data-xxx 的属性出现
      => 注意:
      -> 可以获取元素标签上 data-xxx 的属性
      -> 但是不能设置标签上 data-xxx 的属性
      3-2. removeData()
      -> 只能删除由 data() 方法设置的属性
      -> 不能删除元素身上 data-xxx 的属性
      */

      // 1. attr() 和 removeAttr()
      // 1-1. attr() 获取
      // console.log($('div').attr('class'))
      // console.log($('div').attr('id'))
      // console.log($('div').attr('hello'))

      // 1-2. attr() 设置
      // $('div').attr('a', '你好 世界')
      // $('div').attr('id', '你好 世界')
      // $('div').attr('a', 100)
      // console.log($('div').attr('a'))

      // 1-3. removeAttr()
      // $('div').removeAttr('class')
      // $('div').removeAttr('id')
      // $('div').removeAttr('hello')


      // 2. prop() 和 removeProp()

      // 2-1. prop()
      // $('div').prop('id', 'abcdefg')
      // // 使用 prop 设置了一个自定义属性
      // $('div').prop('abc', 100)
      // $('div').prop('aa', 200)
      // console.log(typeof $('div').prop('abc'))
      // // attr 设置的他拿不到
      // $('div').attr('bcd', 'hello')
      // console.log($('div').prop('bcd'))

      // 2-2. removeProp()
      // $('div').removeProp('abc')
      // $('div').removeProp('id')
      // console.dir($('div'))


      // 3. data() 和 removeData()
      // 3-1. data() 获取
      console.log($('div').data('index'))

      // 3-2. data() 设置
      $('div').data('abcde', 200)

      // 3-3. removeData()
      $('div').removeData('index')
      $('div').removeData('abcde')
      console.log($('div'))

      获取元素尺寸

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      <script src="./jquery/jquery.min.js"></script>
      <script>
      /*
      jQuery 获取元素尺寸
      + 获取元素尺寸有三套方法四种使用方式
      + 不管在页面是不是占位, 这些方法都是获取元素的尺寸

      1. width() 和 height()
      => 语法: 元素集合.width() 或者 元素集合.height()
      => 获取的是元素内容位置的尺寸
      2. innerWidth() 和 innerHeight()
      => 语法: 元素集合.innerWidth() 或者 元素集合.innerHeight()
      => 获取的是元素 内容 + padding 区域的尺寸
      3. outerWidth() 和 outerHeight()
      => 语法: 元素集合.outerWidth() 或者 元素集合.outerHeight()
      => 获取的是元素 内容 + padding + border 区域的尺寸
      4. outerWidth(true) 和 outerHeight(true)
      => 语法: 元素集合.outerWidth(true) 或者 元素集合.outerHeight(true)
      => 获取的是元素 内容 + padding + border + margin 区域的尺寸
      */

      console.log('width: ', $('div').width())
      console.log('height: ', $('div').height())

      console.log('innerWidth: ', $('div').innerWidth())
      console.log('innerHeight: ', $('div').innerHeight())

      console.log('outerWidth: ', $('div').outerWidth())
      console.log('outerHeight: ', $('div').outerHeight())

      console.log('outerWidth(true): ', $('div').outerWidth(true))
      console.log('outerHeight(true): ', $('div').outerHeight(true))
      </script>

      image-20211125090843479

      获取元素偏移量

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      <script>
      /*
      jQuery 操作元素位置
      + 操作元素相对于某一个点的位置关系

      1. offset()
      + 是一个读写的方法
      + 读取
      => 语法: 元素集合.offset()
      => 返回值: 一个对象, 里面包含一个 x 信息一个 y 信息
      => 相对谁: 相对页面左上角的绝对坐标
      => 注意: 读取出来是一个对象, 你需要值得时候, 要继续 .
      不能继续链式编程
      + 设置
      => 语法: 元素集合.offset({ top: xxx, left: xxx })
      => 设置的: 设置的是相对于页面左上角的绝对位置
      => 例子: $('div').offset({ top: 30, left: 30 })
      -> 一定会把这个 div 放在距离页面左上角 30 30 的位置
      => 注意: 你设置的时候, 如果父子元素都要动
      考虑先后顺序

      2. position()
      + 是一个只读的方法
      + 读取:
      => 语法: 元素集合.position()
      => 返回值: 一个对象, 里面包含一个 x 信息一个 y 信息
      => 就是元素的定位关系
      => 如果你定位的是 right 和 bottom, 那么会自动计算成 left 和 top
      */

      // 1. offset 获取
      // console.log('offset: ', $('div').offset().top)
      // console.log('offset: ', $('div').offset().left)

      // 2. offset 设置
      // $('div').offset({ top: 30, left: 30 })

      // $('p').offset({ top: 120, left: 120 })
      // $('div').offset({ top: 100, left: 100 })

      // 3. position()
      console.log($('div').position())
      console.log($('p').position())

      $('p').position()


      </script>

      绑定/解绑事件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      <script src="./jquery/jquery.min.js"></script>
      <script>
      /*
      jQuery 的事件绑定

      1. on()
      + 事件绑定, 根据传递不同的参数做不同的事情
      1-1. on(事件类型, 事件处理函数)
      => 直接绑定事件, 有隐式迭代
      1-2. 元素结合.on(事件类型, 选择器, 事件处理函数)
      => 事件委托的绑定
      => 把选择器元素委托给元素集合里面的元素
      => 注意: 选择器元素要是 元素集合 内元素的后代元素
      1-3. 元素集合.on(事件类型, 复杂数据类型, 事件处理函数)
      => 给元素集合内的所有元素绑定事件
      => 这个复杂数据类型是事件触发的时候, 传递给事件里面的参数
      => 在事件对象里面有一个叫做 data 的成员, 就是你传递进来的参数
      1-4. 元素集合.on(事件类型, 选择器, 数据, 事件处理函数)
      => 事件委托的形式, 带上传递参数
      => 把选择器所属的事件, 委托给了元素集合内的事件
      => 数据位置, 就是在事件触发的时候传递给事件处理函数的参数
      1-5. 元素集合.on({ 事件类型1: 事件处理函数, 事件类型2: 事件处理函数, ... })
      => 一次性给元素绑定多种事件
      => 没法传递参数和事件委托了

      2. one()
      + 用来绑定事件的方法
      + 和 on() 方法的参数和使用形式一模一样
      + 只不过绑定的事件只能执行一次

      3. off()
      + 用来解除事件绑定的
      + 语法:
      1. 元素集合.off(事件类型)
      => 解除元素身上该事件类型的所有事件处理函数
      2. 元素集合.off(事件类型, 事件处理函数)
      => 解除元素身上该事件类型的某一个事件处理函数

      4. trigger()
      + 用 JS 代码的方式来触发事件
      + 语法: 元素集合.trigger(事件类型)s
      */

      // 1-1. on(事件类型, 处理函数)
      // $('ul > li').on('click', function () {
      // console.log(this)
      // })

      // 1-2. on(事件类型, 选择器, 处理函数)
      // 给 li 做了一个事件委托, 委托给 ul 来做
      // $('ul').on('click', 'li', function () {
      // console.log('我执行了')
      // // this 就是你点击的那一个元素
      // console.log(this)
      // })

      // document.querySelector('ul').onclick = function (e) {
      // if (e.target.nodeName === 'LI') {
      // console.log('我执行了')
      // // 原生 JS 里面, this 指向事件源
      // // 这个事件的事件源是谁 ? ul
      // console.log(this)
      // }
      // }

      // 1-3. on(事件类型, 复杂数据类型, 事件处理函数)
      // $('li').on('click', { name: 'Jack' }, function (e) {
      // console.log('我执行了')
      // console.log(e)
      // })


      // 1-4. on(事件类型, 选择器, 数据, 事件处理函数)
      // $('ul').on('click', 'li', 'hello world', function (e) {
      // console.log('我执行了')
      // console.log(e)
      // })


      // 1-5. on({ 多个事件 })
      // $('li').on({
      // click: function () { console.log('点击事件') },
      // mouseover: function () { console.log('移入事件') }
      // })


      // 2. one()
      // $('li').one('click', function () { console.log('我被点击了') })

      // $('ul').one('click', 'li', function () {
      // console.log('我被点击了')
      // })

      // $('li').one('click', { name: 'Jack' }, function (e) {
      // console.log(e)
      // })

      // $('ul').one('click', 'li', 'hello world', function (e) {
      // console.log(e.data)
      // })

      // $('li').one({
      // click: function () { console.log('点击事件') },
      // mouseover: function () { console.log('移入事件') }
      // })

      function handlerA() { console.log('handlerA') }
      function handlerB() { console.log('handlerB') }
      $('li').on('click', handlerA)
      $('li').on('click', handlerB)

      // 3. off()
      // 3-1. off(事件类型)
      // 把 click 事件的所有事件处理函数全部解除
      // $('li').off('click')

      // 3-2. off(事件类型, 事件处理函数)
      // 把 click 事件的 handlerA 事件处理函数解除
      // $('li').off('click', handlerA)

      // 4. trigger()
      // $('li:first').trigger('click')
      </script>

      jQuery基本动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
       <style>
      * {
      margin: 0;
      padding: 0;
      }

      div {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      }
      </style>
      </head>
      <body>

      <button class="show">显示</button>
      <button class="hide">隐藏</button>
      <button class="toggle">切换</button>

      <div></div>

      <script src="./jquery/jquery.min.js"></script>
      <script>
      /*
      jQuery 里面有三个基础动画

      1. show()
      + 显示
      2. hide()
      + 隐藏
      3. toggle()
      + 切换, 本身显示就隐藏, 本身隐藏就显示

      + 上面三个方法操作的 display: none 和 block
      + 三个的语法是一样的
      => 方法名(运动时间, 运动曲线, 回调函数)
      => 运动时间: 多长时间运动结束
      => 运动曲线: 什么方式运动
      => 回调函数: 运动结束后触发
      */

      $('.show').click(() => {
      $('div').show(1000, 'linear', () => console.log('显示结束'))
      })

      $('.hide').click(() => {
      $('div').hide(1000, 'linear', () => console.log('隐藏结束'))
      })

      $('.toggle').click(() => {
      $('div').toggle(1000, 'linear', () => console.log('切换结束'))
      })
      </script>
      </body>

      GIF 2021-11-26 12-12-26

      折叠动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      <button class="show">显示</button>
      <button class="hide">隐藏</button>
      <button class="toggle">切换</button>


      <div class="outer">
      <div class="inner"></div>
      </div>

      <script src="./jquery/jquery.min.js"></script>
      <script>
      /*
      jQuery 的折叠动画
      + jQuery 提供了三种折叠动画

      1. slideDown()
      + 下拉显示

      2. slideUp()
      + 上拉隐藏

      3. slideToggle()
      + 切换显示和隐藏

      三个方法都是一样的参数
      => 方法名(时间, 运动曲线, 回调函数)
      */

      $('.show').click(() => {
      $('.inner').slideDown(1000, 'linear', () => console.log('显示结束'))
      })

      $('.hide').click(() => {
      $('.inner').slideUp(1000, 'linear', () => console.log('隐藏结束'))
      })

      $('.toggle').click(() => {
      $('.inner').slideToggle(1000, 'linear', () => console.log('切换结束'))
      })
      </script>

      GIF 2021-11-26 12-14-12

      渐隐渐显动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      <button class="show">显示</button>
      <button class="hide">隐藏</button>
      <button class="toggle">切换</button>
      <button class="to">指定透明度</button>

      <div></div>


      <script src="./jquery/jquery.min.js"></script>
      <script>
      /*
      jQuery 的渐隐渐显动画
      + 通过操作 元素的 opacity 达到效果

      1. faseIn()
      + opacity 0 ~ 1
      2. fadeOut()
      + opacity 1 ~ 0
      3. fadeToggle()
      + 切换

      以上三个方法的语法是一样的
      + 方法名(时间, 运动曲线, 回调函数)

      4. fadeTo()
      + 运动到指定透明度
      + 语法: fadeTo(时间, 指定透明度, 运动曲线, 回调函数)
      */

      $('.show').click(() => {
      $('div').fadeIn(2000, 'linear', () => console.log('显示结束'))
      })

      $('.hide').click(() => {
      $('div').fadeOut(2000, 'linear', () => console.log('隐藏结束'))
      })

      $('.toggle').click(() => {
      $('div').fadeToggle(2000, 'linear', () => console.log('切换结束'))
      })

      $('.to').click(() => {
      $('div').fadeTo(1000, 0.5, 'linear', () => console.log('运动结束'))
      })
      </script>

      GIF 2021-11-26 12-21-57

      综合动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      <button>开始</button>

      <div></div>

      <script src="./jquery/jquery.min.js"></script>
      <script>
      /*
      jQuery 的综合动画
      + 可以按照你的设定去进行运动

      1. animate()
      => 语法: animate({}, 时间, 运动曲线, 回调函数)
      => {}: 书写你要运动的属性
      => 注意:
      -> 颜色相关的属性, 运动不了
      -> CSS3 的 2d 和 3d 动画效果运动不了
      */

      $('button').click(() => {
      $('div').animate({
      width: 300,
      height: '400px',
      borderRadius: '50%',
      left: 150,
      top: 200,
      backgroundColor: 'red'
      }, 1000, 'linear', () => console.log('运动结束'))
      })
      </script>

GIF 2021-11-26 12-30-21

运动结束函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<button class="start">开始</button>
<button class="stop">停止</button>
<button class="finish">完成</button>

<div></div>

<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的停止动画
+ 因为当你给一个元素设置动画以后
+ 如果快速触发, 会停不下来, 直到你所有的触发都执行完毕为止
+ jquery 给我们提供两个临时停下动画的方法

1. stop()
+ 语法: 元素集合.stop()
+ 当代码执行到这句的时候, 不管运动到什么程度, 立刻停下来
+ 运动到什么位置就停止在什么位置,再次点击,返回到运动最初始的位置


2. finish()
+ 语法: 元素集合.finish()
+ 当代码执行到这句的时候, 不管运动到什么程度, 直接去到运动结束位置
+ 直接完成本次动画
*/


$('button.start').click(() => {
// 让 div 之前的动画停止在原地, 按照最新的动画进行执行
$('div').stop().slideToggle(1000, 'linear')
})

$('.stop').click(() => {
$('div').stop()
})

$('.finish').click(() => {
$('div').finish()
})
</script>

stop()

GIF 2021-11-26 12-49-28

finish()

GIF 2021-11-26 12-50-44

jQuery.ajax()