# jQuery

**Repository Path**: flyird/j-query

## Basic Information

- **Project Name**: jQuery
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-11-19
- **Last Updated**: 2021-12-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 课程资料, jQuery

## README

![image-20210808164426735](Readme.assets/image-20210808164426735.png)

# 01 - 知识回顾

## 一个简单的案例

使用所学的知识，实现下拉菜单效果，如下：

![image-20210808164426736](Readme.assets/xialacaidan.gif)

HTML代码：

```html
<ul id="nav">
  <li>
    <a href="javascript:;">菜单一</a>
    <ul>
      <li>子菜单1-1</li>
      <li>子菜单1-2</li>
      <li>子菜单1-3</li>
    </ul>
  </li>
  <li>
    <a href="javascript:;">菜单二</a>
    <ul>
      <li>子菜单2-1</li>
      <li>子菜单2-2</li>
      <li>子菜单2-3</li>
    </ul>
  </li>
  <li>
    <a href="javascript:;">菜单三</a>
    <ul>
      <li>子菜单3-1</li>
      <li>子菜单3-2</li>
      <li>子菜单3-3</li>
    </ul>
  </li>
</ul>
```

CSS样式：

```css
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  box-sizing: border-box;
}

#nav > li {
  width: 120px;
  height: 30px;
  line-height: 30px;
  float: left;
  background-color: #171a24;
  border: solid 1px #fff;
}

#nav a {
  display: block;
  text-decoration: none;
  color: #fff;
  margin-left: 4px;
}

#nav ul li {
  background-color: #282c3f;
  color: #fff;
  border-bottom: solid 1px #fff;
}

#nav ul {
  display: none; /* 起始状态，让子菜单隐藏 */
}
```

JS代码：

```js
// 找到三个顶级菜单
let bigLis = document.querySelectorAll('#nav > li');
// 循环，分别为每个顶级菜单注册 鼠标移入和离开 事件
for (let i = 0; i < bigLis.length; i++) {
  // 鼠标移入事件
  bigLis[i].onmouseover = function () {
    this.children[1].style.display = 'block';
  }
  // 鼠标离开事件
  bigLis[i].onmouseout = function () {
    this.children[1].style.display = 'none';
  }
}
```

代码又长又臭，还有兼容性问题，写完代码，烧死不少脑细胞，头发掉了一大把。。。

实测，原生的WebAPI太不好用了。。。

## 封装函数

比如，把查找元素的那一串代码封装成一个短一点的函数，用的时候调用函数就好了。

比如，把设置元素显示的代码封装成函数，用的时候，调用函数就行了。

比如，把设置元素隐藏的代码封装成函数，用的时候，调用函数就行了。

比如，为节点列表中的每个元素注册事件，也封装成函数，用的时候，调用函数就行了。

......

创建一个函数库，***tools.js***，封装上面提到的三个函数

```js
// 为了简洁，函数名只使用一个下划线 （JS变量允许使用下划线开头的哟）
function _(selector) {
  return document.querySelectorAll(selector);
}

// 每个HTML元素节点，都继承HTMLElement；
// 所以为HTMLElement原型加入方法，这样，所有的元素节点都可以使用这个方法啦~~~
HTMLElement.prototype.show = function () {
  this.style.display = 'block';
}

HTMLElement.prototype.hide = function () {
  this.style.display = 'none';
}

// 形如 document.querySelectorAll() 返回的是节点列表，并不是一个元素；
// 所以，需要为节点列表的原型添加对象，这样，节点列表才能调用这个方法；
// 这个方法为节点列表中的每个节点注册事件，所以里面就是循环，然后注册事件
NodeList.prototype.hover = function (fn1, fn2) {
  // this 表示调用这个方法的 对象
  // console.log(this);  // [li, li, li]
  for (let i = 0; i < this.length; i++) {
    // this[i].addEventListener('click', function () {}); // 这是通用的写法
    this[i].onmouseenter = function () {
      // console.log('hello'); // ???????
      // 事件内部，this表示事件源
      fn1.call(this);
    }
    this[i].onmouseleave = function () {
      // console.log('world'); // ????????
      fn2.call(this);
    }
  }
}
```

调用时：

```html
<script src="./tools.js"></script>
<script>
  // 获取节点列表，调用hover方法；
  $('#nav > li').hover(function () {
    // this 表示事件源
    this.children[1].show();
  }, function () {
    this.children[1].hide();
  });
</script>

```

这样看来，调用方法，使用方法，及其的方便简洁了，但是，**封装成了最大的问题**，尤其是对于初学者来说，简直就是噩梦~~~

# 02 - jQuery简介

## 什么是jQuery

jQuery是一个轻量级的JavaScript库；

库，即封装了很多好用的方法的大仓库；

所以，jQuery和我们自己封装的tools.js比较像，就是很多方法组成的一个大仓库；

jQuery是其他人开发的，我们不用担心封装的问题了，拿来直接使用即可。

## 初体验

在HTML结构和CSS样式不变的情况下，还是完成下拉菜单的效果。

这次，我们使用jQuery完成。

```html
<!-- 加载jquery库 -->
<script src="./jquery-3.5.1.js"></script>

<script>
  $('#nav > li').hover(function () {
    $(this).children().last().toggle(); // 最后一个方法换成 slideToggle() 更好玩哟~~~
  })
</script>
```

没错，就是这么简单，而且代码也非常简洁，并且，你也不用担心基础不好，不会封装的问题了。

## 使用jQuery的好处

- 写的更少，做的更多 （write less, do more）（这也是jQuery的宗旨）
- 解决了浏览器兼容问题
  - 1.x 版本，兼容IE6/7/8
  - 2.x 版本，不兼容IE6/7/8
  - 3.x 版本，不兼容IE6/7/8，是目前的最新版本

## 咋用，咋学

- jQuery是别人封装的库，学习的话，最好下载到自己的电脑中

  - 官网：https://jquery.com/   进入之后，右侧有个醒目的 “download”，点击它，即可下载
  - 一个不错的网站：https://www.jq22.com/jquery-info122，从这里也可以下载到jQuery
  - 下载下来，一般有两个文件，不带 `min` 的是未压缩版，带 `min` 的是压缩版，使用哪个都可以

- 引入jquery文件

  - 使用前使用 script 标签，引入 `<script src="./jquery.js"></script>`

  - 也可以引入其他服务器的 jquery文件，这样你就不用下载了，但是需要联网，这种方式也叫做CDN方式，如下

    `<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>` 

    或者

    `<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>`

- 课上认真听课，老师会把常用的方法全部讲到。

- 认真做案例，有的案例不止一种做法，要多研究

- 通过案例学习知识点

- 不要死记硬背，查看手册，学会自己查阅文档，这点是最重要的。老师上课也会带着大家一起查。

- “询问”百度。

# 03 - 选择器

## 概念

- jQuery选择器的作用是选择页面中的元素
- 类似原生的 `document.getElementByXxx()` 和 `document.querySelector()` 方法

## 语法

```js
// 语法
$('选择器')

// 比如，选择 id=abc 的元素
$('#abc')

// 比如选择页面中所有的 p 元素
$('p')

// 选择页面中的第二个p元素
$('p:nth-child(2)')
```

jQuery选择器，和CSS选择器几乎一样，支持CSS1~CSS3的选择器；

jQuery还额外扩展了一些选择器，从而使我们在选择元素上更加灵活。

## 常用选择器

```js
// 根据id选择元素
$('#id')

// 根据类名选择元素
$('.class')

// 根据标签名选择元素
$('标签名')   比如 $('li')

// 选择某个元素的后代元素
$('祖先元素 后代元素')    比如  $('div span') 找div后代中的所有span标签

// 选择某个父元素的子元素
$('父元素 > 子元素')     

// 根据属性选择元素
$('选择器[属性=值]')   比如  $('input[type=button]') 查找type属性为button的input元素

// 选择 第 2/4/6... 个元素
$('选择器:odd')       

// 选择 第 1/3/5... 个元素
$('选择器:even')

// 选择第一个元素 | 选择最后一个元素
$('选择器:first')  $('选择器:last')    比如  $('li:first')  表示找所有里中的第一个li

// 选择第一个子元素 | 选择最后一个子元素
$('选择器:first-child')  $('选择器:last-child')  比如 $('li:first-child') 表示找每个ul中的第一个li

// 选择偶数元素
$('选择器:nth-child(2n)')
```



# 04 - 筛选

## 概念

筛选，是在选择的元素的基础之上，再次筛选出符合条件的元素。

比如 `$('li')` 查找到了10个 `<li>xxx</li>` ，但是我只需要第3个，这时候，就需要筛选方法了`$('li').eq(2)`  

## 语法

```js
// 语法
$('选择器').筛选方法().筛选方法().筛选方法()......;

// 比如，找到所有li标签中的第3个li
$('li').eq(2);

// 比如，找到第3个li的其他兄弟 （筛选方法可以链式多次使用）
$('li').eq(2).siblings();
```

## 常用筛选方法

```js
// 筛选出第 1 个 li
$('li').first();

// 筛选出 最后一个 li
$('li').last();

// 筛选出 第 4 个 li （注意，参数0表示第1个，以此类推）
$('li').eq(3);

// 找到 ul 的所有子元素
$('ul').children();

// 在div中，查找后代中所有的a
$('div').find('a');

// 查找类名为abc的li的 下一个兄弟
$('li.abc').next();

// 查找类名为abc的li的 上一个兄弟
$('li.abc').prev();

// 查找类名为abc的li的 父级元素
$('li.abc').parent();

// 查找类名为abc的li的 祖先级元素，找到离它最近的那个div
$('li.abc').parents('div');

// 查找类名为abc的li的 兄弟元素
$('li.abc').siblings();
```



# 05 - 注册事件

## 说明

我们都知道，在dom操作中，通常使用如下方法注册事件

```js
// 注册事件
ele.addEventListener('click', function () {});

// 移除事件
ele.removeEventListener()
```

另一个做法是：

```js
// 注册事件
ele.onclick = function () {}

// 移除事件
ele.onclick = null;
```

在jQuery中，jQuery重新封装了注册事件的方法。

可以为元素注册原生的事件（比如click等）和 jQuery事件（比如hover等）。

## jQuery注册事件语法

不同版本的jQuery，建议使用的语法不太一样。

### 常规方法

所有版本都支持的方式

但jQuery3版本，不建议这样使用了

```js
// jQuery1~3版本都支持的语法，但jQuery3版本不建议采用这种方式了
$('div').click(function () {
  // 事件触发，执行这里
});
```

### 使用on语法

**目前，jQuery建议使用的方式**

**从jQuery1.7版本开始支持on方法**

```js
$('元素').on('事件名', function () {
  // 事件触发，执行这里
});
```

### 事件委托

```js
// 也是找到父级元素或祖先级元素注册事件，然后点击某个子元素触发事件
$('父事件源').on('事件名', '子选择器', function () {
  // 事件处理函数，$(this) 表示 子选择器
})

说明
1. jQuery做了处理，事件委托中，$(this)表示的是点击的那个子元素。并不是父元素
```

### 移除事件

```js
$('div').off('click'); // ---- 只移除div上的click事件

$('div').off(); // ---- 移除div元素上的所有事件
```

## 常用事件

```js
// 鼠标移入移出事件（移入移出 子元素 会再次触发）
mouseover --- mouseout

// 鼠标移入移出事件（移入移出 子元素 不会再次触发）
mouseenter --- mouseleave

// 鼠标 移动 事件（）
mousemove


// 键盘弹起
keyup

// 获取焦点和失去焦点
focus --- blur

// 单击和双击
click --- dblclick

// 综合 mouseenter 和 mouseleave 的事件
hover

// 内容改变后触发的事件
change

// 表单(form标签)提交时触发的事件
submit

// 窗口改变大小时触发的事件
resize

// 滚动条滚动时触发的事件
scroll
```

# 06 - CSS样式操作

## css() 方法

这里需要掌握的就一个方法 `$('div').css()` 。

它的作用有两个，一是获取元素某个样式的值；二是设置元素的样式；

### 获取样式值

只填一个字符串参数，获取该样式的值：

```js
// 获取div的字体颜色
$('div').css('color');

// 获取div的font-size值
$('div').css('font-size');
```

### 设置元素的样式

```js
// 设置div的背景颜色
$('div').css('background-color', 'red');

// 设置div的字体颜色
$('div').css('color', 'blue');

// 也可以使用对象方式的参数
$('div').css({ 'font-size': '20px', 'color': 'red', 'border': 'solid 1px red' });
```

## 修改类名

我们也可以通过修改类名的方式，来改变元素的样式。

### .addClass() 添加类

```js
语法:
$('元素').addClass('类名 类名 类名 ......');
```

### .removeClass() 移除类

```js
语法:
$('元素').removeClass('类名 类名 类名 ......');
```

### .toggleClass() 切换类

带有 `toggle` 的方法，带有自动检测功能。

比如 `toggleClass('类名')` 会自动检测元素是否有这个类

- 如果有这个类，则移除它
- 如果没有这个类，则添加上

# 07 - 效果|动画

## 说明

jQuery封装了一些方法，提供了简单的动画效果。比如有

- 显示、隐藏效果；
- 滑动显示、滑动隐藏效果；
- 淡入淡出效果；
- 自定义动画

## 显示|隐藏

- `show()` -- 让元素显示

  ```js
  语法: 
  $('元素').show([speed, [easing], [fn]])
  //参数介绍:
  1. 语法中的 [] 表示可选参数，所以 show() 方法中的3个参数可以都不用设置
  2. 第一个参数表示动画速度,可以设置 'slow' , 'normal', 'fast' 或者表示动画的时长毫秒，比如1000
  3. 第二个参数表示动画切换效果, 默认 'swing[由慢到快再到慢]' 或者 设置 'linear[匀速]'
  4. 第三个参数表示动画完成后执行的函数(回调函数)
  
  //代码演示1,未设置任何参数,控制元素显示,没有动画效果
  $('button').on('click', function () {
  	$('div').show();
  })
  
  //代码演示2,设置第一个参数,元素按照动画显示
  $('button').on('click', function () {
  	$('div').show('fast');
  })
  
  //代码演示3,设置两个参数,元素实现切换效果
  $('button').on('click', function () {
  	$('div').show(1000, 'linear');
  })
  
  //代码4演示,设置第三个参数,动画执行完后回调函数
  $('button').on('click', function () {
  	$('div').show(1000, 'linear', function () {
      console.log('动画执行完毕');
    });
  })
  ```
  
- `hide()` -- 让元素隐藏

  ```js
  语法:
  $('元素').hide([speed, [easing], [fn]);
  
  // 参数和show一样。
  ```


## 滑动显示隐藏

- `slideDown()` -- 滑动显示

  ```js
  介绍: slideDown()  显示元素(通过改变元素高度)
  语法:
  $('元素').slideDown([speed],[easing],[fn]);
  
  参数介绍:
  参数和 show 方法一样，只不过把show换成了 slideDown() ，只是换了个动画效果而已。
  
  //代码演示
  $('button').on('click', function () {
  	$('div').slideDown();
  })
  ```
  
- `slideUp()` -- 滑动隐藏

  ```js
  介绍: 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
  
  语法:
  $(对象).slideUp([speed,[easing],[fn]])
  
  参数介绍:
  参数和show()、hide()、slideDown() 一样
  
  //代码演示:
  $('button').on('click', function(){
  	$('div').slideUp('fast', 'linear', function(){
  		console.log('动画完成')
  	});
  })
  ```

## 淡入淡出

- `fadeIn()` -- 淡入

  ```js
  介绍: 通过透明度的变化来实现所有匹配元素的淡入效果[显示]
  
  语法: 
  $('元素').fadeIn([speed],[easing],[fn])
  
  参数介绍:
  参数和show()、hide()、slideDown()、slideUp() 一样，只是又一个动画效果而已
  
  //代码演示
  $('button').on('click', function () {
  	$('div').fadeIn();
  })
  ```

- `fadeOut()` -- 淡出

  ```js
  介绍: 通过透明度的变化来实现所有匹配元素的淡出效果[隐藏]
  
  语法:
  $('元素').fadeOut([speed],[easing],[fn])
  
  参数介绍:
  参数和show()、hide()、slideDown()、slideUp()、fadeIn() 一样
  
  //代码演示
  $('button').on('click', function () {
  	$('div').fadeOut();
  })
  ```

- `fadeTo()` -- 修改元素的透明度

  ```js
  介绍:  可以自定义透明度动画效果
  语法:
  $('元素').fadeTo([[speed],opacity,[easing],[fn]])
  
  参数介绍:
  1. speed 表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间  [必须设置]
  2. opacity 表示透明度, 0 - 1 之间 [必须设置]
  3. easing 表示动切换效果, 默认值 'swing' 或者 设置 'linear'
  4. fn 表示回调函数,动画完成后执行
  
  //代码演示:
  $('button').on('click', function(){
      $('div').fadeTo(1000, 0.1); // 通过 1s 时间，让元素的透明度 变为 0.1
  })
  ```

## 自定义动画

- `animate()`

  ```js
  介绍: 用于创建自定义动画的函数。
  语法:
  // $(对象).animate(params,[speed],[easing],[fn]);
  
  参数介绍:
  1.params 对象格式，一组包含作为动画属性和终值的样式属性和及其值的集合   [必须设置]
  2.speed  三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值
  3.easing 默认jQuery提供"linear" 和 "swing".
  4.fn:在动画完成时执行的函数
  
  //代码演示
  $('button').on('click', function(){
  	$('div').animate({
  		'width': '500px',
      'height': '500px',
      'marginLeft': '100px'
      // 无法设置 color、transform 这样的值，但可以设置scrollTop这样的DOM属性值
  	})
  })
  
  //注意: 
  1. animate自定义动画,无法实现颜色动画效果,如果需要改变颜色,需要单独下载插件实现，如下
     https://www.runoob.com/jquery/eff-animate.html
  2. 无法直接实现css中转化效果,比如transform,如果需要实现,则可以通过添加类名得的方式实现
  3. 单独的属性,可以使用驼峰命名法 ('marginLeft' 替代 'margin-left')
  4. 可以设置DOM属性的值，比如scrollTop。
  
  ```

## 终止和延迟执行动画

- `stop()` 和 `finish()` -- 终止动画

  ```js
  介绍: 停止所有在指定元素上正在运行的动画。
  
  语法:
  $('元素').stop([clearQueue],[gotoEnd]);
  $('元素').finish();
  
  参数介绍:
  1. clearQueue: 如果设置成true，则清空队列。可以立即结束动画。
  2. gotoEnd: 设置为true，则表示让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
  
  ```

  代码演示

  ```html
  <div style="width: 100px; height: 100px; background-color: brown"></div>
  <button>停止</button>
  
  <script>
    // 给div添加两个动画
    $('div').animate({
      width: '500px'
    }, 5000).animate({
      height: '500px'
    }, 5000);
  
    // 单击 “停止” 按钮，控制动画 （假设1s后，点击了按钮）
    $('button').on('click', function () {
      // 点击按钮时，当前正在执行的动画停止，但后续的动画能够继续执行
      $('div').stop(); // 点击按钮，宽度不再变化了，高度那个动画还是要执行的
      
      // 点击按钮时，清空所有的动画，并停止到当前位置
      $('div').stop(true); // 点击按钮，就是单纯的停住了，所有动画都不再执行了
      
      // 点击按钮时，清除所有动画；并让div到达 当前动画 设定的最终值
      $('div').stop(true, true); // 点击按钮，宽度马上到达500px，并且结束了，高度不再变了
      
      // 点击按钮时，清除所有动画，并让div到达所有css设置的最终值
      $('div').finish(); // 点击按钮，宽、高马上全部到达最终的500px，并且结束了
    })
  </script>
  ```

  

- `delay()` -- 延迟执行动画

  ```js
  介绍: 设置一个延时时间来推迟后续的动画。
  
  语法:
  $('元素').delay(duration,[queueName]);
  
  参数介绍:
  1. duration 延迟时间，单位毫秒
  2. queueName 可选参数，不做考虑
  
  // 代码演示 （让div淡出，然后延迟1s后，再淡入）
  $('div').fadeOut(2000).delay(1000).fadeIn(2000);
  ```

  

# 08 - 隐式迭代

## 含义

对符合条件的每个元素，执行给出的方法，而不用循环遍历；

jQuery默认已经帮我们遍历了。

## 举例说明

```js
$('li').css('color', 'red');  --  为每个li标签添加样式，而无需我们写 循环遍历 语法

$('button').on('click', function () {}) -- 为每个button注册单击事件，而无需 循环遍历
```

# 09 - 链式调用

## 含义

对于大部分jQuery方法，调用之后，还能继续链式的调用其他方法；

## 举例说明

```js
$('div').css('color', 'red').css('font-size', '20px'); // -- 链式调用 css() 和 css() 方法

$('p').parent().next().children().eq(0).css('color', 'red'); // -- 链式调用很多方法
```

# 10 - 获取元素大小和位置

## 获取元素宽高

- `$('元素').width('cs)`

  ```js
  语法:
  $('元素').width();   // 获取当前元素宽度,只包含内容区域的宽度
  
  代码演示:
  console.log($('div').width());   
  ```

- `$('元素').height()`

  ```js
  语法:
  $('元素').height();  // 获取当前元素高度,只包含内容区域高度
  
  代码演示:
  console.log($('div').height());
  ```

- `$('元素').innerWidth()`

  ```js
  语法:
  $('元素').innerWidth();    // 获取当前元素宽度 = 内容区域宽度 + 内边距
  
  代码演示:
  console.log($('div').innerWidth());
  ```

- `$('元素').innerHeight()`

  ```js
  语法:
  $('元素').innerHeight();  // 获取当前元素高度 = 内容区域高度 + 内边距
  
  代码演示:
  console.log($('div').innerHeight());
  ```

- `$('元素').outerWidth()`

  ```js
  语法:
  $('元素').outerWidth();   // 获取当前元素宽度 = 内容区域宽度 + 内边距 + 边框
  
  代码演示:
  console.log($('div').outerWidth();
  ```

## 设置元素宽高

- `$('元素').width(值)`  `$('元素').height(值)`

  ```js
  代码演示:
  $('div').width('200').height('200');
  
  //注意:
  1. 在设置值的时候可以带单位px也可以不用带单位px
  ```

- `$('元素').innerWidth(值)` `$('元素').innerHeight(值)`

  ```js
  代码演示:
  $('div').innerWidth('200').innerHeight('200');
  
  //注意:
  1. 此时设置的值中已经包含内边距,内边距默认为0,如果在css中给当前元素设置内边距,则元素大内容区域大小会发生改变
  ```

- `$('元素').outerWidth(值)` `$('元素').outerHeight(值)`

  ```js
  代码演示:
  $('div').outerWidth('200', true).outerHeight('200', true);
  
  //注意
  1. 此时设置的值是包含外边距的,如果通过css给当前元素设置外边距,则元素内容区域大小会发生改变
  ```

## 获取|设置元素位置

- `offset()` -- 获取相对页面的位置

  ```js
  语法:
  $('元素').offset([coordinates]); 
  
  参数说明：
  1. 不传递参数，表示获取元素的位置
  2. 如果传递参数，必须传递一个 {top: 100, left: 50} 这样的对象，用于设置元素的位置。
  
  //总结:
  1. $('元素').offset() 返回的是一个对象
  2. $('元素').offset() 返回对象中包含 left 属性 和 top属性
  3. 获取当前元素的位置是相对整个页面      
  4. 类似于固定定位
  5. 可用来设置元素的位置
  
  // 代码演示:
  $('.one').offset().left
  $('.one').offset().top
  ```

- `position()` -- 获取相对父元素的位置

  ```js
  语法:
  $('元素').position(); 
  
  //总结:
  1. $('元素').position() 返回的是一个对象
  2. $('元素').position() 返回对象中包含 left 属性和 top属性
  3. 获取当前元素的位置,如果当前父元素没有定位,相对整个页面,如果父元素有定位,参照父元素 
  4. 类似于绝对定位
  5. 只能获取位置，不能设置位置，即不能为这个方法传递参数
  
  //代码演示:
  $('.one').position().left
  $('.one').position().top
  ```

## 获取|设置滚动条位置

- `scrollTop()` 和 `scrollLeft`

  ```js
  语法:
  $('元素').scrollTop([val]);
  
  参数说明：
  1. 不传递参数，表示获取滚动条的位置
  2. 传递参数，表示设置滚动条的位置
  
  //总结:
  1. 获取当前元素(内容)滚动出去的距离
  2. 如果希望在程序中获取当前距离大小,需要在scroll事件中获取
  
  //代码演示:
  $('.box').scroll(function(){
  	console.log($(this).scrollTop());
  });
  ```



# 11 - 文档操作（DOM操作）

## 创建元素

`$(html标签)`

```js
语法:
$('html标签');

返回: JQ标签对象

例如:
var  span = $('<span>嘿嘿</span>');
```

## 添加元素

- 父元素末尾添加子元素

  ```js
  语法:
  $('父元素').append('子元素或直接的HTML标签');
  
  例如:
  var p = $('<p>我是创建的p</p>');
  $('div').append(p);
  
  说明：
  1. 此方法不会覆盖父元素中原有元素，只是单纯的再加一个子元素
  ```

- 父元素开始位置添加子元素

  ```js
  语法;
  $('父元素').preppend('子元素或直接的HTML标签');
  
  例如:
  var p = $('<p>我是创建的p</p>');
  $('div').prepend(p);
  
  说明：
  1. 此方法不会覆盖父元素中原有元素，只是单纯的再加一个子元素
  ```

- 添加到父元素中，并覆盖原来所有的子元素

  ```js
  语法：
  $('父元素').html('html标签');
  
  例如：
  $('父元素').html('<span>我的新来的，你们都退下</span>');
  
  说明：
  1. 此方法的参数，直接使用 HTML 标签
  2. 此方法，会覆盖父元素中原有的所有内容
  3. 其实，和原生的 innerHTML 一样。
  ```

- 添加兄弟节点

  ```js
  语法：
  $('元素').before('元素或HTML标签');  --- 在当前元素之前，添加一个兄弟节点
  $('元素').after('元素或HTML标签');   --- 在当前元素之后，添加一个兄弟节点
  
  例如：
  $('p').before('<p>记住，你是个弟弟</p>');
  ```

## 移除元素

- `remove()`

  ```js
  语法:
  $('元素').remove();
  
  特点: 
  1. 从页面中将当前标签删除
  2. 这个元素的事件/附加的数据也会被删除
  ```

- `detach()`

  ```js
  语法:
  $('元素').detach();
  
  特点: 
  1. 从页面中将当前标签删除
  2. 这个元素的事件/附加的数据会被保留
  ```

- `empty()`

  ```js
  语法:
  $('元素').empty();
  
  特点: 将标签中的所有内容清空
  ```

- `html()`

  ```js
  语法:
  $('元素').html('');
  
  特点: 将标签中的所有内容清空，和 empty() 一样的效果
  ```

## 其他

其他方法，还包括

- 包裹元素 - `wrap()`
- 替换（修改）元素 -- `replaceWith()`
- 克隆元素 -- `clone()`

这些方法，不是很常用，了解即可。

# 12 - 属性操作

## attr 和 removeAttr 方法

原生中，有 `getAttribute()` 和 `setAttrbute()` 和 `removeAttribute()` 方法，用于操作元素的属性

jQuery中，封装并简化了上述方法

- 获取属性值

  ```js
  语法：
  $('元素').attr('属性名')
  
  例如：
  $('input').attr('type')
  ```

- 设置属性值

  ```js
  语法：
  $('元素').attr('属性名', '值');
  
  例如：
  $('img').attr('src', './images/1.png')
  
  总结：
  1. attr方法，类似原生的 getAttribute 和 setAttribute 方法的结合体
  2. 为attr传递一个参数，表示获取该属性的值；传递两个参数，表示设置属性值
  3. attr方法不适合操作 checked、disabled、selected 等这类属性，这类属性请使用下面的 prop 方法
  ```

- 移除属性

  ```js
  语法：
  $('元素').removeAttr('属性名');
  
  例如：
  $('table').removeAttr('width')
  ```

## prop 和 removeProp 方法

- 使用场景

  - 适合 `checked` 、 `disabled` 、`selected` 这类属性的操作，这类属性的值为 `true` 或 `false`

- 使用语法

  - 语法和上面的 `attr()` 方法一样。

- 举例说明

  ```js
  // 设置 单选按钮 选中
  $('input[type=radio]').prop('checked', true);
  
  // 设置单选按钮取消选中
  $('input[type=radio]').prop('checked', false);
  
  ```

## data 方法

`data()` 方法有两层含义，一是用于在标签上存储数据，二是获取形如 `data-xxx="值"` 这样的属性，我们主要讲解后者。

```js
语法
$('元素').data([属性名]);

例如：
$('元素').data('id') --- 获取元素的 data-id 属性值，注意，这里只需要填id即可
$('元素').data() --- 获取元素的 全部 data-xxx 属性值，结果是一个对象
```

## HTML|文本|值 操作

### 设置|获取HTML内容

```js
语法：
$('元素').html([html标签]);

举例：
$('div').html();                 --- 获取div中的html内容
$('div').html('<p>hello</p>');   ---  设置div里面的内容为 `<p>hello</p>`

说明：
1. 设置元素的HTML内容的时候，会把元素中原有的全部内容覆盖掉
2. 和原生的 innerHTML 一样
```

### 设置|获取文本内容

```js
语法：
$('元素').text([文本]);

举例：
$('div').text();                 --- 获取div中的文本内容
$('div').text('hello');          --- 设置div里面的内容为 `hello`

说明：
1. 设置元素的文本内容的时候，会把元素中原有的全部内容覆盖掉
2. 和原生的 innerText 类似
```

### 设置|获取value值

```js
语法：
$('元素').val([值]);

举例：
$('input').val();                 --- 获取input的value值
$('input').val('hello');          --- 设置input的value值为 `hello`

说明：
1. 设置元素的文本内容的时候，会把元素中原有的全部内容覆盖掉
2. 和原生的 `节点.value` 语法 类似
```

# 13 - 其他

## jQuery对象和DOM对象

### 概念

- DOM对象：通过 `document` 获取得到的，就是DOM对象
  - `document.getElementById()`
  - `document.querySelector()`
  - `document.createElement()`
  - ......
- jQuery对象：通过 `$('xxx')` 得到的就是jQuery对象
  - `$('#id')`
  - `$('<p>hello world</p>')`
  - ......

### 为何要区分

DOM对象，只能调用DOM方法，不能调用jQuery方法；

jQuery对象，只能调用jQuery封装的方法，不能调用原生的DOM方法；

### jQuery对象和DOM对象相互转换的原因

有些时候，我们得到了一个jQuery对象，但是需要调用DOM方法；

有些时候，我们得到了一个DOM对象，但是需要调用jQuery方法；

这个时候，就需要先进行对象的转换；

### 转换方法

- DOM对象转jQuery对象
  - `$(DOM对象)` ，也就是在DOM对象外，加一个 `$()` 就行了

- jQuery对象转成DOM对象（有如下两个办法）
  - `$('元素')[0]` ，也就是在jQuery对象后面加一个 `[0]` 就行了
  - `$('元素').get(0)` ，也就是在jQuery对象后，调用 `get(0)` 就行了

## each遍历

### 说明

为了方便遍历数组、伪数组、jQuery对象等，jQuery封装了 `each()` 方法。

### 语法

```js
语法一：只能遍历jQuery对象 (通过)
$('元素').each(function (index, item) {
  index 是索引、下标
  item 表示每一项，如果遍历的是节点，注意item是DOM对象
  this 表示每一项，和item一样
  返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
  返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')
});


语法二：可遍历任何对象
$.each(待遍历的数组或对象, function (index, item) {
  index 是索引、下标
  item 表示每一项，如果遍历的是节点，注意item是DOM对象
  this 表示每一项，和item一样
  如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
})


```

### 总结

- `$('xxx').each()`  和  `$.each()` 差不多
- 前者只能遍历jQuery对象；后者能够遍历任何对象
- 如果遍历的是节点，则要注意 item 是DOM对象

## 获取元素在兄弟间的位置

有很多时候，我们点击或鼠标移入某个元素的时候，需要知道 这个元素 在所有兄弟节点中的索引是几。

为此，jQuery封装了 `index()` 方法，该方法的作用就是 **返回相应元素的索引值，从0开始计数**

比如：页面有 3 个 li 标签，点击 li 的时候，输出这个 li 的索引。

代码如下：

```js
$('li').on('click', function () {
  let index = $(this).index();
  console.log(index); // 点击li的时候，分别输出0/1/2
})
```

## 页面加载事件（入口函数）

- DOM中如果在HTML结构之前写JS代码,需要设置加载事件,获取HTML元素

  ```js
  <script type="text/javascript">
  	window.onload = function() {
  		var div = document.querySelector('div');
  		console.log(div);
  	}
  </script>
  ```

- JQ如果在HTML结构之前写js代码,需要设置加载事件(入口函数)

  ```js
  // 简化写法
  $(function(){
  	var div = document.querySelector('div');
  	console.log(div);
  })
  
  // 或者
  $(document).ready(function(){ 
      var div = document.querySelector('div');
  	console.log(div);
  });
  
  备注:
  // 如果将JQ代码写到HTML结构后面,则可以不用设置加载事件
  ```

- JQ入口函数与原生JS中的load事件区别

  ```tex
  ☞ js中的load事件是整个页面都加载完成后，包括外部的资源文件（css、图片等等）都加载完毕后才执行
  ☞ jQuery中的入口函数是整个文档（HTML标签）加载完成后就立即执行代码
  
  ☞ js中的load事件只能写一个,如果直接写多个会被覆盖掉；需要用addEventListener注册多个
  ☞ Jquery中的入口函数可以写多个，并且不会被覆盖
  ```



# 14 - 案例 - 导航菜单

## 横向

### 演示效果

![image-20210808164426736](Readme.assets/xialacaidan.gif)

### JS代码

```js
// 最终
$('#nav > li').hover(function () {
  $(this).children().last().slideToggle();
})
```



## 纵向

### 演示效果

![image-20210808164426736](Readme.assets/xialacaidan2.gif)

### JS代码

```js
// 找到大的菜单，注册单击事件；点击之后，切换子菜单的显示隐藏
$('#nav > li > a').click(function () {
  // 找到子菜单，toggle | slideToggle | fadeToggle.
  // $(this) 表示 a 标签
  $(this).next('ul').slideToggle(400);
  // 做成手风琴（排它）效果
  $(this).parent().siblings().children('ul').slideUp();
});
```



# 15 - 案例 - tab栏切换

## 横向

### 演示效果

![image-20210808164426736](Readme.assets/tab1.gif)

### JS代码

```js
$('li').on('click', function () {
  $(this).addClass('tab').siblings().removeClass('tab');
  let index = $(this).index();
  $('#content > div').eq(index).addClass('curr').siblings().removeClass('curr');
})
```

## 纵向

### 演示效果

![image-20210808164426736](Readme.assets/tab2.gif)

### JS代码

```js
//每一个item注册一个鼠标进入事件
$('.item').mouseenter(function () {
  //当前元素设置背景图片
  $(this).css({
    'background': 'url(imgs/abg.gif)',
    'color': '#fff'
  })
  //当前元素对应的图片显示
  let index = $(this).index();
  //根据当前index显示对应的内容
  $('img').eq(index).show().siblings().hide();
}).mouseleave(function () {
  $(this).css({
    'background': '',
    'color': '#000'
  })
})
```



# 16 - 案例 - 手风琴效果

## 纵向

### 演示效果

![image-20210808164426736](Readme.assets/haoyou.gif)

### JS代码

```js
$('h4').click(function () {
  $(this).siblings().slideDown().parent().siblings().find('.content').slideUp();
});
```

## 横向

### 演示效果

![image-20210808164426736](Readme.assets/sfq.gif)

### JS代码

```js
$('li').hover(function () {
  $(this).stop().animate({
    'width': '900px'
  }).siblings().stop().animate({
    'width': '100px'
  })
})
```



# 17 - 案例 - 鼠标移入图片高亮

## 效果展示

![image-20210808164426736](Readme.assets/01.gif)

## JS代码

```js
$('.item').hover(function () {
  // 当前元素不透明,兄弟元素设置半透明
  $(this).stop().fadeTo('fast', 1).siblings().stop().fadeTo('fast', 0.2);
}, function () {
  // 鼠标离开
  $('.item').stop().fadeTo('fast', 1);
});
```

# 18 - 案例 - 禁止注册

## 效果展示

![image-20210808164426736](Readme.assets/02.gif)

## JS代码

```js
$('.ck').click(function () {
  //先获取当前复选框的状态
  let flag = $(this).prop('checked');
  //判断当前状态
  if (flag) {
    //代表当前是选中状态
    $('.btn').attr('disabled', false);
  } else {
    //代表当前复选框是未被选中的状态,按钮要被禁用掉
    $('.btn').attr('disabled', true);
  }
})
```

# 19 - 案例 - 购物车

## 效果展示

![image-2021080816446738](Readme.assets/05.gif)

## JS代码

```js
//数量增加减少功能
(function () {
  //计算总结
  var money = 0;
  // 增加 || 减少
  $('.num1 > a').click(function () {
    //获取输入框中的值
    var num = Number($(this).siblings('input').val());

    // 判断点击的是 + 还是 -
    let s = $(this).text();
    if (num <= 0 && s === '-') return;
    if (s === '+') num++;
    if (s === '-') num--;
    //将累加后的值赋值给输入框(赋值给当前按钮对应的输入框)
    $(this).siblings('input').val(num);

    //计算价格
    money = num * $(this).parent().siblings('.s-price').find('strong').text();
    //将价格赋值给总价标签
    $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));

    //计算总结
    getMoney();
  });
})();

//计算总价和数量
function getMoney() {
  var money = 0;
  var lis = $('.t_price strong');
  $.each(lis, function (index, item) {
    money += Number($(item).text());
  })
  //将总结设置给总结标签
  $('.product_money strong').text(money.toFixed(2));


  var cont = 0;
  var items = $('.num1  input');
  items.each(function (inex, item) {
    cont += Number($(item).val());
  });

  //将总数设置给标签
  $('.product_num strong').text(cont);
}
getMoney();

//删除功能
(function () {
  //清空购物车
  $('.clear_p').click(function () {
    if (confirm('确定要删除么?')) {
      $('.content').empty();
      getMoney();
    }
  })

  //移除购物车功能
  $('.del a').click(function () {
    if (confirm('确定删除么?')) {
      $(this).parents('.item').remove();
      getMoney();
    }
  });
})();
```

# 20 - 案例 - 回到顶部

## 效果展示

![image-20210808164426736](Readme.assets/03.gif)

## JS代码

```js
$(window).scroll(function () {
  if ($(this).scrollTop() >= 1000) {
    $('div').fadeIn();
  } else {
    $('div').fadeOut();
  }
});

$('div').click(function () {
  // $(window).scrollTop(0);
  $('html').animate({ scrollTop: 0 }, 500);
})
```

# 21 - 案例 - 评论管理

## 效果展示

![image-2021080816446736](Readme.assets/04.gif)

## JS代码

```js
var input_v = $('textarea');
var btn = $('.btn');
btn.click(function () {
  var item = $(`
    <div class="item">
    	<p>${input_v.val()}</p>
    	<a href="javascript:;" class="del">删除</a>
    </div>
  `);
  $('.content').prepend(item);
  input_v.val('');
})

$('.content').on('click', '.del', function () {
  if (confirm('确定删除么?')) {
    $(this).parents('.item').fadeOut(function () {
      $(this).remove();
    })
  }
})
```

# 22 - 案例 - 多彩弹幕

## 效果展示

![image-2021080816446736](Readme.assets/06.gif)

## JS代码

```js
// 如何得到 min ~ max 之间的随机数
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// console.log(random(20, 30));


// 点击发送按钮
//   --> 获取输入框的值，组装p标签
//   --> 修改p标签样式（字体大小随机、颜色随机）
//   --> 放到页面中指定的位置（右侧，盒子的外部  |  上下位置随机）
//   --> 自定义动画（向左移动，移动到盒子之外的时候，移除它）

$('.box a').on('click', function () {
  let val = $('.box input').val();
  // 组装p标签
  let p = $(`<p>${val}</p>`);
  // 设置p的样式
  p.css('font-size', random(12, 30) + 'px').css('color', `rgb(${random(0, 100)}, ${random(0, 100)}, ${random(0, 100)})`);
  // 把 p 放到页面中
  $('.screen').append(p);
  // p的高度，必须放到页面之后，才能获取
  // console.log(p.height());
  // p 上下的位置随机
  // p.css('top', random(0, box的高度 - 下边的高度 - p的高度));
  let t = $('.box').height() - $('.bottom_bar').outerHeight() - p.height();
  p.css('top', random(0, t) + 'px');

  // 给 p 加一个动画
  p.animate(
    { right: $('.box').width() + p.width() + 'px' }, 
    10000, 
    'linear', 
    function () {
      $(this).remove();
    }
  );
})
```

# 23 - 案例 - 待办事项

## 效果展示

![image-2021080816446736](Readme.assets/07.gif)

## JS代码

```js
// 分析:
// 1. 注册键盘事件(给输入框注册键盘事件)
// ☞ 在键盘事件中创建元素 (判断用户按下是不是回车键)
// ☞ 在类名叫 todo-list 标签中创建 li标签
// ☞ 在li标签中创建一个 类名叫 view 的div标签
// ☞ 在div标签中创建一个复选框标签,类名叫 toggle
// ☞ 在div标签中创建一个label标签(显示用户输入内容)
// ☞ 在div标签中创建一个类名叫destroy的button标签
// ☞ 在li中创建一个和div并列显示的类名叫edit的输入框标签
// 键盘事件
$('.new-todo').keydown(function (e) {
  if (e.keyCode == 13) {
    // 用户按下的是回车键
    // 获取用户输入的内容
    let v = $(this).val();
    //a)创建li标签
    let li = $(`
                <li>
                  <div class="view"> 
                    <input type="checkbox" class="toggle">
                    <label>${v}</label>
                    <button class="destroy"></button>
                  </div>
                  <input type="text" class="edit">
                </li>
              `);
    // b) 将创建好的标签添加到对应的列表中
    $('.todo-list').prepend(li);
    // c) 将输入框中的内容清空
    $(this).val("");
  }
});


//删除功能: 委托方式实现
$('.todo-list').on('click', '.destroy', function () {
  $(this).parents('li').fadeOut('fast', 'linear', function () {
    // 移除当前元素
    $(this).parents('li').remove();
  })
});


// 点击复选框功能: 给li标签切换 completed 类名
$('.todo-list').on('click', '.toggle', function () {
  $(this).parents('li').toggleClass('completed');
})

// 双击功能: dblclick, 通过委托方式注册双击事件
$('.todo-list').on('dblclick', 'li', function () {
  // 给当前li标签设置类名 editing , 显示输入框
  $(this).addClass('editing');
  // 将label标签中的文字取出
  let v = $(this).find('label').html()
  // 将取出文字赋值给input标签
  $(this).children('input').val(v);
})

// 失去焦点功能: 给输入框注册一个blur事件
$('.todo-list').on('blur', '.edit', function () {
  // 先将输入框隐藏
  $(this).parent().removeClass('editing');
  // 获取输入框中的内容
  let v = $(this).val();
  // 将输入框的内容赋值给label标签
  $(this).siblings().find('label').html(v);
})
```

# 24-jQuery插件

## 自己编写插件

插件是 jQuery 的扩展机制，自定义插件语法

```js
$.fn.插件方法名 = function () {
  
}
```

简单的使用：

```js
$.fn.abc = function () {
  // $(this) 表示调用该插件方法的 jQuery对象
  $(this).css('color', 'red').css('font-size', '30px');
  // return $(this) 是为了链式调用其他jQuery方法
  return $(this);
}
```

测试：

```js
$('div').abc(); // 检查div中的文字是否有对应的效果
```

## 使用网上的插件

实际开发中常常将一些复杂度高且通用性高的功能逻辑封装成为插件，这样做的目的是为了提升开发的效率，以下列举几个日常开发比较常见的插件

- 插件太多，用的时候，百度一下
- 老师提供一个[jQuery插件网](https://www.jq22.com/)站，里面有很多插件可用。而且有教程。

举例，使用轮播图插件：

- 首先，进入 https://www.jq22.com/
- 选择，媒体 --> 幻灯片和轮播图

![image-20211119174438922](Readme.assets/image-20211119174438922.png)



- 找到想要的效果，比如 https://www.jq22.com/jquery-info23463
- 下载代码
- 将css文件、js文件复制到自己的项目中（复制过来，可以选择重命名）
- 应用到自己的项目中

```html
<!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>
  <!-- 这是下载的演示代码中的css，我改名为slider.css -->
  <link rel="stylesheet" href="./slider/slider.css">
</head>

<body>

  <!-- 这是演示代码中的 div，复制过来即可 -->
  <div id="slider"></div>

  <script src="./jquery-3.6.0.js"></script>
  <!-- 这是下载的演示代码中的js，我改名为slider.js -->
  <script src="./slider/slider.js"></script>

  <script>
    // 这是演示代码中的js，直接复制过来即可
    $("#slider").sliderImg({
      imgs: [
        "./img/1.jpg", 
        "./img/2.jpg", 
        "./img/3.jpg", 
        "./img/4.jpg", 
        "./img/5.jpg"],
    });
  </script>

</body>

</html>
```

> 其他插件，自行研究。另外后面的vue、react中，常用的效果一般都有对应的组件。