jQuery学习

LiSir2024-07-062024-09-15

jQuery第一部分

1.使用准备

首先来对比一下jQ语法和原生Dom语法

// 原生js
 let liArr = document.querySelectorAll('li')
 for (let i = 0; i < liArr.length; i++) {
   liArr[i].onclick = function () {
     this.style.backgroundColor = 'orange'
   }
 }

// jQuery  
$('li').click(function () {
    $(this).css('backgroundColor', 'orange')
})

可以发现，通过jQ语法操作样式要比原生操作Dom简单不少，那么如何使用jQ呢？下面介绍

下包:你得先把这个别人写好js文件下载到本地
导包:下载完毕之后需要导入到使用的页面中
另起一行script输出一下$,看看是否输出了下图内容:

确保上一步做完之后,我们写一段测试代码

$('body').css('backgroundColor','yellowgreen')
1
2
3
4
5
6
7
8
9
10
11
12

   2. 可以看出，操作的元素是body标签，设置的样式是背景色，且颜色为黄绿色。

jQ官方网站：https://jquery.com/

## 2.选择器

jQuery中如何获取需要操纵的元素?在我们学习Dom的时候，想要操作这个元素，第一步也是先获取元素，所以在jQ学习中也是一样的，下面来介绍如何通过jQ的方式来获取元素，语法很简单:

```js
// 基本用法
$('选择器')

直接调用$方法即可，选择器通过字符串的方式传递进去,基本上兼容所有css的选择器，比如标签选择器，类选择器，后代选择器等。导入了jQuery之后我们通过console的方式了$这个全局变量，打印的是一个函数。既然是函数加括号就是调用他。只不过之前的函数名都不是$而已。

标签选择：

1 2	// 标签选择器 $('p')

类选择器(在css中选择类就是.)：

1 2	// 类选择器 $('.p')

id选择器

1 2	// id 选择器 $('#p')

后代选择器(这里选择body中的所有p标签为例子)：

1 2	// 后代选择器 $('body p')

小结:

选择器的语法咋写来着？

调用$方法然后以字符串的方式传入css的选择器即可。

3.jQuery对象

jQuery 中利用选择器获取到的并非原生的 DOM 对象，而是 jQuery 对象，我们在学习jQ选择器的时候，调用$方法获取到的返回值就是jQuery对象，jQuery提供的绝大多数方法都需要通过jQuery对象才可以访问。

1 2	// jQuery $('p')

然后我们通过css方法把元素的背景色变成了粉色

1 2	// jQuery $('p').css('backgroundColor','pink')

如果使用Dom对象来实现，是这样的,先获取到dom对象，然后通过点语法访问style属性，接着为backgroundColor赋值.

1	document.querySelector('p').style.backgroundColor = 'pink'

注意：两者的写法不能混淆。

除了通过选择器以外，我们还可以把dom对象直接丢到$方法中，他返回的也是一个jQ对象，就可以使用jQuery提供的那些高级方法。

1 2	$('选择器') $(dom对象)

就比如

1
2
3

// 4. dom对象转jQ对象，li是一个dom对象
     let $li2 = $(li)
     $li2.css('backgroundColor', 'skyblue')

jQuery对象

调用$方法传入选择器或dom元素获取到的是什么对象？

jQuery对象
jQuery对象的方法,比如css方法放在什么位置？

原型上

4.事件绑定

语法是这样的：先通过选择器找到希望绑定的元素，然后然后调用对应的事件名方法，传入回调函数，逻辑直接写在回调函数里面即可。

1
2
3

$('选择器').事件名(function () {
  // 逻辑....
})

注意：在操作dom元素时，我们在绑定事件的时候一是要在事件名称前面加上on，二是通过赋值号=来写对应事件的回调函数(触发事件时要做的逻辑),然而jQ语法是不一样的，这要注意了。

// 1.为 li 添加点击事件
$('li').click(function(){
  console.log('这是点击事件！');
  //当触发点击事件时，把背景颜色变成红色
    console.log(this)
  //这里的this是dom对象，你可以通过以下方法实现变红
  this.style.background = 'red'
  //也可以通过jQ语法变红，但是需要进行转换
  let jqObj = $(this)
  jqObj.css('background','red');
})

从上面可以看到，当我们操作jQ对象进行操作绑定事件时，不需要在加onxxxx 和 =，方便许多，这点注意。

其他事件，比如聚焦(focus)，失焦(blur)，鼠标移入移出等等，如下所示

// 2.为 .text 添加获得焦点事件
    $('.text').focus(function () {
      console.log('focus')
    })

    // 3.为 .text 添加失去焦点事件
    $('.text').blur(function () {
      console.log('blur')
    })

    // 4.为 .box 添加鼠标移入事件
    $('.box').mouseenter(function () {
      console.log('mouseenter')
      $(this).css('backgroundColor', 'pink')
    })

    // 5.为 .box 添加鼠标移出事件
    $('.box').mouseleave(function () {
      console.log('mouseleave')
      $(this).css('backgroundColor', 'yellowgreen')
    })

jQuery中的事件绑定。

为jQuery对象绑定事件时，方法名字中有没有on？

没有，$(‘选择器’).
传入的回调函数中，如何获取触发事件的dom元素?

this,可以调用$方法将他转为jQuery对象，从而使用jQuery对象强大的方法

5.链式编程

指的是通过点把多个操作（方法）连续的写下去，这样形成的结构和链子一样，所以叫做链式编程。

上一节中的对于text类的操作方法，写了两部分重复了，下面来展示链式编程的写法：

$('.text')
  .focus(function () {
    console.log('获取焦点')
  })
  .blur(function () {
    console.log('失去焦点')
  })

我们在.focus方法的后面继续点.blur就可以再为他绑定失去焦点事件。形式上看去就好比下面这样：

1	$('.text').focus(回调函数).blur(回调函数)

甚至是：

1	$('.text').focus(回调函数).blur(回调函数).change(回调函数)

为什么可以这么写？答：因为通过jQ对象调用的大部分方法返回的还是同一个jQ对象。

链式编程

链式编程的含义是?

通过点把多个操作连续的写下去, 形成和链子一样的结构
有没有特殊情况?

有

6.内容操纵

如何通过jQuery操纵元素的内容

jQuery封装了2个方法让我们对元素的文本进行设置或者,根据是否传参功能是不一样的,如何使用呢?

传递参数就是设置,不传递参数就是取值

// 设置
$('选择器').html('内容')
$('选择器').text('内容')
// 取值
$('选择器').html()
$('选择器').text()

如果，我们要设置的内容中包含标签，那么就用.html()方法。如果要获取的内容只希望获取文本内容，不包含标签，那么推荐使用.text()方法

举例，设置普通文本：

1
2
3

//  1. 设置普通文本
$('.box1').html('测试内容')
$('.box2').text('测试内容')

这两种方式，在页面中呈现的内容是一样的

但是如果，这时我们在带入标签进行内容的设置，代码是：

1
2
3

// 2. 设置标签
$('.box1').html(' <a href="#">黑马程序员</a>')
$('.box2').text(' <a href="#">黑马程序员</a>')

可以清楚的发现.text方法并没有将a标签解析，而.html方法解析了

接下来测试取值。

// 3. 取值
 let htmlContent = $('.box1').html();
 //包含标签
 console.log(htmlContent);
 let textContent  = $('.box1').text();
 //包含文本
 console.log(textContent);

结果

可以看到，html方法的取值可以将标签取到并输出。而text方法只能取到文本，也就是标签的内容。

下面来说一点链式编程不适用的情况。链式编程是只要你返回的对象是jQ对象，就可以继续..来执行下面的方法，我们只需要比较在赋值时，将被赋值的内容获取，在与jQ选择器获取的对象进行比较即可

1
2
3

let $box1 = $('.box1')
let $res =  $box1.html('测试内容')
console.log($box1===$res) // true

说明$box1和$res是同一个jq对象,那么进行赋值操作的时候就可以调用其他的jq方法。

哪个方法设置的标签会被正常解析？

html方法
只获取元素的文本使用哪个方法?

text方法
赋值还是取值支持链式编程?

赋值

案例1:计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例计数器</title>
</head>
<!-- 引入jQ -->
<script src="../jquery/jquery-3.5.1.js"></script>
<body>
    <div class="input-num">
        <!-- 减号 -->
        <button id="btn1"> - </button>
        <!-- 内容 -->
        <span>0</span>
        <!-- 加号 -->
        <button id="btn2"> + </button>
      </div>
</body>
<script>
    let i = $('.input-num span').text();
    console.log(i);
    // 分情况讨论
    $('.input-num #btn1').click(function(){
        let btn1Obj = $('.input-num #btn1')
        if(i !== 0){
         i--;
         $('.input-num span').text(i)
        }else{
            window.alert('i已经是0了,不能够继续递减了!')
        }
    })

    $('.input-num #btn2').click(function(){
        let btn2Obj = $('.input-num #btn2')
        if(i == 10){
            window.alert("i已经到最大值10了,不能够增加了")
        }else{
            i++;
            $('.input-num span').text(i)
        }
    })
</script>
</html>

针对于两个按钮，除了可以按照上面的那种方法来给它们写一个不同的id以外，还可以用伪类选择器，指的是，在一个大元素中的第一个子元素和最后一个子元素，可以用到下面这样的

last-child和first-child叫做什么选择器?

伪类选择器

写法：
span里面的文本设置和取值用的是什么方法

text方法

7.过滤方法

使用jQuery的过滤方法对找到的元素再次筛选

jQuery中的过滤方法,作用是对jQuery对象中的dom元素再次进行筛选,让我们更精确的定位到希望操纵的元素。

方法一共有3个,分别是first,last,和eq,其中first和last不需要传递参数,作用分别是获取到第一个和最后一个元素,eq方法需要传递索引作为参数,索引从0开始.这三个方法返回的都是jQ对象,这就意味着我们可以直接用点语法调用我们目前学过的那些方法,比如绑定事件,修改内容等等

现在针对上面的内容，对案例：计数器中的进行改写如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例计数器</title>
</head>
<!-- 引入jQ -->
<script src="../jquery/jquery-3.5.1.js"></script>
<body>
    <div class="input-num">
        <!-- 减号 -->
        <button > - </button>
        <!-- 内容 -->
        <span>0</span>
        <!-- 加号 -->
        <button > + </button>
      </div>
</body>
<script>
    let i = $('.input-num span').text();
    console.log(i);
    // 分情况讨论
    $('.input-num button ').first().click(function(){
        if(i != 0){
         i--;
         $('.input-num span').text(i)
        }else{
            window.alert('i已经是0了,不能够继续递减了!')
        }
    })

    $('.input-num button').last().click(function(){
        if(i == 10){
            window.alert("i已经到最大值10了,不能够增加了")
        }else{
            i++;
            $('.input-num span').text(i)
        }
    })
</script>
</html>

8.样式操纵

基础语法：

1
2
3

.css('样式名','值')
//注意，驼峰命名，否则不识别
.css('backgroundColor','pink')

如果要设置多个样式，可以以对象的形式进行传递

语法：

.css(对象)
.css({
  backgroundColor:'pink',
  color:'red',
  width:'200px',
  height:200
})

同样，也可以获取对应样式名字的值

语法：

1 2	.css('样式名') .css('width')

css方法取值时是否需要传递参数?

需要，需要告诉css方法希望获取的是什么样式
设置时数值类的样式省略单位,默认值是什么？

px
css方法设置的样式在元素什么位置?

行内

9.属性操纵

使用jQuery提供的方法操纵元素的属性

示例代码：

1 2	<a href="https://www.baidu.com">点击跳转百度</a> <img src="logo.png" info="测试照片" />

方法有2个，分别是attr和removeAttr，其中attr方法可以用来设置或者读取属性，removeAttr的作用是删除属性

我们先来看看attr方法的用法

设置属性是通过attr方法传入两个参数，分别是属性名和设置的值
取值需传入属性名就好，和css方法是一致的。

基础语法：

// 赋值
.attr('属性名','值')
// 取值
.attr('属性名')
1
2
3
4
5
6
7
8

removeAttr方法

基础语法：

```js
// 删除属性
.removeAttr('属性名')

示例代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>12-属性操纵</title>
  </head>
  <body>
    <!-- 测试用标签 -->
    <a href="#">黑马程序员</a>
    <img src="" />
    <!-- 导入 jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <script>
      // 1. 赋值
      $('a').attr('href', 'http://www.baidu.com/')
      $('img').attr('src', 'http://www.baidu.com/images/logo.png')
      $('img').attr('info', '测试照片')

      // 2. 取值
      let href = $('a').attr('href')
      console.log('href:', href)
      let info = $('img').attr('info')
      console.log('info:', info)
      // 3. 删除
      $('a').removeAttr('href')
      $('img').removeAttr('src')
      $('img').removeAttr('info')
    </script>
  </body>
</html>

attr方法赋值操作时需要传递几个参数？

2个，参数1是属性名，参数2是属性值
attr方法传递一个参数的作用是什么？

取值，要获取什么属性的值，传入对应的名字就ok啦！
删除属性的方法名叫什么？

removeAttr

案例2:图片切换

完成图片切换demo

案例代码：

<!DOCTYPE html>
<html lang="zh">
  <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>13-图片切换</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div id="mask">
      <div class="center">
        <h2 class="title">
          <img src="./images/logo.png" alt="" />
        </h2>
        <!-- 图片 -->
        <img class="cover" src="./images/1.png" alt="" />
        <!-- 左箭头 -->
        <a href="javascript:void(0)" class="left">
          <img src="./images/prev.png" alt="" />
        </a>
        <!-- 右箭头 -->
        <a href="javascript:void(0)" class="right">
          <img src="./images/next.png" alt="" />
        </a>
      </div>
    </div>
  </body>
    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
<script>
// 箭头缩放
//移入
$('.center a').mouseenter(function(){
    console.log('鼠标移入');
    $(this).css('transform','scale(1.1)')
})
.mouseleave(function(){
    console.log('鼠标移出');
    $(this).css('transform','scale(1)')
})
// 图片切换
$('.left').css('display','none')
let index = 1
$('.left').click(function (){
index--
$('.cover').attr('src',`./images/${index}.png`)   
if(index == 1){
    $('.right').css('display','')
    $(this).css('display','none')
}
})
$('.right').click(function (){
    index++
    console.log(index);
    $('.cover').attr('src',`./images/${index}.png`)
    if(index == 5){
        $(this).css('display','none')
        $('.left').css('display','')
    }
})

</script>

为transform设置什么可以调整元素缩放?

scale
使用什么方法修改元素属性？

attr方法
使用什么方法修改元素样式

css方法

10.操纵value

使用jQuery提供的方法操纵表单元素的value值

jQuery中如何去操纵表单元素的value值，在网页开发中获取用户的输入。语法很简单，就是一个方法.val。

// 取值
$('选择器').val()
// 赋值
$('选择器').val('值')

val也有两种用法，取值和赋值，我们在取值的时候，不需要传递参数。

示例代码：

<body>
  <!-- 测试用输入框 -->
  <input class="text" type="text" />
  <!-- 引入 jQuery -->
  <script src="./jquery/jquery-3.5.1.js"></script>
  <script>
    // 1. 赋值
    $('.text').val('测试内容！')

    // 2. 取值
    $('.text').blur(function () {
      let value = $(this).val()
      console.log('value:', value)
    })
  </script>
</body>

测试结果：

赋值

取值

val方法是操纵元素的什么属性?

value属性
获取value是否需要传递参数

11.查找方法

使用jQuery提供的查找方法对元素再次检索

jQuery提供了一些查找元素的方法，通过这些方法就可以通过元素去查找他的父元素，兄弟元素，子元素和后代元素。

方法有4个，但是非常好理解：parent方法用来获取父元素，children方法用来获取子元素，siblings用来获取兄弟元素，find用来获取后代元素，考虑到后代元素种类比较多，所以find方法必须传入选择器

这4个方法返回的都是jQ对象，之前的方法也是适用的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查找方法</title>
</head>
<script src="./jquery/jquery-3.5.1.js"></script>
<body>
  <div class="container">
    <h4>课程列表</h4>
    <ul class="course">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ul>
    <h4>校区列表</h4>
    <ul class="campus">
      <li class="bj">北京校区</li>
      <li class="sh">上海校区</li>
      <li class="gz">广州校区</li>
      <li class="sz">深圳校区</li>
    </ul>
  </div>
</body>
<script>
  // 获取父元素,在这个例子中父元素就是div
  let parentElement = $('.course').parent().css('backgroundColor', 'pink');

  // 获取子元素上面的两个h4标签，ul标签都是子元素
  let childrenElement = $('.container').children().css('backgroundColor', 'yellow');
  
  // 获取兄弟元素
  let brotherElement = $('.course').siblings().css('backgroundColor', 'blue');
  console.log('这是兄弟元素'+brotherElement);
  // 获取后代元素 指的是li标签
  let afterElement = $('.campus').find($('.bj')).css('backgroundColor','red')
  
</script>
</html>

图片展示：

parent方法是否需要传递参数？

不需要，父元素只有一个
获取子元素的方法是什么？

children方法
siblings方法一定要传入选择器吗？

不一定，不传入获取所有兄弟元素，传入的话就是进行筛选啦
find方法是否可以获取到子元素?

可以，子元素也是后代元素的一种

12.操纵类名

使用jQuery提供的方法操纵元素的类名

通过操纵类名达到切换样式的目的。

适用场景：样式多且杂，这时候切换类名比一个个写入方便多

基础语法：

名字非常好记，方法都是通过class结尾的，结合不同的单词产生不同的效果

addClass就是添加类名
removeClass就是移除类名
hasClass是判断类名是否存在，返回的是布尔值
toggleClass可以对类名进行切换，有就移除，没有就添加。

参数就是需要操作的类名

示例代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>操纵类名</title>
    <style>
      body {
        padding: 0 30px;
      }
      p {
        color: #333;
      }
      .test {
        width: 200px;
        height: 100px;
        background-color: green;
      }
      .active {
        background-color: red;
        border: 5px solid skyblue;
      }
    </style>
  </head>
  <body>
    <!-- 操纵的盒子 -->
    <div class="test"></div>
    <hr />
    <!-- 测试用按钮 -->
    <button class="add">添加类名</button>
    <button class="remove">移除类名</button>
    <button class="has">判断类名</button>
    <button class="toggle">切换类名</button>

    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <script>
      // 1.  添加类名
      $('.add').click(function () {
        $('.test').addClass('active')
      })

      // 2. 移除类名
      $('.remove').click(function () {
        $('.test').removeClass('active')
      })

      // 3. 判断类名
      $('.has').click(function () {
        let res = $('.test').hasClass('active')
        console.log('res:', res)
      })

      // 4. 切换类名
      $('.toggle').click(function () {
        $('.test').toggleClass('active')
      })
    </script>
  </body>
</html>

方法是否需要传递参数?

需要，这一节学习的4个方法都需要传递类名作为参数
hasClass方法的返回值是什么？

布尔值，hasClass方法的作用是判断类名是否存在，true就是存在，false就是不存在
addClass是添加类名，removeClass是移除类名，切换类名的方法叫做?

toggleClass，类名存在就移除，不存在就添加

13.事件进阶

更为强大的事件绑定,还能解绑哦

学习事件进阶需要解决两个问题：

对于没有提供的方法的事件无法绑定，比如input。
对于绑定的事件如何移除呢？
有些更高级的需求也不好实现，比如：绑定一次性事件，就是只能触发一次的事件！

首先是注册事件，我们可以直接使用on方法，来注册所有的事件，他是要传递两个参数，第1个是事件名，比如点击事件写click就好，第2个是回调函数

如果要删除事件呢，可以使用off这个方法，想要删除什么事件，就传入什么事件名!

如果不传入事件名，会删除所有哦，是不是特别暴力啊！

最后一个是注册一次性事件，用法和on类似，方法名换成了one

基础语法：

// 1. 注册事件
.on('事件名', function(){})
// 2. 移除指定事件
.off('事件名')
// 3. 移除所有事件
.off()
// 4. 注册一次性事件
.one('事件名', function(){})

在回调函数中，this还指的是jQ对象

示例代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>事件进阶</title>
    <style>
      body {
        padding: 0 30px 40px;
      }

      p {
        color: #333;
      }
      button {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 测试标签 -->
    <input type="text" class="onoff" />
    <br />
    <button class="one">支付</button>

    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <script>
      // 1. 注册事件 on
      $('.onoff').on('focus', function () {
        console.log('获取焦点')
      })
      $('.onoff').on('blur', function () {
        console.log('失去焦点')
      })
      $('.onoff').on('input', function () {
        // console.log('input事件触发')
        // console.log(this)
        let value = $(this).val()
        console.log('value:', value)
      })
      //下面这种写法会报错
      // $('.onoff').input(function () {
      //   console.log('input事件触发')
      // })

      // 2. 移除指定事件 off
      $('.onoff').off('focus')

      // 3. 移除所有事件 off
      $('.onoff').off()

      // 4. 注册一次性事件 one
      $('.one').one('click', function () {
        alert('支付成功998元')
      })
    </script>
  </body>
</html>

使用on方法进行事件绑定时，第一个参数是什么?

事件名
使用off方法时可以不传递参数吗？

可以，删除所有事件，比较暴力
一次性事件通过什么方法绑定？

one

14.触发事件

用代码的方式触发注册的事件

学习在jQuery中如何通过代码的方式去触发绑定的事件。

基础语法：

直接调用对应的事件方法即可，不需要传入任何参数就是触发，比如点击事件，调用click方法即可
但并不是所有事件都有对应的方法，比如input事件，这个时候就可以通过trigger的方式来触发，直接传入希望触发的事件名就好啦
trigger方法可以触发任意的事件，包括自定义的事件，什么叫做自定义事件呢？顾名思义就是事件名是咱们自己想的，写什么都可以
自定义事件必须通过on的方式来注册，把第一个参数换成自定义的事件名就好啦，同时他也只能通过代码的方式来触发

自定义事件是一种更为高阶的用法，咱们只需要了解基本的用法即可。

// 1. 直接触发
.事件名()
// 2. trigger触发
.trigger('事件名')
// 3. 触发自定义事件
.trigger('自定义事件')
// 4. 注册自定义事件
.on('自定义事件',function(){})

示例代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>触发事件事件处理</title>
    <style>
      body {
        padding: 0 30px 40px;
      }

      p {
        color: #333;
      }
    </style>
  </head>
  <body>
    <!-- 测试用标签 -->
    <button class="btn">按钮</button>
    <br />
    <input type="text" class="text" />
    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <script>
      // 1. 直接触发
      $('.btn').click(function () {
        $(this).css('backgroundColor', 'skyblue')
      })
      //下面这个代码模拟了一个点击
      // $('.btn').click()

      $('.text').on('input', function () {
        console.log('input触发啦！')
      })

      // // 2. trigger触发，也是相当于模拟了事件要执行的行为，比如点击，输入等等
      $('.text').trigger('input')
      $('.btn').trigger('click')

      // 3. 注册自定义事件
      $('.text').on('itheima-input', function () {
        console.log('自定义事件触发！')
      })

      // 4. 触发自定义事件
      $('.text').trigger('itheima-input')
    </script>
  </body>
</html>

trigger方法可以触发所有的事件，但是他的强大之处可不仅于此。对于自定义的事件也是可以触发。

调用click方法是否可以触发点击事件？

可以，只要有方法的事件，都可以用这样的方式来触发
trigger方法只能用来触发原生事件？

不对，自定义事件也是可以触发的
自定义事件，可以通过鼠标点击来触发？

不可以，自定义事件只能通过trigger来触发

15.window事件绑定

如何为window对象绑定事件呢?

用原生的方式为他绑定事件是这样的：直接为window对象对应的事件赋值即可,比如滚动，比如点击

// 滚动
window.onscroll = function () {}
//  点击
window.onclick = function () {}

适用jQ来获取windows对象基础语法

// 滚动
$(window).scroll(function () {})
//  点击
$(window).click(function () {})

$方法中传入什么可以为window绑定事件?

window对象，不用加引号！！！

jQuery第二部分

1.元素位置

jQuery中如何获取元素位置呢?

position和offset都可以获取位置
- 返回的是一个对象
两者获取位置的参照物不同:
- offset始终参照的是html
- position参照的有定位属性的最近祖先元素
对于margin两者的处理也不相同
- offset忽略
- position会累加margin
如果要设置位置的话只能通过offset方法、

总结：

offset方法和position方法哪个参考的是html?

offset方法,position方法参考的是最近并且有定位的祖先元素
offset方法和position方法哪个可以用来设置位置?

offset方法可以设置位置,但是没有动画效果
如果元素有margin哪个方法会一起计算进去呢?

offset会把margin也计算进去,而position不会

2.滚动距离

jQuery中如何获取滚动距离呢?

获取元素滚动距离

//垂直方向移动距离
$('选择器').scrollTop()
//水平方向移动距离
$('选择器').scrollLeft()

获取网页的滚动距离

1 2	$('html').scrollTop() $('html').scrollLeft()

设置滚动距离

1 2	$('html').scrollTop(值) $('html').scrollLeft(值)

小结:

对于内容可以滚动的元素可以通过scrollTop或者scrollLeft获取滚动距离,如何获取网页的滚动距离呢?

把html作为选择器即可

调用scrollTop和scrollLeft方法可以让元素滚到指定位置。

3.jQuery动画

显示&隐藏动画

如何使用jQuery的显示隐藏动画

如何使用show方法

1 2	//显示，参数可以传递持续时间，单位ms $('选择器').show()

如何使用hide方法

1 2	//隐藏，参数可以传递持续时间，单位ms $('选择器').hide()

如何使用toggle方法(可以自动控制显示和隐藏)

1 2	//显示&隐藏，参数可以传递持续时间，单位ms $('选择器').toggle()

方法中的this
动画的持续时间

就是你要传递的参数，单位ms
动画效果
调优demo

动画 - 淡入&淡出

基础语法：

//淡入
$('选择器').fadeIn()
//淡出
$('选择器').fadeOut()
//淡入&淡出，相当于在淡入淡出效果之间切换
$('选择器').fadeToggle()

控制淡入淡出的时长，依旧可以传递时间参数，单位ms

1.淡入淡出效果是通过修改元素的哪个样式实现?
opactity
2.元素的尺寸是否会在淡入淡出的动画过程中一起改变?
不会

动画 - 展开&收起

如何使用slideDown方法
1
2
//展开
$('选择器').slideDown()
如何使用slideUp方法
1
2
//收起
$('选择器').slideUp()
如何使用slideToggle方法，就是在展开和收起直接切换
1
2
//展开&收起
$('选择器').slideToggle()
本质是修改了哪个样式

改变垂直方向上的尺寸
方法中的this
动画的持续时间

传递参数作为持续时间，单位ms
动画效果
demo中使用淡入淡出效果

1.slideDown和slideUp哪一个用来把元素显示出来?
slideDown展开
2.在垂直方向上调整的样式除了高度、margin、还有?
padding

动画 - 队列及停止

通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放

基础语法：

//停止当前动画，继续播放后续的动画效果
$('选择器').stop()
//清空队列 在动画当前状态停止，且不再继续播放后续动画
$('选择器').stop(true)
//清空队列 直接到当前动画的结束状态
$('选择器').stop(true,true)

动画方法和stop方法返回的是同一个jQuery对象

1.队列中动画的播放顺序和添加顺序是否有关系?
有
2.stop方法要清空队列需要传递什么参数?
true
3.传递1个true和传递2个true的区别是?
1个:动画停止在执行stop方法的瞬间
2个:直接到当前播放动画的结束状态

动画-自定义动画

jQuery提供了animate方法来实现更为复杂的动画效果

基本语法：

1	$('选择器').animate(动画属性，持续时间)

数值类样式支持动画,支持多个
默认单位是px
支持非样式的特殊属性
- scrollLeft：水平方向滚动
- scrollTop：垂直方向滚动
持续时间单位是毫秒

4.事件参数

如何使用事件参数呢?

学习jQuery中的事件对象,有时候也称之为事件参数日常开发中使用的频率还行,他在触发事件时为开发者额外提供了一些信息,和功能:比如事件的触发对象,用来阻止冒泡,阻止默认行为什么的.

用法和webapi阶段基本一致

// 语法
$('选择器').事件(function(event){})
// 比如 点击事件
$('选择器').click(function(event){})
// 比如 键盘抬起事件
$('选择器').keyup(function(event){})

示例代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件对象</title>
    <style>
      body {
        padding: 0 30px;
      }

      p {
        color: #333;
      }
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
      }

      input {
        margin: 10px;
      }
      button {
        width: 100%;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <h2>事件对象</h2>
    <p>事件触发时额外提供给开发者的信息,可以用来干不少事情哦</p>
    <div class="box">
      <a href="http://www.baidu.com/">跳转百度</a>
      <input type="text" />
      <br />
      <button>点我</button>
      <br />
    </div>
    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
    </script>
  </body>
</html>

1.最外层盒子绑定点击事件,查看事件触发源，也就是谁触发了事件

$('.box').click(function (event) {
  console.log('event.target:',event.target)
  console.log('box-click')
})

2.阻止a标签的默认行为，比如a标签是跳转了，阻止跳转

1
2
3

$('a').click(function (event) {
  event.preventDefault()
})

3.判断键盘按键

$('input').keyup(function (event) {
  console.log('keyCode:',event.keyCode)
  if (event.keyCode === 13) {
    console.log('按下回车')
  }
})

4.阻止冒泡

$('button').click(function (event) {
  event.stopPropagation()
  console.log('button-click')
})

小结一下

事件对象:

也可以叫做事件参数用法和webapi阶段学习的基本一致
在事件触发时额外传递给开发者中的信息和功能
可以通过它获取触发源,实现阻止默认行为等功能

5.动态添加html

节点 - 新增

在jQuery中如何新增(插入)节点

用法01-基于创建的jQuery对象进行添加

// 基于html创建jQuery对象
let $a = $('<a href="#">超链接</a>')
// 添加jQuery对象
// 在父元素末尾添加
$('选择器').append($a)
// 在父元素开头添加
$('选择器').prepend($a)
// 在兄弟元素之前添加
$('选择器').before($a)
// 在兄弟元素之后添加
$('选择器').after($a)

用法02-直接添加html结构

// 直接添加html结构
// 在父元素末尾添加
$('选择器').append('html结构')
// 在父元素开头添加
$('选择器').prepend('html结构')
// 在兄弟元素之前添加
$('选择器').before('html结构')
// 在兄弟元素之后添加
$('选择器').after('html结构')

小结一下:

append、prepend 以父元素为参考分别在结尾处和开头处添加新的元素节点
after、before 以当前元素为参考在之前或之后插入新的元素节点
append、prepend、after、before 均支持直接将 html 字符串做为节点插入

节点 - 删除

在jQuery中如何删除节点呢?

不同于webapi中需要通过父元素才可以删除自己,jQuery中直接就可以把自己给删掉。

基础语法：

1 2	// 删除自己（删掉html结构） $('选择器').remove();

总结：

remove 方法删除的是当前调用方法的元素节点

节点 - 克隆

jQuery中如何基于现有的节点进行克隆(复制)呢?

jQuery 中封装了复制（克隆）元素节点的方法，其用法如下代码所示：

<script>
    // 通过复制获得新的节点 拷贝事件
  $('选择器').clone(true);
   // 通过复制获得新的节点 不拷贝事件
  $('选择器').clone(false);
</script>

使用方式

// 假设我们有一个需要复制的元素
2var originalElement = $('#someElement');
3
4// 通过复制获得新的节点，并保留事件处理（根据需要选择true或false）
5var clonedElement = originalElement.clone(true);
6
7// 然后你可以将这个复制的元素插入到DOM中的其他位置
8// 例如，将其添加到某个元素的末尾
9$('#targetElement').append(clonedElement);

在这个例子中：

originalElement是我们想要复制的元素，通过ID选择器#someElement选取。
clonedElement变量存储了复制得到的新节点。
使用.append(clonedElement)将复制的节点添加到ID为targetElement的元素内部末尾。

总结：

clone 方法复制得到的元素节点仍是 jQuery 对象
待复制的节点中如果有事件监听，需要为 clone 方法传入参数 true

6.事件委托

jQuery中如何使用事件委托呢?

jQuery 中封装了事件委托的支持，其用法如下代码所示：

// on 方法内置支持事件委托
$('祖先元素').on('事件名', '后代选择器', function () {
 
})

举个例子：

<ul id="myList">
    <!-- 初始时可能有一些列表项，也可能没有 -->
    <li>列表项 1</li>
    <li>列表项 2</li>
</ul>

$(document).ready(function(){
    // 使用事件委托，为 '#myList' 下现在及将来所有的 'li' 元素绑定点击事件
    $('#myList').on('click', 'li', function(){
        alert('你点击了: ' + $(this).text());
        // 这里的 'this' 指向实际触发事件的 li 元素
    });

    // 假设后面动态添加一些 li
    setTimeout(function(){
        $('#myList').append('<li>新增列表项 3</li>');
        $('#myList').append('<li>新增列表项 4</li>');
    }, 2000); // 2秒后添加新项
});

在这个例子中：

'#myList' 是祖先元素，我们在此元素上设置监听器。
'li' 是后代选择器，指定了实际应该响应事件的目标元素。
当用户点击任何现有的或将来动态添加到 #myList 中的 li 元素时，都会触发这个点击事件处理器。
即使是在 setTimeout 函数中动态添加的 li，也会自动拥有点击事件处理功能，因为事件委托是基于当前的及未来的匹配元素来工作的。

总结：

事件委托需要为某个在 DOM 中已经存在的祖先元素添加事件监听
delegate 方法是 jQuery 中专门的事件委托的方法
on 方法中也内置支持事件委托，推荐使用 on 方法

jQuery第三部分

1.入口函数

在jQ中的入口函数咋写呢，类似于window.onload但是不一样。

jQ中的写法
对比window.onload

jQuery 中提供了更为简便的入口函数写法

在我们原生js中：

window.onload的执行时机是页面资源加载完毕，包括dom元素解析完毕，外部的css，图片什么的也需要加载完毕，所以写在他内部的逻辑肯定可以获取到页面上的dom元素。

在jQ中的写法是这样的，基础语法

1	$(windows).on('load',function(){})

jQ还提供了一个ready方法，完整的写法略微有点复杂,调用$方法然后把document传进去接着调用ready方法并传入回调函数,但是这里介绍较为简单的写法，两种写法的功能是一样的。

同样的功能还有一种更为简单的写法，直接在调用$方法的时候传入回调函数即可

基础语法：

//完整写法
$(document).ready(function(){})
//简单写法 
$(function(){})

基于上面的这种写法，它能达到的功能是当dom载入完毕，即调用该函数

下面举一个例子，我们在head标签中写入一个盒子，写在这里如果修改盒子的样式，那么他是不会改变的，因为代码执行的时候dom元素还没加载呢！

下面我们展示用window对象和jQ对象写法

1 2	<!-- 测试元素 --> <div class="box"></div>

//window对象
window.onload = function () {
    $('.box').css('backgroundColor', 'orange')
  }
//jQ的window对象写法
  $(window).on('load', function () {
    $('.box').css('backgroundColor', 'skyblue')
  })


//jQ提供的ready方法
  $(document).ready(function () {
    $('.box').css('backgroundColor', 'pink')
  })
//ready方法的简单写法
  $(function () {
    $('.box').css('backgroundColor', 'deepskyblue')
  })

window.onload和ready哪个先执行

ready，因为ready只需要考虑dom元素加载完成，不需要考虑外部资源
window.onload和ready哪个可以获取图片尺寸

window.onload
开发中用哪个？

看情况讨论

现在js都是在body底部载入，所以代码执行的时候dom元素都已经可以获取到了，这个时候用不用都是可以的。但是代码中如果要确保可以获取到图片的尺寸就需要用window.onload咯

2.轮播图插件–slick

轮播图作为一个非常常见的功能，有很多现成的插件，咱们来学习一下slick

轮播图插件
- 常用的功能封装成插件，直接使用即可
插件的含义用vscode插件讲解
jQuery插件的含义
插件使用套路
调整
- 配置调整
  - 小圆点
  - 箭头
- 样式调整
  - 审查元素找到样式
  - 直接覆盖
小结：
- slick是谁的插件？
  
  jQuery，需要依赖于jQuery才可以执行
- 是否需要把用法和配置背下来？
  
  不需要，随用随查，结合翻译英文也不可怕
- 插件的样式可以调整吗？
  
  可以，直接用自己的样式覆盖默认的样式即可

那么轮播图具体要怎么写呢？

下包：首先把需要使用的插件下载到本地
导包：jQuery的插件需要在jQ的后面导入，因为他依赖jQ，有的插件还需要用到css，根据需求导入就好！
用包：根据文档提供的步骤使用它。

导包：

1
2
3

  <!-- 引入插件所需要的样式表 -->
  <link rel="stylesheet" href="./assets/slick/slick.css">
  <link rel="stylesheet" href="./assets/slick/slick-theme.css">

建议使用插件的时候随查随用

3.懒加载插件 - lazyload

这一节咱们来学习懒加载插件，名字叫做lazyload,作用是让图片的加载变的不那么迅速。从立刻加载变成看到了再去加载，这个功能在图片很多的网页用的较多，比如电商网站,像京东淘宝都有用呢。

既然是插件，那就是下包，导包，用包即可

这里示例导入包的代码

<!-- 先导入jQueery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 再导入lazyload插件 -->
<script src="./assets/jquery.lazyload.min.js"></script>

用该插件的时候，有几个地方需要调整

将src换成data-original

然后通过选择器找到需要进行懒加载的图片，随后调用方法即可

1 2	// 找到希望懒加载的图片并调用lazyload方法 $('.lazyload').lazyload()

使用懒加载插件之后，看不到的图片会不会加载？

不会，看到了才会加载
图片很多的网页用这个可以提升加载速度吗？

可以，因为不会加载所有的图片，数据的传输量更小，在网速不变的情况下，加载的速度肯定会更快一些呢！

4.fullpage插件

fullpage，也是jQ的插件。他可以用来制作咱们平时在手机或者电脑上见过的那种全屏滚动的页面，这一类的页面主要的作用是营销或者推广。

同样三步走，下包，导包，用包

<!-- 导入 fullpage 配套样式 -->
<link rel="stylesheet" href="./fullpage/jquery.fullpage.css" />

<!-- 导入 jQuery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 在 jQuery 之后导入 fullpage 插件 -->
<script src="./fullpage/jquery.fullpage.js"></script>

接下来是他的结构,外层的容器用个有意义的标记就好，比如id或者class都可以，内部就是每一屏的容器啦，每一屏要显示的内容放到对应的盒子里面就好，需要注意的是：每屏都必须有secion这个类名，如果有需求可以额外的添加其他的类名，但是这个必须存在哦

<div id="fullpage">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">第三屏</div>
</div>

最后就是调用fullpage方法

1 2	$('#fullpage').fullpage({ })

fullpage插件在使用的时候一定要传入配置吗？

不一定，不传入任何的配置也有默认的功能
fullpage插件的区域容器一定要添加什么类名？

section，必须有这个类名，但是可以添加额外的类名

5.表单 - 提交事件

示例表单：

<form>
  <input type="text" placeholder="用户名" />
  <br />
  <input type="password" placeholder="密码" />
  <br />
  <input type="submit" value="提交" />
  <button>提交</button>
</form>

绑定提交事件

$('form').submit(function (event) {
  console.log('submit')
  event.preventDefault()
  return false
})

使用场景：在输入完账号或者密码时进行账号密码的校验，已经提示错误等时候，需要弹出提示，这时就需要将表单提交行为的默认时间阻止了即可，然后再写需要的逻辑。

6.插件 - 日期选择器

既然是插件，那就三步走，下包，导包，用包

这里示例：

<!-- 导入日期选择器的样式 -->
<link rel="stylesheet" href="./datepicker/datepicker.css" />

<!-- 导入jQuery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 导入日期选择器插件 -->
<script src="./datepicker/datepicker.js"></script>
<!-- 导入语言包 -->
<script src="./datepicker/i18n/datepicker.zh-CN.js"></script>

使用：

<!-- 准备html结构 -->
<input type="text" class="datapicker" />

  // 调用插件方法
  $('.datapicker').datepicker({
    //设置日期显示中文
    language: 'zh-CN',
  })

设置选择完毕后自动关闭和自动设置

//传入配置项，这里传入了对象
$('.datapicker').datepicker({
    language: 'zh-CN',
    autoPick: true,
    autoHide: true,
  })

插件默认显示的语言是中文还是英文?

英文
为了设置插件的语言为中文，需要导入什么?

中文语言包

7.插件 - 表单验证

如何使用表单验证插件

业务场景：我们在注册的时候，如果用户名不填，或者密码强度不够，或者不勾选用户协议能不能注册呀？对啦，很明显是注册不了的，并且根据错误的不同会有与之对应的提示信息，这就是表单验证的功能。

既然是插件，那就三步走，下包，导包，用包

<!-- 导入jQuery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 导入validate插件 -->
<script src="./jquery-validate/jquery-validate.js"></script>

<input
  type="password"
  name="password"
  data-required
  data-pattern=".{6,}"
/>

引入验证库：首先，确保您已经在项目中包含了所需的表单验证库或插件。这通常通过在HTML头部使用<script>标签或在项目依赖中导入来完成。
使用验证包：在您的JavaScript代码中，引入或创建一个实例来使用这个验证包。这是设置验证功能的基础。
选择表单元素：通过选择器（如jQuery的选择器、Vanilla JS的document.querySelector或类似的API）找到您想要进行验证的表单字段。
调用验证方法：选中表单元素后，调用验证库提供的validate方法。您可以传递多种配置选项，比如：
- 校验时机：指定何时触发验证（如提交时、失焦时等）。
- 表单提交控制：决定是否在验证失败时阻止表单提交。
- 回调函数：分别设置valid和invalid回调，用于处理验证成功或失败的情况。
显示错误信息：若需在页面上展示错误提示，可以通过设置表单元素的description属性或利用验证库提供的方法来实现。这部分内容会稍后详细说明。
定义验证规则：
- 直接在HTML的表单元素上使用自定义属性（如data-required、data-pattern）来指定验证规则。
- data-required表示该字段为必填项。
- data-pattern允许您通过正则表达式定义更复杂的格式要求。例如，data-pattern=".{6,}"意味着该字段至少需要6个字符，且可包含任何字符。
表单结构：确保所有的表单元素都被正确地放置在<form>标签内，这是验证插件能够正常解析和工作的前提条件。

按照以上步骤操作，您就可以轻松地为网页表单添加数据验证逻辑了。记得，正则表达式的复杂度可能需要根据实际情况调整，不必一次性记住所有正则标记，可以逐步学习并应用

接下来介绍属性description

data-describedby：设置的是信息显示的位置
data description：配置的是到底显示什么错误信息，需要和description中的属性对应。

除了这里需要对应，还有data-description也要对应上，比如下面

如果密码内容不填，会显示required的信息，如果填了但是不符合条件会线序pattern的信息

完整代码：

<!DOCTYPE html>
<html lang="zh">
  <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>10-表单验证</title>
    <style>
      body {
        padding: 0 30px;
      }

      p {
        color: #333;
      }

      ul {
        padding: 0;
        list-style: none;
      }

      li {
        margin: 10px 0;
      }
      span.error {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 测试用标签 -->
    <form action="">
      <ul>
        <li>
          昵称:
          <input
            data-required
            data-describedby="nickname-error"
            data-description="nickname"
            type="text"
            name="nickname"
          />
          <span class="error" id="nickname-error"></span>
        </li>
        <li>
          密码:
          <input
            data-required
            data-pattern=".{6,}"
            data-describedby="password-error"
            data-description="password"
            type="password"
            name="password"
          />
          <span class="error" id="password-error"></span>
        </li>
        <li>
          <label>
            <input
              data-required
              data-describedby="agree-error"
              data-description="agree"
              type="checkbox"
              value="true"
              name="agree"
            />
            同意注册协议
          </label>
          <span class="error" id="agree-error"></span>
        </li>
        <li>
          <button class="btn">提交</button>
        </li>
      </ul>
    </form>
    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <!-- 导入 validate插件 -->
    <script src="./jquery-validate/jquery-validate.js"></script>
    <script>
      $('form').validate({
        sendForm: false,
        description: {
          password: {
            required: '密码不能为空!',
            pattern: '密码的长度必须大于等于6!'
          },
          nickname: {
            required: '昵称不能为空!'
          },
          agree: {
            required: '必须同意用户协议!'
          }
        },
        valid () {
          console.log('验证成功')
        },
        invalid () {
          console.log('验证失败')
        }
      })
    </script>
  </body>
</html>

8.克隆

学习jQuery中的克隆方法，他可以直接把一个jQuery对象拷贝一份，用法非常简单，直接调用clone方法即可，不需要传递任何参数就可以拷贝，如果希望连事件一起拷贝可以传入参数true.

返回的依旧是jQ对象

基本语法：

1 2	//如果希望克隆时能够连带被克隆对象的事件。这里传入true参数，反正不需要克隆事件，则不传递参数即可 $('选择器(要克隆的对象)').clone();

克隆方法得到的是什么对象？

jQuery对象
希望事件一起克隆需要传递什么参数?

true

9.获取dom对象

jQ提供了很多便捷的方法，但是有些方法只有dom对象才有，如何将jQ对象转为dom对象呢？

调用get方法传入索引。

二种是通过中括号的方式传入索引，索引是从0开始，获取到的都是dom对象，可以直接使用dom对象的那些方法

语法：

// get方法获取
.get(索引)
// 中括号获取
[索引]

示例代码：

<!DOCTYPE html>
<html lang="zh">
  <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>12-获取dom对象</title>
    <style>
      p {
        color: #333;
      }
      video {
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 测试标签 播放器 -->
    <button class="play">播放</button>
    <button class="pause">暂停</button>
    <br />
    <video src="./video/video.mp4"></video>
    <!-- 测试标签 form -->
    <form action="">
      <input type="text" placeholder="请输入用户名" />
      <br />
      <input type="password" placeholder="请输入密码" />
      <br />
      <input type="button" class="reset" value="重置" />
    </form>
    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <script>
      // 1.get方法获取dom对象
      let $btn = $('button')
      console.log('$btn:', $btn)
      let pauseBtn = $btn.get(1)
      console.log('pauseBtn:', pauseBtn)

      // 2. 中括号获取dom对象
      let playBtn = $btn[0]
      console.log('playBtn:', playBtn)

      // 3. 播放视频
      $('.play').click(function () {
          
          //方式1
         $('video').trigger('play')
          
          //方式1
        let video = $('video')[0]
        console.log('video:', video)
        video.play()
      })

      // 4. 暂停视频
      $('.pause').click(function () {
          
          //方式1
         $('video').trigger('pause')
          
          //方式2
        let video = $('video')[0]
        
        console.log('video:', video)
        video.pause()
      })

      // 5. 重置表单
      $('.reset').click(function () {
          
    //方式1
         $('form').trigger('reset')
          
      //方式2
        let form = $('form')[0]
        console.log('form:', form)
        form.reset()
      })
    </script>
  </body>
</html>

可以使用 [] 还有一个什么方法来获取dom对象？

get方法
索引从几开始?

从0开始

10.表单 - 序列化(快速获取form表单元素的value值)

方法的名字叫做serialize，首先获取到form标签，然后就可以调用啦，他是一个jQ的方法，为了能够正常获取数据需要为表单元素设置name属性，否则可是拿不到的哦。

获取到的是一个字符串，格式很有规律 name1=value1&name2=value2

基础语法：

<script>
  $('form').submit(function () {
     //基础用法
    let data = $(this).serialize()
    console.log('data:', data)
    return false
  })
</script>

serialize方法要能够获取到value值，表单元素要有什么属性?

name属性
获取到的数据是什么格式?(对象，字符串)

字符串，key=value&key2=value的格式，目前掌握语法即可，在之后的课程中会用到这个方法呢

11.工具方法

$.each遍历数组，第一个参数传入数组，然后传入回调函数，数组有几项回调函数就会执行几次，每次遍历的时候会把数组的内容传递给回调函数，回调函数的第一个参数是数组的每一项，第二个参数是下标，我们就可以在回调函数里面获取并使用这些数据啦。

还可以通过$.map来基于现有数组生成新的数组，用法和each类似，但是在回调函数里面可以返回一个值，每次执行返回的结果最终会被放到一个新增数组中。

// 遍历数组
$.each(数组, function (item, index) {})
// 遍历并返回新数组
$.map(数组,function(item,index){
  // 返回新的值
})

了解即可。