jQuery 学习

0.补充

0.1 axios、ajax 与 fetch

axios：这是一个插件，需要引入
ajax：使用 jQuery 能大大简化操作：

$.ajax({
    type: xxx,
    url: xxx,
    datatype: xxx,
    data: xxx,
    success: () => {
        ...
    }
})

1
2
3
4
5
6
7
8
9

fetch：es6 产生的新 api，模仿 jQuery 的 ajax 操作：

1. jQuery 基础

1.1 入口函数

第一种：（推荐）

$(function () {
    ... // 这里是页面 DOM 加载完成的入口
})

1
2
3

第二种：（不推荐）

$(document).ready(function () {
    ... // 这里是页面 DOM 加载完成的入口
})

1
2
3

1.2顶级对象 $

$ 是 jQuery 的别称，可以使用 jQuery 替代 $，但一般直接用 $
$ 是 jQuery 的顶级对象，相当于原生 JavaScript 的 window，把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法

1.3 jQuery 对象和 DOM 对象

原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素是 jQuery 对象，不能使用 DOM 的方法
jQuery 对象本质：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）

<body>
  <div></div>
  <span></span>
  <script>
    // 1.原生 JS 获取的 DOM 对象
    var myDiv = document.querySelector('div') // myDiv 是 DOM 对象
    var mySpan = document.querySelector('span')
    console.dir(myDiv)
    // 2.jQuery 方式获取的 jQuery 对象
    $('div')
    $('span')
    console.dir($('div')) // $('div') 是一个 jQuery 对象
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.4 jQuery 对象和 DOM 对象相互转化

DOM 对象转为 jQuery 对象：$('div')
jQuery 对象转为 DOM 对象：

$('div')[index] // index 是索引号
$('div').get(index) // index 是索引号

1
2

实例代码：

// DOM => jQuery
var myvideo = document.querySelector('video')
// $(myvideo).play() // jQuery 对象没有 play 方法

// jQuery => DOM
$('video')[0].play()
$('video').get(0).play()

1
2
3
4
5
6
7

1.5 基础选择器

$('选择器') // 里面选择器直接写 CSS 选择器，但是要加引号

名称	用法	描述
ID 选择器	$('#id')	获取指定 ID 的元素
全选选择器	$('*')	匹配所有元素
类选择器	$('.class')	获取同一类 class 的元素
标签选择器	$('div')	获取同一类标签的所有元素
并集选择器	$('div, p, li')	获取多个元素
交集选择器	$('li.current')	交集元素

名称	用法	描述
子代选择器	$('ul>li')	使用 > 号，获得亲儿子元素
后代选择器	$('ul li')	使用空格，获得后代的元素，包括孙子

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
</head>

<body>
  <div>我是div</div>
  <div class="nav">我是 nav div</div>
  <p>我是p</p>
  <ol>
    <li>我是 ol 的</li>
    <li>我是 ol 的</li>
    <li>我是 ol 的</li>
    <li>我是 ol 的</li>
  </ol>
  <ul>
    <li>我是 ul 的</li>
    <li>我是 ul 的</li>
    <li>我是 ul 的</li>
    <li>我是 ul 的</li>
  </ul>

  <script>
    $(function () {
      console.log($('.nav'))
      console.log($('ul li'))
    })
  </script>
</body>

</html>

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

1.6 隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做 隐式迭代

jQuery 设置样式：

$('div').css('属性', '值')

示例代码：

<body>
  <div>1111</div>
  <div>2222</div>
  <div>3333</div>
  <div>4444</div>

  <ul>
    <li>相同的操作</li>
    <li>相同的操作</li>
    <li>相同的操作</li>
  </ul>
  <script>
    // 1.获取四个 div 元素
    console.log($('div'))
    // 2.给四个 div 设置背景颜色为 pink
    $('div').css('background', 'pink')
    // 3.隐式迭代就是把所有匹配的所有元素内部进行遍历循环，给每一个元素添加 css 这个方法
    $('ul li').css('color', 'red')
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1.7 筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个 li 元素
:last	$('li:last')	获取最后一个 li 元素
:eq(index)	$('li:eq(2)')	获取的 li 元素中，索引为 2 的元素，索引从 0 开始
:odd	$('li:odd')	获取索引号为奇数的元素
:even	$(li:even)	获取索引号为偶数的元素

<body>
  <ul>
    <li>啦啦啦啦啦啦啦</li>
    <li>啦啦啦啦啦啦啦</li>
    <li>啦啦啦啦啦啦啦</li>
  </ul>
  <ol>
    <li>呵呵哈哈哈或</li>
    <li>呵呵哈哈哈或</li>
    <li>呵呵哈哈哈或</li>
    <li>呵呵哈哈哈或</li>
    <li>呵呵哈哈哈或</li>
    <li>呵呵哈哈哈或</li>
  </ol>
  <script>
    $('ul li:first').css('color', 'red')
    $('ul li:eq(2)').css('color', 'blue')
    $('ol li:odd').css('color', 'skyblue')
    $('ol li:even').css('color', 'pink')
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.8 筛选方法

语法	用法	说明
parent	$('li').parent()	查找父级
children(selector)	$('ul').children('li')	相当于 $('ul>li')，最近一级（亲儿子）
find(selector)	$('ul').find('li')	相当于 $('ul li')，后代选择器
siblings(selector)	$('.first').siblings('li')	查找兄弟节点，不包括自己本身
nextAll([expr])	$('.first').nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$('.first').prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$('div').hasClass('protected')	检查当前元素是否含有某个特定的类，如果有返回 true
eq(index)	$('li').eq(2)	相当于 $('li:eq(2)')，index 从 0 开始

示例代码：

<body>
  <div class="grandfather">
    <div class="father">
      <div class="son"></div>
    </div>

    <div class="nav">
      <p>我是 pi</p>
      <div>
        <p>我是 p</p>
      </div>
    </div>
  </div>

  <script>
    $(function () {
      // 1.亲父
      console.log($('.son').parent())
      // 2.亲儿
      $('.nav').children('p').css('color', 'pink')
      // 3.后代
      $('.nav').find('p').css('color', 'red')
    })
  </script>
</body>

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

<body>
  <ol>
    <li>我是 ol 的 li</li>
    <li>我是 ol 的 li</li>
    <li class="item">我是 ol 的 li</li>
    <li>我是 ol 的 li</li>
    <li>我是 ol 的 li</li>
    <li>我是 ol 的 li</li>
  </ol>
  <ul>
    <li>我是 ul 的 li</li>
    <li>我是 ul 的 li</li>
    <li>我是 ul 的 li</li>
    <li>我是 ul 的 li</li>
    <li>我是 ul 的 li</li>
    <li>我是 ul 的 li</li>
  </ul>
  <div class="current"></div>
  <div></div>

  <script>
    $(function () {
      // 1.兄弟元素，除了自身元素之外的所有亲兄弟
      $('ol .item').siblings('li').css('color', 'red')

      // 2.第 n 个元素，两种方法：选择器方式、方法（推荐）的方式
      $('ul li:eq(2)').css('color', 'blue')
      $('ul li').eq(4).css('color', '#bfa')

      // 3.判断是否有某类名
      console.log($('div:first').hasClass('current')) // true
      console.log($('div:last').hasClass('current')) // false
    })
  </script>
</body>

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

1.9 新浪下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    a {
      text-decoration: none;
      font-size: 14px;
    }

    .nav {
      margin: 100px;
    }

    .nav>li {
      position: relative;
      float: left;
      width: 80px;
      height: 41px;
      text-align: center;
    }

    .nav li a {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 41px;
      color: #333;
    }

    .nav>li>a:hover {
      background-color: #eee;
    }

    .nav ul {
      display: none;
      position: absolute;
      top: 41px;
      left: 0;
      width: 100%;
      border-left: 1px solid #FECC5B;
      border-right: 1px solid #FECC5B;
    }

    .nav ul li {
      border-bottom: 1px solid #FECC5B;
    }

    .nav ul li a:hover {
      background-color: #FFF5DA;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
  </ul>
  <script>
    $(function () {
      // 鼠标经过
      $('.nav>li').mouseover(function () {
        // $(this) 当前元素，this 不加引号
        // show() 显示元素
        $(this).children('ul').show()
      })
      // 鼠标离开
      $('.nav>li').mouseout(function () {
        $(this).children('ul').hide()
      })
    })
  </script>
</body>

</html>

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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

1.10 排他思想

给所有按钮都绑定了点击事件
当前元素变化背景颜色
其余的兄弟去掉背景颜色

<body>
  <button>快速</button>
  <button>快速</button>
  <button>快速</button>
  <button>快速</button>
  <button>快速</button>
  <button>快速</button>
  <button>快速</button>

  <script>
    $(function () {
      // 1.给所有按钮都绑定了点击事件
      $('button').click(function () {
        // 2.当前元素变化背景颜色
        $(this).css('background', 'pink')
        // 3.其余的兄弟去掉背景颜色
        $(this).siblings('button').css('background', '')
      })
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.11 淘宝服饰精品

核心原理：鼠标经过左侧盒子某个 li，就让内容区盒子相对应图片显示，其余图片隐藏
需要得到当前 li 的索引号，就可以显示对应索引号的图片
jQuery 得到当前元素索引号 $(this).index()
对应的图片通过 eq(index) 的方法去选择
显示元素 show()，隐藏元素 hide()

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .wrapper {
      width: 250px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      border-right: 0;
      overflow: hidden;
    }

    #left,
    #content {
      float: left;
    }

    #left li {
      background: url(images/lili.jpg) repeat-x;
    }

    #left li a {
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }

    #left li a:hover {
      background-image: url(images/abg.gif);
    }

    #content {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }
  </style>
  <script src="jquery.min.js"></script>
  <script>
    $(function () {
      // 1.鼠标经过左侧 li
      $('#left li').mouseover(function () {
        // 2.得到当前 li 的索引号
        var index = $(this).index()
        // console.log(index)
        // 3.让右侧盒子相应索引号图片显示
        $('#content div').eq(index).show()
        // 4.让其余兄弟图片隐藏
        $('#content div').eq(index).siblings().hide()
      })
    })
  </script>
</head>

<body>
  <div class="wrapper">
    <ul id="left">
      <li><a href="#">女靴</a></li>
      <li><a href="#">雪地靴</a></li>
      <li><a href="#">冬裙</a></li>
      <li><a href="#">呢大衣</a></li>
      <li><a href="#">毛衣</a></li>
      <li><a href="#">棉服</a></li>
      <li><a href="#">女裤</a></li>
      <li><a href="#">羽绒服</a></li>
      <li><a href="#">牛仔裤</a></li>
    </ul>
    <div id="content">
      <div>
        <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
      </div>
      <div>
        <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
      </div>
      <div>
        <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
      </div>
      <div>
        <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
      </div>
      <div>
        <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
      </div>
      <div>
        <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
      </div>
      <div>
        <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
      </div>
      <div>
        <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
      </div>
      <div>
        <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
      </div>

    </div>


  </div>
</body>

</html>

1.12 样式操作

参数只写属性名，则是返回属性值（字符串）

$(this).css('color')

参数是 [属性名, 属性值]，逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css('color', 'red')
$('div').css('width', 300) // 不用加引号或单位

1
2

参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>

  <script>
    $(function () {
      console.log($('div').css('width'))
      // $('div').css('width', '300px')
      $('div').css({
        width: 400,
        height: 400,
        // 如果是复合属性则必须要用驼峰命名法
        backgroundColor: 'red'
      })
    })
  </script>
</body>

</html>

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

1.13 样式操作 - 类样式方法

作用相同于之前的 classList，可以操作类样式

添加类：

$('div').addClass('current')

删除类:

$('div').removeClass('current')

切换类：

$('div').toggleClass('current')

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 0 auto;
    }

    .current {
      background-color: red;
      transform: rotate(360deg);
      transition: all 0.5s;
    }
  </style>
</head>

<body>
  <div class="current"></div>

  <script>
    $(function () {
      // 1.添加类 addClass()
      // $('div').click(function () {
      //   $(this).addClass('current')
      // })
      // 2.删除类 removeClass()
      // $('div').click(function () {
      //   $(this).removeClass('current')
      // })
      // 3.切换类 toggleClass()
      $('div').click(function () {
        $(this).toggleClass('current')
      })
    })
  </script>
</body>

</html>

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

1.14 tab 栏切换

点击上部的 li，当前 li 添加 current 类，其余兄弟移除类
点击的同时，得到 li 的索引号
让下部相应索引号的 item 显示，其余的 item 隐藏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    .tab {
      width: 978px;
      margin: 100px auto;
    }

    .tab_list {
      height: 39px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab_list li {
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }

    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }

    .item_info {
      padding: 20px 0 0 20px;
    }

    .item {
      display: none;
    }
  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价（50000）</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block;">
        商品介绍模块内容
      </div>
      <div class="item">
        规格与包装模块内容
      </div>
      <div class="item">
        售后保障模块内容
      </div>
      <div class="item">
        商品评价（50000）模块内容
      </div>
      <div class="item">
        手机社区模块内容
      </div>

    </div>
  </div>

  <script>
    $(function () {
      // 1. 点击上部的 li，当前 li 添加 current 类，其余兄弟移除类
      $('.tab_list li').click(function () {
        // 链式编程操作
        $(this).addClass('current').siblings().removeClass('current')
        // 2. 点击的同时，得到 li 的索引号
        var index = $(this).index()
        // console.log(index)
        // 3. 让下部相应索引号的 item 显示，其余的 item 隐藏
        $('.tab_con .item').eq(index).show().siblings().hide()
      })
    })
  </script>
</body>

</html>

2. jQuery 动画

2.1 jQuery 效果

1. 效果列表：

显示隐藏：
- show()
- hide()
- toggle()
滑动：
- slideDown()
- slideUp()
- slideToggle()
淡入淡出：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
自定义动画
- animate()

2. 显示隐藏效果：

显示语法规范：

show([speed, [easing], [fn]])

参数：
- speed：三种预定速度之一的字符串（“show”、“normal” 或 “fast”）或表示动画时长的毫秒数值（如：1000）
- easing：（Optional）用来指定切换效果，默认是 “swing”，可用参数 “linear”
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次

<body>
  <button>显示</button>
  <button>隐藏</button>
  <button>切换</button>
  <div></div>
  <script>
    $(function () {
      $('button').eq(0).click(function () {
        $('div').show(1000, function () {
          alert(1)
        })
      })
      $('button').eq(1).click(function () {
        $('div').hide(1000, function () {
          alert(1)
        })
      })
      $('button').eq(2).click(function () {
        $('div').toggle()
      })
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.2 简洁版滑动下拉菜单

slidedown、slideup、slidetoggle 参数与上面同

示例代码：

<body>
  <button>下拉滑动</button>
  <button>上拉滑动</button>
  <button>切换滑动</button>
  <div></div>
  <script>
    $(function () {
      $('button').eq(0).click(function () {
        // 下滑动 slideDown()
        $('div').slideDown()
      })
      $('button').eq(1).click(function () {
        $('div').slideUp()
      })
      $('button').eq(2).click(function () {
        $('div').slideToggle()
      })
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.3 事件切换（继承上面的简洁版）

hover([over,]out)

(1) hover：鼠标移到元素上要触发的函数（相当于 mouseenter）

(2) out：鼠标移出元素要出发的函数（相当于 mouseleave）

<body>
  <button>经过滑动</button>
  <button>上拉滑动</button>
  <div></div>
  <script>
    $(function () {
      // 1.事件切换 hover 就是鼠标经过和离开的符合写法
      $('button').eq(0).hover(function () {
        $('div').slideDown()
      }, function () {
        $('div').slideUp()
      })
      // 2.事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
      $('button').eq(1).hover(function () {
        $('div').slideToggle()
      })
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.4 简洁版滑动下拉菜单问题解决

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

解决办法：停止排队

stop：stop() 方法用于停止动画或效果
注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画

代码：

<body>
  <button>经过滑动</button>
  <button>上拉滑动</button>
  <div></div>
  <script>
    $(function () {
      // 1.事件切换 hover 就是鼠标经过和离开的符合写法
      $('button').eq(0).hover(function () {
        $('div').stop().slideDown()
      }, function () {
        $('div').stop().slideUp()
      })
      // 2.事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
      $('button').eq(1).hover(function () {
        $('div').stop().slideToggle()
      })
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.5 淡入淡出效果

fadeIn：参数与上同
fadeOut：参数与上同
fadeToggle：参数与上同
fadeTo：
- opacity：透明度必须写，取值 0~1 之间
- speed：三种预定速度之一的字符串（“slow”，”normal“，”fast“）或表示动画时长的毫秒数值，必须写
- easing：可选，用来指定切换效果，默认是“swing”，可用参数“linear”
- fn：可选，回调函数

fadeTo([[speed], opacity, [easing], [fn]])

示例代码：

<body>
  <button>淡入效果</button>
  <button>淡出效果</button>
  <button>淡入淡出切换</button>
  <button>修改透明度</button>
  <div></div>
  <script>
    $(function () {
      $('button').eq(0).click(function () {
        // 淡入 fadeIn()
        $('div').stop().fadeIn(1000)
      })
      $('button').eq(1).click(function () {
        // 淡出 fadeOut()
        $('div').stop().fadeOut(1000)

      })
      $('button').eq(2).click(function () {
        // 淡入淡出切换 fadeToggle()
        $('div').fadeToggle(1000)
      })
      $('button').eq(3).click(function () {
        // 修改透明度 fadeTo()，速度和透明度必须写
        $('div').fadeTo(1000, 0.5)
      })
    })
  </script>
</body>

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

2.6 高亮案例

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="./jquery.min.js"></script>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    body {
      background: #000;
    }

    .wrap {
      margin: 100px auto 0;
      width: 630px;
      height: 394px;
      padding: 10px 0 0 10px;
      background: #000;
      overflow: hidden;
      border: 1px solid #fff;
    }

    .wrap li {
      float: left;
      margin: 0 10px 10px 0;
    }

    .wrap img {
      display: block;
      border: 0;
    }
  </style>
  <script src="jquery.min.js"></script>
  <script>
    $(function () {
      $('ul>li').hover(function () {
        $(this).siblings().stop().fadeTo(200, 0.5)
      }, function () {
        $(this).siblings().stop().fadeTo(200, 1)
      })
    })
  </script>
</head>

<body>
  <div class="wrap">
    <ul>
      <li>
        <a href="#"><img src="images/01.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/02.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/03.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/04.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/05.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/06.jpg" alt="" /></a>
      </li>
    </ul>
  </div>
</body>

</html>

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

2.7（重要）自定义动画 animate

1. 语法

animate(params, [speed], [easing], [fn])

2. 参数

params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其他参数都可以省略
speed：（slow、normal、fast）或数字字符串
easing：指定切换效果，默认 swing，可用参数 linear
fn：回调函数

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
  <style>
    div {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <button>动起来</button>
  <div></div>

  <script>
    $(function () {
      $('button').click(function () {
        $('div').animate({
          left: 500,
          top: 300,
          opacity: .4,
          width: 500
        }, 500)
      })
    })
  </script>
</body>

</html>

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

2.8 手风琴效果

效果网址：王者荣耀英雄攻略-王者荣耀官网网站-腾讯游戏 (qq.com)open in new window

鼠标经过 li，当前 li 宽度变成 224px，同时里面的小图片淡出，大图片淡入
其余兄弟 li 宽度变成 69px，小图片淡入，大图片淡出

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>手风琴案例</title>

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
    }

    ul {
      list-style: none;
    }

    .king {
      width: 852px;
      margin: 100px auto;
      background: url(images/bg.png) no-repeat;
      overflow: hidden;
      padding: 10px;
    }

    .king ul {
      overflow: hidden;
    }

    .king li {
      position: relative;
      float: left;
      width: 69px;
      height: 69px;
      margin-right: 10px;
    }

    .king li.current {
      width: 224px;
    }

    .king li.current .big {
      display: block;
    }

    .king li.current .small {
      display: none;
    }

    .big {
      width: 224px;
      display: none;
    }

    .small {
      position: absolute;
      top: 0;
      left: 0;
      width: 69px;
      height: 69px;
      border-radius: 5px;
    }
  </style>

</head>

<body>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('.king li').mouseenter(function () {
        $(this).stop().animate({
          width: 224
        }, 200).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()
        $(this).siblings('li').stop().animate({
          width: 69
        }, 200).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut()
      })
    })
  </script>
  <div class="king">
    <ul>
      <li class="current">
        <a href="#">
          <img src="images/m1.jpg" alt="" class="small">
          <img src="images/m.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/l1.jpg" alt="" class="small">
          <img src="images/l.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/c1.jpg" alt="" class="small">
          <img src="images/c.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/w1.jpg" alt="" class="small">
          <img src="images/w.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/z1.jpg" alt="" class="small">
          <img src="images/z.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/h1.jpg" alt="" class="small">
          <img src="images/h.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/t1.jpg" alt="" class="small">
          <img src="images/t.png" alt="" class="big">
        </a>
      </li>
    </ul>

  </div>
</body>

</html>

3. jQuery 属性操作

3.1 设置获取元素固有属性值 prop() / attr 自定义属性

元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href，比如 <input> 元素里面的 type

1. 获取属性语法：

prop('属性')
// console.log($('a').prop('href')

1
2

2. 设置属性语法：

prop('属性', '属性值')
// $('a').prop('title', '我们都挺好')

1
2

3. 设置或获取元素自定义属性值 attr()：

获取属性语法：

attr('属性') // 类似原生 getAttribute()
// console.log($('div').attr('index'))

1
2

设置属性语法：

attr('属性', '属性值') // 类似原生 setAttribute()
// $('div').attr('index', 4)

1
2

4. 数据缓存 data()：

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将会被移除
附加数据语法：

data('name', 'value') // 向被选元素附加数据

获取数据语法：

data('name') // 向被选元素获取数据

示例代码：

$(function () {
    // 1.element.prop('属性名')：获取元素固有的属性值
    // element.prop('属性名') 获取属性值
    console.log($('a').prop('href'))
    $('a').prop('title', '我们都挺好')
    $('input').change(function () {
        console.log($(this).prop('checked'))
    })
    // 2.元素的自定义属性
    console.log($('div').attr('index'))
    $('div').attr('index', 4)
    console.log($('div').attr('data-index'))
    // 3.数据缓存 data()
    $('span').data('uname', 'andy')
    console.log($('span').data('uname'))
    // 此方法获取 data-index h5 自定义属性，不用谢 data-，而且返回的是数字型
    console.log($('div').data('index')) // data-index 的值
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.2 购物车全选

全选思路：

三个小复选框（j-checkbox）选中状态跟着全选按钮（checkall）走
使用 prop 方法获取固有属性并设置固有属性
把全选按钮状态赋值给 3 小复选框
当每次点击小复选框按钮，进行判断：如果小复选框被选中的个数等于 3，就把全选按钮选上，否则全选按钮不选
jQuery 提供了 :checked 选择器，能查找被选中的表单元素

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery.min.js"></script>
</head>

<body>
  <input type="checkbox" name="" id="" class="checkall">全选
  <input type="checkbox" name="" id="" class="j-checkbox">
  <input type="checkbox" name="" id="" class="j-checkbox">
  <input type="checkbox" name="" id="" class="checkall">全选

  <script>
    $(function () {
      $('.checkall').change(function () {
        $('.j-checkbox, .checkall').prop('checked', $(this).prop('checked'))
      })
      $('.j-checkbox').change(function () {
        // $('.j-checkbox').length 是所有的小复选框的个数
        if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
          $('.checkall').prop('checked', true)
        } else {
          $('.checkall').prop('checked', false)
        }
      })
    })
  </script>
</body>

</html>

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

3.3 jQuery 内容文本值

1. 普通元素内容：html()：相当于原生 innerHTML

html() // 获取元素的内容
html('内容') // 设置元素

1
2

2.元素文本内容：text()：相当于原生 innerText

同上。

2.表单值：val()：相当于原生 value

console.log($('input').val())

3.4 增删商品数量

思路：

声明一个变量，点击 + 号，就加一，然后赋值给文本框
只能商品本商品的数量，就是让 + 号的兄弟文本框的值
使用 val() 方法
这个变量初始值应该是这个文本框的值，在此值基础加一，要获取表单的值

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      width: 15px;
      height: 50%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid blueviolet;
      border-radius: 50%;
    }

    .quantity-form {
      width: 120px;
      height: 30px;
      /* background-color: #bfa; */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    input {
      width: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="quantity-form">
    <a href="javascript:;" class="decrement">-</a>
    <input type="text" class="itxt" value="1">
    <a href="javascript:;" class="increment">+</a>
  </div>

  <div class="quantity-form">
    <a href="javascript:;" class="decrement">-</a>
    <input type="text" class="itxt" value="1">
    <a href="javascript:;" class="increment">+</a>
  </div>

  <div class="quantity-form">
    <a href="javascript:;" class="decrement">-</a>
    <input type="text" class="itxt" value="1">
    <a href="javascript:;" class="increment">+</a>
  </div>

  <script>
    $('.increment').click(function () {
      // 得到当前兄弟文本框的值
      let n = $(this).siblings('.itxt').val()
      n++
      $(this).siblings('.itxt').val(n)
    })

    $('.decrement').click(function () {
      // 得到当前兄弟文本框的值
      let n = $(this).siblings('.itxt').val()
      if (n == 1) return
      n--
      $(this).siblings('.itxt').val(n)
    })
  </script>
</body>

</html>

3.5 parents 选择器

parents('选择器') 可以返回指定祖先元素

<body>
  <div class="one">
    <div class="two">
      <div class="three">
        <div class="four">我不容易</div>
      </div>
    </div>
  </div>

  <script>
    // 原先找到 one
    console.log($('.four').parent().parent().parent())
    // 改进
    console.log($('.four').parents('.one'))
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 元素操作

主要是遍历、创建、添加、删除元素操作

4.1 遍历 each（主用于遍历 DOM）

jQuery 隐式迭代是对同一类元素做了同样的操作，若想给同一类元素做不同操作，需要用到遍历

语法1：

$('div').each(function (index, domEle) {xxx})

each() 方法遍历匹配的每一个元素。主要用 DOM 处理，each 每一个
回调函数有 2 个参数：index 是每个参数的索引号，demEle 是每个 DOM 元素对象，不是 jQuery 对象
想使用 jQuery 方法，需要给这个 dom 元素转换为 jQuery 对象 $(domEle)

举例：

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>

  <script>
    $(function () {
      let arr = ['red', 'green', 'blue']
      let sum = 0
      $('div').each(function (i, domEle) {
        $(domEle).css('color', arr[i])
        if (i == 2) {
          $(domEle).text('我超')
        }
        sum += $(domEle).text() - 0
      })
      console.log(sum) // 6
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.2 遍历 $.each（主用于遍历数据）

**语法2：**主要用于遍历数据，处理数据

$.each(object, function (index, element) {xxx})

示例代码：

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>

  <script>
    $(function () {
      let arr = ['red', 'green', 'blue']
      $.each(arr, function (i, ele) {
        console.log(i) // 下标
        console.log(ele) // 数据
      })

      $.each({name: 'andy', age: 18}, function (i, ele) {
        console.log(i) // 属性名
        console.log(ele) // 属性值
      })
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.3 创建、添加、删除元素

创建元素

$('<li></li>') // 动态创建一个 li 标签

添加元素（内部添加）：放在匹配元素内部最后面，类似原生 appendChild，element 与被添加节点是父子关系

element.append('内容')
element.prepend('内容')

1
2

添加元素（外部添加）：element 与被添加元素是兄弟关系

element.after('内容') // 把内容放入目标元素后面
element.before('内容') // 把内容放入目标元素前面

1
2

删除元素

element.remove() // 删除匹配的元素（本身）

element.empty() // 删除匹配的元素集合中的所有的子节点

element.html('') // 清空匹配的元素内容

示例代码：

<body>
  <ul>
    <li>原先的 li</li>
  </ul>
  <div class="test">我是原来的 div</div>

  <script>
    $(function () {
      // 1.创建元素
      let li = $('<li>我是后来创建的 li</li>')
      // 2.添加元素
      // (1) 内部添加
      $('ul').append(li)
      $('ul').prepend(li)
      // (2) 外部添加
      let div = $('<div>我是后来的 div</div>')
      $('.test').after(div)
      $('.test').before(div)
      // 3.删除元素
      // $('ul').remove() // 自杀
      // $('ul').empty() // 删除 ul 里面的子节点，ul 仍保留
      // $('ul').html('') // 作用如 empty()
    })
  </script>
</body>

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

5. jQuery事件

5.2 jQuery 事件注册

**以前的事件写法：**mouseover、mouseout、blur、change、keydown、keyup、resize、scroll等

$('div').click(function () {})

**on() 绑定事件：**匹配元素上绑定一个或多个事件的事件处理函数

语法：

element.on(events, [selector], fn)

events：一个或多个用空格分隔的事件类型，如 'click' 或 'keydown'
selector：元素的子元素选择器
fn：回调函数

5.3 on() 的优势

on 可以绑定 1 个或多个事件：

<body>
  <div></div>

  <script>
    $(function () {
      $('div').on({
        mouseenter() {
          console.log(this)
          $(this).css('background', 'skyblue')
        },
        click() {
          $(this).css('background', 'purple')
        },
        mouseleave() {
          $(this).css('background', 'black')
        }
      })
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<body>
  <div></div>

  <script>
    $('div').on('mouseenter mouseleave', function () {
      $(this).toggleClass('current')
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9

事件委派操作：将原来加到子元素上的事件绑定到父元素身上

<body>
  <ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>3</li>
  </ul>
  <div></div>

  <script>
    $(function () {
      $('ul').on('click', 'li', function () {
        alert(11)
      })
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

可以为动态生成的元素绑定事件

<body>
  <ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>3</li>
  </ul>

  <script>
    $(function () {
      // click 不能为动态元素添加事件
      // $('ul li').click(function () {
      //   alert(11)
      // })
      $('ul').on('click', 'li', function () {
        alert(11)
      })
      let li = $('<li>i am new</li>')
      $('ul').append(li)
    })
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5.4 发布微博

思路：

点击发布按钮，动态创建一个 li，放入文本框的内容和删除按钮，并且添加到 ul 中
点击删除按钮，可以删除当前的微博留言

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      display: none;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      $('.btn').on('click', function () {
        let li = $('<li></li>')
        li.html($('.txt').val() + '<a href="javascript:;">删除</a>')
        $('ul').prepend(li)
        li.slideDown()
        $('.txt').val('')
      })

      // on 可以为动态元素绑定事件
      $('ul').on('click', 'a', function () {
        $(this).parent().stop().slideUp(function () {
          $(this).remove()
        })
      })
    })
  </script>
</head>

<body>
  <div class="box" id="weibo">
    <span>微博发布</span>
    <textarea name="" id="" class="txt" cols="30" rows="10"></textarea>
    <button class="btn">发布</button>
    <ul></ul>
  </div>
</body>

</html>

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

5.5 解绑事件 off()

off() 方法可以移除通过 on() 方法添加的事件处理程序

有的事件只想触发一次，可以使用 one() 绑定事件
解绑 p 元素所有事件处理程序：$('p').off()
解绑 p 元素上面的点击事件，后面的 foo 是侦听函数名：$('p').off('click')
解绑事件委托：$('ul').off('click', 'li')

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      $('div').on({
        click() {
          console.log('我点击了')
        },
        mouseover() {
          console.log('我鼠标经过了')
        }
      })
      $('ul').on('click', 'li', function () {
        alert(11)
      })

      // 事件解绑
      // $('div').off() // 解除了 div 身上所有事件
      $('div').off('click') // 解除了 div 身上的点击事件
      $('ul').off('click', 'li') // 解除了事件委托
      // one() 只能触发一次
      $('p').one('click', function () {
        alert(111)
      })
    })
  </script>
</head>

<body>
  <div></div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <p>我是 p</p>
</body>

</html>

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

5.6 自动触发事件 trigger()

有些事件希望自动触发，比如轮播图播放功能能和点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必点击触发

方法一：

element.click() // 第一种简写形式

方法二：

element.trigger('type') // 第二种自动触发模式

**方法三：**不会触发元素的默认行为，例如表单里点击会有光标一闪一闪

element.triggerHanler('type') // 第三种自动触发方式

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      $('div').on('click', function () {
        alert(11)
      })
      // 1.第一种简写形式
      // $('div').click()
      // 2.元素.trigger('事件')
      // $('div').trigger('click')
      // 3.第三种
      // $('div').triggerHandler('click')

      // 下面文本框内没有光标在闪烁，无默认行为
      $('input').on('focus', function () {
        $(this).val('你好吗')
      })
      $('input').triggerHandler('focus')
    })
  </script>
</head>

<body>
  <div></div>
  <input type="text">
</body>

</html>

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

5.7 事件对象

事件被触发，就会有事件对象的产生：
element.on(events, [selector], function (event) {})

阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      $('div').on('click', function (e) {
        console.log('div')
        e.stopPropagation()
      })
      $(document).on('click', function () {
        console.log('docu')
      })
    })
  </script>
</head>

<body>
  <div></div>
</body>

</html>

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

5.8 拷贝对象

如果想把某个对象拷贝（合并）给另一个对象使用，可以使用 $.extend() 方法

语法：

$.extend([deep], target, object1, [objectN])

deep：true 为深拷贝，深拷贝会合并而不是覆盖
target：要浅拷贝的目标对象
object1：待被拷贝到第一个对象的对象

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      // var targetObj = {
      //   id: 0,
      //   age: 18
      // }
      // var obj = {
      //   id: 1,
      //   name: 'andy'
      // }
      // // 会覆盖原来的数据
      // $.extend(targetObj, obj)
      // console.log(targetObj) // {id: 1, age: 18, name: 'andy'}

      // var targetObj = {
      //   id: 0,
      //   msg: {
      //     sex: '男'
      //   }
      // }
      // var obj = {
      //   id: 1,
      //   name: 'andy',
      //   msg: {
      //     age: 18
      //   }
      // }
      // $.extend(targetObj, obj)
      // console.log(targetObj) // {id: 1, age: 20, name: 'andy'}
      // targetObj.msg.age = 20
      // // 浅拷贝复杂对象的地址会拷贝给目标对象
      // console.log(obj.msg.age) // 20

      var targetObj = {
        id: 0,
        msg: {
          sex: '男'
        }
      }
      var obj = {
        id: 1,
        name: 'andy',
        msg: {
          age: 18
        }
      }
      $.extend(true, targetObj, obj)
      console.log(targetObj)
      /*
      {
        "id": 1,
        "msg": {
            "sex": "男",
            "age": 20
        },
        "name": "andy"
      }
      */
    })
  </script>
</head>

<body>
  <div></div>
</body>

</html>

5.9 多库共存

jQuery 共存方案：

$ 改成 jQuery
$.noConflict()：例如：var suibian = $.noConflict()，之后 suibian 相当于 $

6. 尺寸和位置操作

6.1 元素尺寸大小

语法	用法
width() / height()	取得匹配元素宽度和高度，只算 width / height
innerWidth() / innerHeight()	取得匹配元素宽度和高度值，包括 padding
outerWidth() / outerHeight	取得匹配元素宽度和高度值，包括 padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值，包括 padding、border、margin

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 10px;
      border: 15px solid red;
      margin: 20px;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      console.log($('div').width()) // 200，只包括 width、height
      $('div').width(300)

      console.log($('div').innerWidth()) // 320，包括 padding

      console.log($('div').outerWidth()) // 350，包括 padding、border

      console.log($('div').outerWidth(true)) // 390
    })
  </script>
</head>

<body>
  <div></div>
</body>

</html>

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

6.2 位置

offset()：设置被选元素相对于文档的坐标，跟父级没有关系

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: purple;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      console.log($('.son').offset().top) // 8
      $('.son').offset({
        top: 200,
        left: 200
      })
    })
  </script>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

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

position()：得到被选元素相对于带有定位的父级偏移坐标，若父级没有定位，则以文档为准。此方法只能获取，不能设置偏移

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      position: relative;
    }

    .son {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 100px;
      height: 100px;
      background-color: purple;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      // 只能获取不能设置
      console.log($('.son').position().top) // 10
    })
  </script>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

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

scrollTop() / scrollLeft()：获取元素被卷去的头部与左侧，支持赋值操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      width: 100%;
      height: 1500px;
      position: relative;
    }

    .content {
      position: absolute;
      top: 550px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 500px;
      height: 500px;
      background-color: pink;
    }

    .toTop {
      display: none;
      position: fixed;
      width: 50px;
      height: 50px;
      line-height: 25px;
      border: 1px solid red;
      font-size: 8px;
      text-align: center;
      border-radius: 10px;
      right: 0;
      bottom: 200px;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    $(function () {
      let contentTop = $('.content').offset().top
      $(window).scroll(function () {
        if ($(document).scrollTop() >= contentTop) {
          $('.toTop').stop().fadeIn(200)
        } else {
          $('.toTop').stop().fadeOut(200)
        }
      })
    })
  </script>
</head>

<body>
  <div class="content"></div>
  <div class="toTop">回到顶部</div>
</body>

</html>

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

6.3 带有动画的返回顶部

animate 动画函数有个 scrollTop 属性，可以设置位置

不能是文档而是 html 和 body 元素做动画

$('body, html').animate({scrollTop: 0})

# jQuery 学习

# 0.补充

# 0.1 axios、ajax 与 fetch

# 1. jQuery 基础

# 1.1 入口函数

# 1.2顶级对象 $

# 1.3 jQuery 对象和 DOM 对象

# 1.4 jQuery 对象和 DOM 对象相互转化

# 1.5 基础选择器

# 1.6 隐式迭代

# 1.7 筛选选择器

# 1.8 筛选方法

# 1.9 新浪下拉菜单

# 1.10 排他思想

# 1.11 淘宝服饰精品

# 1.12 样式操作

# 1.13 样式操作 - 类样式方法

# 1.14 tab 栏切换

# 2. jQuery 动画

# 2.1 jQuery 效果

# 2.2 简洁版滑动下拉菜单

# 2.3 事件切换（继承上面的简洁版）

# 2.4 简洁版滑动下拉菜单问题解决

# 2.5 淡入淡出效果

# 2.6 高亮案例

# 2.7（重要）自定义动画 animate

# 2.8 手风琴效果

# 3. jQuery 属性操作

# 3.1 设置获取元素固有属性值 prop() / attr 自定义属性

# 3.2 购物车全选

# 3.3 jQuery 内容文本值

# 3.4 增删商品数量

# 3.5 parents 选择器

# 4. 元素操作

# 4.1 遍历 each（主用于遍历 DOM）

# 4.2 遍历 $.each（主用于遍历数据）

# 4.3 创建、添加、删除元素

# 5. jQuery事件

# 5.2 jQuery 事件注册

# 5.3 on() 的优势

# 5.4 发布微博

# 5.5 解绑事件 off()

# 5.6 自动触发事件 trigger()

# 5.7 事件对象

# 5.8 拷贝对象

# 5.9 多库共存

# 6. 尺寸和位置操作

# 6.1 元素尺寸大小

# 6.2 位置

# 6.3 带有动画的返回顶部

jQuery 学习

0.补充

0.1 axios、ajax 与 fetch

1. jQuery 基础

1.1 入口函数

1.2顶级对象 $

1.3 jQuery 对象和 DOM 对象

1.4 jQuery 对象和 DOM 对象相互转化

1.5 基础选择器

1.6 隐式迭代

1.7 筛选选择器

1.8 筛选方法

1.9 新浪下拉菜单

1.10 排他思想

1.11 淘宝服饰精品

1.12 样式操作

1.13 样式操作 - 类样式方法

1.14 tab 栏切换

2. jQuery 动画

2.1 jQuery 效果

2.2 简洁版滑动下拉菜单

2.3 事件切换（继承上面的简洁版）

2.4 简洁版滑动下拉菜单问题解决

2.5 淡入淡出效果

2.6 高亮案例

2.7（重要）自定义动画 animate

2.8 手风琴效果

3. jQuery 属性操作

3.1 设置获取元素固有属性值 prop() / attr 自定义属性

3.2 购物车全选

3.3 jQuery 内容文本值

3.4 增删商品数量

3.5 parents 选择器

4. 元素操作

4.1 遍历 each（主用于遍历 DOM）

4.2 遍历 $.each（主用于遍历数据）

4.3 创建、添加、删除元素

5. jQuery事件

5.2 jQuery 事件注册

5.3 on() 的优势

5.4 发布微博

5.5 解绑事件 off()

5.6 自动触发事件 trigger()

5.7 事件对象

5.8 拷贝对象

5.9 多库共存

6. 尺寸和位置操作

6.1 元素尺寸大小

6.2 位置

6.3 带有动画的返回顶部