jQuery

燕宜修

2023-12-01

jQuery

一、jQuery介绍

JavaScript类库（js文件）
封装了很多简单易用的方法（浏览器兼容）
绝大多数用来简化DOM操作
提升开发效率

1. 选择器

jQuery中通过选择器来获取DOM节点，功能类型与原生的querySelectorAll方法，支持的选择器与CSS的选择器几乎一致

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery 选择器</title>
    <style>
      body {
        padding: 0 30px;
      }

      p {
        color: #333;
      }
    </style>
  </head>
  <body>
    <h3>04-jQuery <span>选择器</span></h3>
    <p>
      jQuery 中的选择器是用来获取 DOM 节点的，其功能类似于原生的
      querySelectorAll 方法，jQuery 中所支持的选择器与 CSS 的选择器几乎一致。
    </p>
    <p>jQuery 封装了大量 DOM 操作的方法，极大的提升了开发效率！</p>
    <p class="p">jQuery 的口号是 <span>Write Less Do More!</span></p>
    <p id="p">jQuery 内部对浏览器之间的兼容也做了相关的处理。</p>
    <!-- 导入 jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <script>
      // 1. 标签选择器
      $('p').css('backgroundColor','pink')
      // 2. 类选择器
     $('.p').css('backgroundColor','skyblue')
      // 3. id选择器
     $('#p').css('backgroundColor','orange')
      // 4. 后代选择器
      $('p span').css('backgroundColor','red')
    </script>
  </body>
</html>

2. jQuery对象

jQuery中利用选择器获取到并非原生的DOM对象，而是jQuery对象

语法：

 // 1. 打印dom和jQ对象的区别
      let li = document.querySelector('li')
      console.log(li);
      let $li = $('li')
      console.log($li);
      // 2. jQ对象的方法
     $li.css('backgroundColor','hotpink')

      // 3. 混着用(只是测试而已)
      // li.css('backgroundColor', 'skyblue')

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

jQuery对象和DOM对象的语法不同混用

3. 事件绑定

在jQuery中以原生事件类型的名称为依据，封装了相对应的事件处理方法

语法：

$('选择器').click(function () {
    // 逻辑...
})

 // 1.为 li 添加点击事件
     $('li').click(function () {
      console.log('click');
      console.log(this);
      let $this = $(this)
      $this.css('backgroundColor','pink')
     })

      // 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')
      })

4. 链式编程

链式编程通过点(.)把多个操作（方法）连续的写下去，形式和链子一样的结构

语法：

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

// 2. 使用链式编程一次性绑定 获得焦点 失去焦点 内容改变事件
      $('.text')
      .focus(function() {
        console.log('获得焦点');
      })
      .blur(function() {
        console.log('失去焦点');
      })
      .change(function() {
        console.log('内容改变');
      })
// 3. 测试jQuery方法的返回值
       let $test = $('.test')
       let $test2 = $test.focus(function () {
         console.log('获得焦点')
       })

       console.log($test === $test2)

二、jQuery常用API

1. 内容操纵

jQuery中封装了设置和读取率网页元素文本内容的方法

语法：

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

 //  1. 设置普通文本
       $('.box1').html('黑马程序员')
       $('.box2').text('黑马程序员')

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

      // 3. 取值
      let boxHtml = $('.box1').html()
      let boxText = $('.box1').text()
      console.log(boxHtml);
      console.log(boxText);
      // 4. 链式编程
      let $box = $('.box1')
      $box.html('<a href="#">传智教育</a>').click(function(){
        console.log('黑马程序员');
      })

设置时：html方法解析标签，text不解析标签
取值时：html方法获取标签，text只获取文本
有一种使用方式支持链式编程

2. 计数器

<!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>计数器</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <!-- html结构 -->
    <div id="app">
      <!-- 计数器功能区域 -->
      <div class="input-num">
        <!-- 减号 -->
        <button>
          -
        </button>
        <!-- 内容 -->
        <span>0</span>
        <!-- 加号 -->
        <button>
          +
        </button>
      </div>
      <img src="http://www.itheima.com/images/logo.png" alt="" />
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <!-- 编码 -->
    <script>
      // 递减
     $('.input-num button:first-child').click(function() {
     // console.log('递减');
     let num = $('.input-num span').text()
     if(num > 0){
      num--
      $('.input-num span').text(num)
     } else {
      alert('别点了,到底了！')
      return
     }
     })
      // 累加
     $('.input-num button:last-child').click(function() {
     // console.log('累加');
     let num = $('.input-num span').text()
     if(num < 10) {
      num++
      $('.input-num span').text(num)
     } else {
      alert('别点了,到顶了')
      return
     }
     })
    </script>
  </body>
</html>

3. 过滤方法

jQuery中封装了过滤方法，对jQuery对象中的dom元素再次筛选

// 匹配的第一个元素
.first()
// 匹配的最后一个元素
.last()
// 根据索引匹配
.eq(索引)

注意：

eq方法的索引从0开始
返回的是jQuery对象

4. 样式操纵

jQuery中对样式的操作进行封装，可以设置或者获取样式

// 1. 键值对设置
.css('样式名','值')
.css('backgroundCOlor','pink')
.css('color','red')
.css('width','200px')
.css('height','200')

数值类的样式省略单位，默认会使用px
获取样式需要传递样式名

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>11-样式操纵</title>
    <style>
      body {
        padding: 0 30px;
      }

      p {
        color: #333;
      }
      div {
        width: 200px;
        height: 200px;
        margin-top: 20px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <h3>11-样式操纵</h3>
    <p>css可以获取及设置元素样式,设置的是行内样式</p>
    <!-- 测试用的盒子 -->
    <div class="box"></div>
    <!-- 引入 jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <script>
      // 1. 键值对设置
     $('.box').css('backgroundColor','pink')
     $('.box').css('border','10px solid orange')
     $('.box').css('width',250)
     $('.box').css('height',250)
      // 2. 对象方式设置
      $('.box').css({
        backgroundColor: 'skyblue',
        border: '10px solid yellowgreen',
        width: 100,
        height: 100
      })

      // 3. 样式获取
     let width = $('.box').css('width')
     console.log(width);
    </script>
  </body>
</html>

5. 属性操纵

jQuery中对属性的操作进行封装，可以设置、获取和删除属性

语法：

// 1.赋值
.attr('属性名','值')
// 2. 取值
.attr('属性名')
// 3. 删除属性
.removeAttr('属性名')

 // 1. 赋值
      $('a').attr('href','http://www.itheima.com')
      $('img').attr('src','http://www.itheima.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')

6.图片切换

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

  <body>
    <div id="mask">
      <div class="center">
        <!-- 顶部logo -->
        <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>
    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
      // 1.箭头缩放
      $('.center a')
      .mouseenter(function() {
        $(this).css('transform','scale(1.1')
      })
      .mouseleave(function() {
        $(this).css('transform','scale(1)')
      })
      // 2. 图片切换
      $('.left').css('display','none')
      let index = 1
      $('.right').click(function() {
        index++
        $('.cover').attr('src',`./images/${index}.png`)
        if(index === 5){
          $(this).css('display','none')
        }
        $('.left').css('display','block')
      })
      $('.left').click(function() {
        index--
        $('.cover').attr('src',`./images/${index}.png`)
        if(index === 1) {
          $(this).css('display','none')
        }
        $('.right').css('display','block')
      })
    </script>
  </body>
</html>

7. 操纵value

jQuery中封装了操纵表单元素value属性的方法,可以取值和赋值

语法：

// 1. 赋值
.val('参数')
// 2. 取值
.val()

 // 1. 赋值
      $('.text').val('黑马程序员')
      // 2. 取值
      $('.text').blur(function() {
        let value = $(this).val()
        console.log(value);
      })

8. 查找方法

jQuery中封装了查找元素的方法，可以基于元素的结构关系查找新的元素

//1.父元素
.parent()
//2.子元素
.children('选择器')
//3.兄弟元素
.siblings('选择器')
//4.后代元素
.find('选择器')

   // 1. 父元素 parent
      $('.course')
      .parent()
      .css('backgroundColor','pink')

      // 2. 子元素 children
      $('.course')
      .children()
      .css('backgroundColor','skyblue')
      $('.campus')
      .children('.bj')
      .css('backgroundColor','pink')

      // 3.  兄弟元素 siblings
      $('.sh')
      .siblings()
      .css('color','red')
      $('.sh')
      .siblings('.sz')
      .css('backgroundColor','yellowgreen')

      // 4. 后代元素 find
      $('.container')
      .find('h4')
      .css('backgroundColor','yellowgreen')
      $('.container')
      .find('li')
      .css('border','10px solid orange')

find方法方法需要传入选择器
children,sibings方法支持传入选择器

9. 操纵类名

jQuery中封装了为网页元素添加、移除、检测、切换类名的方法

语法：

//1.添加类名
.addClass('类名')
//2.移除类名
.removeClass('类名')
//3.判断类名 返回布尔值
.hasClass('类名')

// 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('red:',res);
     })

      // 4. 切换类名
    $('.toggle').click(function() {
      $('.test').toggleClass('active')
    })

10. 事件进阶

jQuery封装了更多灵活的on /off、one方法处理DOM事件

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

 // 1. 注册事件 on
     $('.onoff').on('focus',function(){
      console.log('获取焦点');
     })
     .on('blur',function() {
      console.log('失去焦点');
     })
     .on('input',function() {
      let value = $(this).val()
      console.log('value:',value);
     })
      // 2. 移除指定事件 off
        $('.onoff').off('input')
      // 3. 移除所有事件 off
        $('.onoff').off()
      // 4. 注册一次性事件 one
        $('.one').one('click',function(){
          alert('支付成功！')
        })

on,one方法回调函数中的this是触发事件的dom元素

三、综合案例（输入统计）

// 1. 高亮效果
      $('.input-box textarea')
      .focus(function() {
        $(this)
        .parent()
        .addClass('actived')
      })
      .blur(function() {
        $(this)
        .parent()
        .removeClass('actived')
      })
      //2. 字数统计
      $('.input-box textarea').on('input',function() {
       // $('.words span').html(($(this).val()).length)
       // 优化
       let length = $(this).val().length
        $('.words span').text(length)
       if(length === 0){
        $('.publish_btn').addClass('disabled')
       } else {
        $('.publish_btn').removeClass('disabled')
       }
      })
      // 3. 发布微博
      $('.publish_btn').click(function() {
        let length = $('.input-box textarea').val().length
         if(length === 0){
          alert('发布内容不能为空！')
          return
         }      
        $('.words span').html(0)
        $('.input-box textarea').val('')
        $('.publish_btn').addClass('disabled')
        
      })

四、登陆切换案例

1. 触发事件

jQuery中如何通过代码的方式触发绑定事件

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

// 1. 直接触发
      $('.btn').click(function(){
        $(this).css('backgroundColor','skyblue')
      })
      $('.text').on('input',function(){
        console.log('input触发了');
      })
      // 2. trigger触发
      $('.btn').trigger('click')
      $('.text').trigger('.input')
      // 3. 注册自定义事件
      $('.text').on('it-input',function() {
        console.log('自定义事件触发了');
      })

      // 4. 触发自定义事件
      $('.text').trigger('it-input')

2. 登陆切换案例

// 账号登录 安全登录切换
     $('.label').click(function() {
      $(this).addClass('active')
      $(this).siblings().removeClass('active')
      let id = $(this).attr('data-label')
      $(id).css('display','block')
      $(id).siblings().css('display','none')
     })
      // 图标 和 安全登录切换
     $('.icon').click(function() {
      let isActive = $(this).hasClass('active')
      if(isActive){
        $('.label').last().click()
      } else {
        $(this).addClass('active').siblings().removeClass('active')
        let label = $(this).attr('data-label')
        $(label).css('display','block').siblings().css('display','none')
      }
     })

3. Window事件绑定

使用jQuery为Window对象绑定事件

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

五、jQuery动画

1. 获取位置

通过jQuery直接获取元素的位置

//取值
$('选择器').offset()
//取值
$('选择器').position()
//返回值
{top:126,left:58}

参照物不同

offset参照html标签
position参照离他最近有定位的祖先元素

margin

offset会把外边距margin计算进去
position以外边距margin为边界,不计算margin

2. 滚动距离

通过jQuery获取元素的滚动距离

语法：

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

 // 1.获取 页面 滚动距离
     $('.html-get').click(function() {
      let top = $('html').scrollTop()
      console.log('top:',top);
      let left = $('html').scrollLeft()
      console.log('left:',left);
     })

      // 2.设置 页面 滚动距离
     $('.html-set').click(function() {
      $('html').scrollTop(100)
      $('html').scrollLeft(100)
     })

      // 3.获取 box 滚动距离
      $('.box-get').click(function() {
        let top = $('.box').scrollTop()
        console.log('top:',top);
        let left = $('.box').scrollLeft()
        console.log('left:',left);
      })
      // 4.设置 box 滚动距离
     $('.box-set').click(function() {
      $('.box').scrollTop(100)
      $('.box').scrollLeft(100)
     })

3.显示&隐藏动画

通过jQuery以动画的方式切换元素的显示&隐藏

语法：

//显示
$('选择器').show(持续时间)
//隐藏
$('选择器').hide(持续时间)
//显示*隐藏
$('选择器').toggle(持续时间)

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>05-显示&隐藏动画</title>
    <style>
      body {
        padding: 0 30px;
      }

      p {
        color: #333;
      }

      .box {
        width: 200px;
        height: 100px;
        margin-top: 20px;
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <h3>显示&隐藏</h3>
    <p>jQuery 中封装了元素显示/隐藏的快捷操作，并且支持动画形式的交互效果。</p>

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

    <div class="box"></div>

    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
      // 1.show方法
     $('.show').click(function() {
      $('.box').show(1000)
     })
      // 2.hide方法
     $('.hide').click(function() {
      $('.box').hide(1000)
     })
      // 3.toggle方法
     $('.toggle').click(function() {
      $('.box').toggle(2000)
     })      
    </script>
  </body>
</html>

4. 淡入&淡出动画

通过jQuery以淡入&淡出的方式切换元素的显示隐藏

语法：

//淡入
$('选择器').fadeIn(持续时间)
//淡出
$('选择器').fadeOut(持续时间)
//淡入&淡出
$('选择器').fadeToggle(持续时间)

 // 1.fadeIn 淡入
      $('.fade-in').click(function() {
        $('.box').fadeIn(2000)
      })
      // 2.fadeOut 淡出
      $('.fade-out').click(function() {
        $('.box').fadeOut(2000)
      })

      // 3.fadeToggle 淡入&淡出
      $('.fade-toggle').click(function() {
        $('.box').fadeToggle(2000)
      })

毫秒为单位

5. 展开&收起动画

通过jQuery以展开（高度增加-显示）&收起(高度减少-隐藏)的方式切换元素的显示隐藏

语法：

//展开
$('选择器').slideDown(持续时间)
//收起
$('选择器').slideUp(持续时间)
//展开&收起
$('选择器').slideToggle(持续时间)

 // 1.slideDown展开
     $('.slide-down').click(function() {
      $('.box').slideDown(3000)
     })

      // 2.slideUp收起
      $('.slide-up').click(function() {
        $('.box').slideUp(3000)
      })
      // 3.slideToggle展开&收起
     $('.slide-toggle').click(function() {
      $('.box').slideToggle(3000)
     })

毫秒为单位

6. 动画队列及停止方法

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

语法：

//停止当前动画
$('选择器').stop()
//清空队列，在动画当前状态停止
$('选择器').stop(true)
//清空队列直接到当前动画的结束状态
$('选择器').stop(true,true)

 // 1.添加动画
     $('.add').click(function() {
      $('.box')
      .slideUp(4000)
      .slideDown(4000)
      .hide(4000)
      .show(4000)
     })
      // 2.不传递参数 stop()
     $('.stop').click(function() {
      $('.box').stop()
     })
      // 3.传递1个true stop(true)
     $('.stop2').click(function() {
      $('.box').stop(true)
     })
      // 4.传递2个true stop(true,true)
     $('.stop3').click(function() {
      $('.box').stop(true,true)
     })

动画方法和stop方法返回的是同一个jQuery对象（链式编程）

7.自定义动画

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

语法：

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

 $('.gotop').click(function() {
        $('html').animate({
          scrollTop: 0
        })
      })

注意：

数值类样式支持动画，支持多个
默认单位是px
支持非样式的特殊属性

六、综合案例（爱旅行）

1. 插入节点

jQuery中封装了在指定位置动态插入元素节点的方法，可以插入节点或者改变节点位置

语法：

//4个方法参数一样  位置不同
$('父元素选择器').append(参数) // 父元素结尾
$('父元素选择器').prepend(参数) // 父元素开头
$('兄弟元素选择器').before(参数) // 兄弟元素前面
$('兄弟元素选择器').after(参数) // 兄弟元后面

 // 1.父元素结尾插入节点
     $('.insert .append').click(function() {
      // html结构
      $('.container').append('<img src="./img/旺财.jpg" alt="">')
     })

      // 2.父元素开头插入节点
      $('.insert .prepend').click(function () {
        // html结构
        $('.container').prepend('<img src="./img/旺财.jpg" alt="">')
      })

      // 3.兄弟元素前插入节点
      $('.insert .before').click(function () {
        // html结构
        $('.Teemo').before('<img src="./img/旺财.jpg" alt="">')
      })

      // 4.兄弟元素后插入节点
      $('.insert .after').click(function () {
        // html结构
        $('.Teemo').after('<img src="./img/旺财.jpg" alt="">')
      })

      // 5.移动到父元素结尾
      $('.move .append').click(function () {
        // dom元素
        // $('.container').append(document.querySelector('.doge'))
        // jQuery对象
        $('.container').append($('.doge'))
      })
      // 6.移动到父元素开头
      $('.move .prepend').click(function () {
        // jQuery对象
        $('.container').prepend($('.doge'))
      })

      // 7.移动到兄弟元素前面
      $('.move .before').click(function () {
        // jQuery对象
        $('.Teemo').before($('.doge'))
      })

      // 8.移动到兄弟元素后面
      $('.move .after').click(function () {
        // jQuery对象
        $('.Teemo').after($('.doge'))
      })

插入节点：传入创建的dom元素或者html结构
改变位置：传入现有的dom元素或者jQuery对象

2. 动画回调函数

所有的jQuery动画方法都支持传入的回调函数

语法：

$('选择器').基础动画方法(回调函数)
$('选择器').基础动画方法(持续时间,回调函数)
$('选择器').animate(属性,回调函数)
$('选择器').animate(属性,持续时间,回调函数)

// 1.简单动画的回调函数
      $('.simple').click(function() {
        $('.box').fadeOut(2000,function() {
          console.log('淡出了');
          console.log('this:',this);
        })
      })
      // 2.自定义动画的回调函数
      $('.animate').click(function() {
        $('.box').animate({
          width:300,
          height:200
        },function() {
          console.log('变大了');
          console.log('this:',this);
          $(this).css({
            backgroundColor:'pink'
          })
        })
      })

回调函数会在动画执行完毕时立刻执行
回调函数中的this是执行动画的dom元素

3. 动画的延迟方法

jQuery不仅可以设置动画执行的高度，还能在动画执行前设置一定的延时

语法：

$('选择器').delay(延迟时间).动画方法()

 $('.animate').click(function () {
        $('.box')
            .delay(2000)
            .fadeOut()
            .delay(2000)
            .slideDown()
    })

4. 获取高度

jQuery对获取元素尺寸进行了封装，使得在不同场景中获取元素尺寸十分方便

语法：

$('选择器').width() // 内容宽度
$('选择器').height() // 内容高度
$('选择器').innerWidth() // 内容宽度 + 内边距
$('选择器').innerHeight() // 内容高度 + 内边距
$('选择器').outerWidth() // 内容宽度 + 内边距 + 边框
$('选择器').outerHeight() // 内容高度 + 内边距 + 边框
$('选择器').outerWidth(true)// 内容宽度 + 内边距 + 边框 + 外边距
$('选择器').outerHeight(true)//内容高度 + 内边距 + 边框 + 外边距

// 1.获取元素内容区域大小
    $('.content').click(function () {
        let width = $('.box').width()
        let height = $('.box').height()
        console.log('width:',width)
        console.log('height:',height)
    })
    // 2.获取元素内容区域 + 内边距大小
    $('.padding').click(function () {
        let width = $('.box').innerWidth()
        let height = $('.box').innerHeight()
        console.log('innerWidth：',width)
        console.log('innerHeight：',height)
    })
    // 3.获取元素内容区域 + 内边距 + 边框大小
    $('.border').click(function () {
        let width = $('.box').outerWidth()
        let height = $('.box').outerHeight()
        console.log('outerWidth:',width)
        console.log('outerHeight:',height)
    })
    // 4.获取元素内容区域 + 内边距 + 边框 + 外边距大小
    $('.margin').click(function () {
        let width = $('.box').outerWidth(true)
        let height = $('.box').outerHeight(true)
        console.log('outerWidth(true):',width)
        console.log('outerHeight(true):',height)
    })

七、事件委托和Notebook案例

1. 事件参数

jQuery绑定的事件中可以获取事件参数（事件对象）,用法和原生JS完全一致

语法：

//没定义事件参数
$('选择器').事件(function(){
    
})
//定义了事件参数
$('选择器').事件(function(e){
    e.stopPropagation()
})

 // 1. 事件触发对象
     $('.outer').click(function(e) {
      console.log('outer-click');
     })
      // 2. 阻止冒泡
    $('.box').click(function(e) {
      console.log('outer-click');
      e.stopPropagation()
    })
      // 3. 阻止默认行为
    $('a').click(function(e){
      e.preventDefault()
    })
      // 4. 判断键盘按键
    $('input').keyup(function(e) {
      console.log(e.keyCode);
      if(e.keyCode === 13) {
        alert('您按下了回车')
      }
    })

jQuery已经处理了事件参数和兼容性

2. 删除节点

jQuery中封装了动态删除元素节点的方法

语法：

jQuery对象.remove()

 // 1.删除自己
      $('.remove').click(function() {
        $(this).remove()
      })
      // 2.删除父元素
     $('.remove-box').click(function() {
      $(this).parent().remove()
     })

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

3.事件委托

jQuery中封装了事件委托的支持，直接通过on方法即可使用

语法：

//直接绑定
$('选择器').on('事件名',function9{})
//事件委托
$('祖先选择器').on('事件名','后代选择器',function() {})

 $('.box').on('click','.dog',function() {
      $(this).remove()
     })
      // 2.新增后代元素的事件绑定
    $('.add').click(function() {
      $('.box').append(`<img class = "doge" src = "./img/旺财2.jpg" alt = "">`)
    })
    $('.box').on('click','.dege',function() {
      $(this).remove()
    })
      // 3.原理是事件冒泡
    $('.dog').click(e => {
      e.stopPropagation()
    })

减少时间注册
解决动态增加后代元素的时间绑定问题
原理是事件冒泡
回到函数中的this是触发事件的dom对象

4. 综合案例（记事本）

;(function () {
  //1. 新增
  $('#addTodo').keyup(function(e){
    // 判断
    if(e.keyCode === 13) {
      let value = $(this).val()
      if(value !== '') {
        $('#todoList').append(`
        <li style = "display : none">
            <div class="view">
              <label>${value}</label>
              <button class="destroy"></button>
            </div>
          </li>
        `)
        $('#todoList li').last().slideDown(function() {
          count()
        })
      }
      $(this).val('')
    }
  })
  //2. 删除
  $('#todoList').on('click','.destroy',function() {
    let $li = $(this).parent().parent()
    $li.fadeOut(function(){
      $(this).remove()
      count()
    })
  })
  //3. 统计条数
  function count () {
    $('.todo-count strong').html($('#todoList li').length)
  }
})()

八、jQuery常用插件

1. 入口函数

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

语法：

// 原生写法：
window.onload = function() {
    
}
//JQ写法：
$(window).on('load',function(){
    
})

页面资源加载完毕执行（包括图片、css等等）逻辑代码

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

DOM载入完毕就会执行

// 0. 直接修改背景色(错误演示)
       $('.box').css('backgroundColor','orange')

      // 1. onload原始写法
       window.addEventListener('load',() => {
         $('.box').css('backgroundColor','orange')
       })

      // 2. onload结合jQ
       $(window).on('load',function(){
         $('.box').css('backgroundColor','pink')
       })

       //3. ready完整写法
         $(document).ready(function() {
         $('.box').css('backgroundColor','orange')
        })

       //4. ready简化写法
       $(function(){
         $('.box').css('backgroundColor','skyblue')
       })

       //5. onload 和 ready的执行先后
      $(window).on('load',function(){
        console.log('load');
      })
      $(function () {
        console.log('ready');
      })

2. 轮播图插件slick

jQuery的轮播图插件slick

下包：把插件下载到本地
导包：先导入jQuery，再导入插件，导入CSS（需要的话）
用包：根据文档（说明书）使用

(1) 导包

语法：

<!--引入插件所需要的样式表-->
<link rel="stylesheet" href="./slick/slick.css" />
<link rel="stylesheet" href="./slick/slick-theme.css" />
<!--先导入jQuery-->
 <script src="./jquery/jquery-3.5.1.js"></script>
<!--在jQuery之后引入插件-->
 <script src="./slick/slick.js"></script>

（2）用包

语法:

<div class ="your-class">
    <div>
        轮播图元素一
    </div>
    <div>
        轮播图元素二
    </div>
    <div>
        轮播图元素三
    </div>
</div>

$('.your-class').slick({
    autoplay:true,
    arrows:false,
    dots:true
})

常用配置	含义	默认值	备注
autoplay	轮播图效果自动执行	false	true / false
arrows	是否显示翻页按钮	true	true / false
prevArrow	自定义上一页按钮	无	标签选择器
nextArrow	指定以下一页按钮	无	标签选择器
dots	是否显示指示器	false	true / false

默认样式不符合需求直接添加CSS覆盖
更多的配置参数可以查阅官方文档: https://github.com/kenwheeler /slick

3.懒加载插件

jQuery的懒加载插件lazyload

懒加载：图片用到了再去加载，常见于有大量图片的网页，比如电商

下包：把插件下载到本地
导包：先导入jQuery，再导入插件，导入CSS（需要的话）
用包：根据文档（说明书）使用

(1) 用包

语法：

<!--图片-->
<img class="lazyload" data-original="./images/1.png" alt=""/>

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

 <h3>04-懒加载插件</h3>
    <p>懒加载插件，用到了再去加载</p>
    <!-- 测试标签 -->
    <div class="wall"></div>
    <!-- 图片 -->
    <img class="lazyload" data-original="./images/1.png" alt="" />
    <img class="lazyload" data-original="./images/2.png" alt="" />
    <!-- 先导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <!-- 导入lazyload插件 -->
    <script src="./lazyload/jquery.lazyload.js"></script>
    <script>
      $('.lazyload').lazyload()
    </script>

4. 全屏滚动

jQuery的全屏滚动插件fullpage

下包：把插件下载到本地
导包：先导入jQuery，再导入插件，导入CSS（需要的话）
用包：根据文档（说明书）使用

语法：

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

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

常用配置	含义	默认值	备注
navigation	是否显示导航	false	true / false
navigationPosition	导航位置	right	left / right
anchors	每个区域的锚链接名	[ ]	在地址栏
afterLoad	区域加载完毕的回调函数，有2个参数	无	参数：锚链接、索引

 // 整合全屏滚动效果
  $('#fullpage').fullpage({
    afterLoad(anchor, index) {
      console.log('afterLoad')
      console.log('anchor:', anchor)
      console.log('index:', index)
      $('.section').removeClass('current')
      setTimeout(function () {
        $('.section')
          .eq(index - 1)
          .addClass('current')
      }, 100)
    },
  })

5. 提交事件

form标签本身具有提交数据的能力，但是现在基本不这么用

测试结构：

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

点击提交按钮，输入区域点击回车都会触发表单提交
表单中的button默认就是提交按钮

现在比较流行在表单的submit事件中阻止默认行为，直接获取数据并提交

测试结构：

$('form').submit(function(e)) {
// 阻止默认行为
e.preventDefault()
//阻止默认行为
return false
 }

6. 日期选择器

jQuery的日期选择器插件datepicker,让用户在不同的浏览器下可以用一致的方式来选择日期

下包：把插件下载到本地
导包：先导入jQuery，再导入插件，导入CSS（需要的话）
用包：根据文档（说明书）使用

语法：

 <!-- 导入日期选择器的样式 -->
<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({
    
})

常用配置	含义	默认值	备注
autoPick	是否自动选择当前日期	false	true / false
autoHide	选择日期之后是否自动关闭	false	true / false
language	语言模式	空	需要结果语言包使用

  $('.datepicker').datepicker({
        language: 'zh-CN',
        autoPick: true,
        autoHide: true,
      })

7.表单验证

jQuery的表单验证插件validate,验证用户在表单中输入内容

下包：把插件下载到本地
导包：先导入jQuery，再导入插件，导入CSS（需要的话）
用包：根据文档（说明书）使用

（1）导包

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

（2）用包

$('form').validate({
    // 配置
})

常用配置	含义	默认值	备注
onBlur	失去焦点时验证	false	true / false
onSubmit	提交表单时验证	true	true / fasle
sendForm	是否提交表单	true	true / false
valid	所有表单项验证通过执行的回调函数	无	this是JQ对象
invalid	至少一个表单项为通过验证时执行的回调函数	无	this是JQ对象
description	错误提示信息	无	Object

自定义属性	含义	备注
data-required	验证表单项不能为空	不需要值
data-pattern	基于正则表达式验证	正则表达式
data-describedby	指定显示错误信息的标签	标签的id
data-description	指定错误信息的内容	和description中的属性对应

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

表单元素要放在form里面

 $('form').validate({
        sendForm: false,
        description: {
          password: {
            required: '密码不能为空!',
            pattern: '密码的长度必须大于等于6!'
          },
          nickname: {
            required: '昵称不能为空!'
          },
          agree: {
            required: '必须同意用户协议!'
          }
        },
        valid () {
          console.log('验证成功')
        },
        invalid () {
          console.log('验证失败')
        }
      })

8. 克隆

jQuery中封装了克隆（复制），节点的方法

语法：

// 不带事件
.clone()
// 带事件
.clone(true)

// 1. 为box中的按钮绑定事件: 把box的背景色变成黄绿色
     $('.box button').click(function() {
      $(this).parent().css('backgroundColor','yellowgreen')
     })
      // 2. 普通克隆
      $('.clone').click(function() {
        let $clone = $('.box').first().clone()
        $('body').append($clone)
      })
      // 3. 和事件一起克隆
      $('.deep-clone').click(function() {
        let $clone = $('.box').first().clone(true)
        $('body').append($clone)
      })

方法返回的还是jQuery对象
传入true事件也会一起克隆

9. 获取dom对象

jQuery封装了获取内部dom对象方法

测试代码：

// 播放视频
$('video').trigger('paly')
// 暂停视频
$('video').trigger('pause')
// 重置表单
$('form').trigger('reset')

jQuery通过trigger可以触发这些方法

语法：

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

索引从0开始
获取到的是dom对象

  // 1.get方法
      let $btn = $('button')
      console.log('$btn:', $btn)
      let pauseBtn = $btn.get(1)
      console.log('pauseBtn:', pauseBtn)

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

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

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

      // 5. 重置表单
      $('.reset').click(function () {
        // $('video').play()
        // $('form').trigger('reset')
        let form = $('form')[0]
        console.log('form:', form)
        form.reset()
      })

九、综合案例

<!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>13-人员管理</title>
    <link rel="stylesheet" href="./assets/datepicker/datepicker.css" />
    <!-- 自己的样式 -->
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <h1>人员管理</h1>
    <div class="container">
      <!-- 新增按钮 -->
      <button class="btn add">新增</button>
      <!-- 表格 -->
      <table>
        <thead>
          <tr>
            <th width="150">姓名</th>
            <th width="150">手机</th>
            <th>生日</th>
            <th width="300">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr style="display: none;">
            <td class="td-name">小红</td>
            <td class="td-mobile">18888881111</td>
            <td class="td-birth">1990年02月08日</td>
            <td>
              <button class="btn edit">编辑</button>
              <button class="btn del">删除</button>
            </td>
          </tr>
          <tr>
            <td class="td-name">小红</td>
            <td class="td-mobile">18888881111</td>
            <td class="td-birth">1990年02月08日</td>
            <td>
              <button class="btn edit">编辑</button>
              <button class="btn del">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 弹出框 -->
    <div class="dialog-wrap">
      <div class="form-container">
        <div class="title">
          <h3>新增</h3>
          <i class="close">×</i>
        </div>
        <form class="form">
          <label class="required">
            姓名:
            <input
              data-required
              data-describedby="nickname-error"
              data-description="nickname"
              type="text"
              class="nickname"
            />
            <span class="error" id="nickname-error"></span>
          </label>
          <label class="required">
            手机:
            <input
              data-required
              data-pattern="^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$"
              data-describedby="mobile-error"
              data-description="mobile"
              type="text"
              class="mobile"
            />
            <span class="error" id="mobile-error"></span>
          </label>
          <label class="required">
            生日:
            <input
              data-required
              data-describedby="birthday-error"
              data-description="birthday"
              type="text"
              class="birthday"
            />
            <span class="error" id="birthday-error"></span>
          </label>

          <div class="control">
            <a class="btn cancel">取消</a>
            <button class="btn">提交</button>
          </div>
        </form>
      </div>
    </div>
    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <!-- 导入日期选择器插件 -->
    <script src="./assets/datepicker/datepicker.js"></script>
    <!-- 导入日期选择器的语言包 -->
    <script src="./assets/datepicker/i18n/datepicker.zh-CN.js"></script>
    <!-- 导入表单校验插件 -->
    <script src="./assets/jquery-validate/jquery-validate.js"></script>
    <!-- 导入自己的js -->
    <!-- <script src="./js/index.js"></script> -->
    <script>
      // 初始化
      function clear() {
        $('.dialog-wrap').fadeOut(function () {
          $('.form')[0].reset()
          $('.form span').text('')
        })
      }
      let $editTr = undefined
      // 1.点击弹窗按钮
      $('.add').click(function (){
        $('.dialog-wrap h3').text('添加')
        $editTr = undefined
        $('.dialog-wrap').fadeIn()
      })
      // 2. 日期选择器
      $('.birthday').datepicker({
        language:'zh-CN',
        autoHide:true
      })
      //3. 表单验证
      $('form').validate({
        sendForm:false,
        description:{
          nickname:{
            required:'名称不能为空！'
          },
          birthday:{
            required: '生日不能为空！'
          },
          mobile:{
            required: '手机不能为空！',
            pattern:'手机格式错误'
          }
        },
        valid() {
         if($editTr === undefined) {
           let $tr = $('tbody tr').first().clone()
           let nickname = $('.nickname').val()
           let mobile = $('.mobile').val()
           let birthday = $('.birthday').val()
           $tr.find('.td-name').text(nickname)
           $tr.find('.td-mobile').text(mobile)
           $tr.find('.td-birth').text(birthday)
           $('tbody').append($tr)
           $tr.show()
           clear()
         } else {
           let nickname = $('.nickname').val()
           let mobile = $('.mobile').val()
           let birthday = $('.birthday').val()
           $editTr.find('.td-name').text(nickname)
           $editTr.find('.td-mobile').text(mobile)
           $editTr.find('.td-birth').text(birthday)
           clear()
         }
        }
      })
      // 4. 点击取消
      $('.cancel').click(function () {
        clear()
      })
      // 5. 点击关闭
      $('.close').click(function () {
        clear()
      })
      // 6. 删除
      $('tbody').on('click','.del',function () {
        let $tr = $(this).parent().parent()
        $tr.fadeOut(function (){
          $tr.remove()
        })
      })
      // 7. 进入编辑状态
      $('tbody').on('click','.edit',function (){
        let $tr = $(this).parent().parent()
        let name = $tr.find('.td-name').text()
        let mobile = $tr.find('.td-mobile').text()
        let birth = $tr.find('.td-birth').text()
        $('.dialog-wrap h3').text('编辑')
        $('.nickname').val(name)
        $('.mobile').val(mobile)
        $('.birthday').val(birth)
        $('.dialog-wrap').fadeIn()
        $editTr = $tr
      })
    </script>
  </body>
</html>

十、表单序列化 + 版本差异

1. 表单序列化

jQuery中封装了快速获取表单数据的方法，叫做序列化

语法：

$('form').serialize()

$('form').submit(function (e) {
        let data = $(this).serialize()
        console.log('data:',data);
        return false
      })

表单元素要有name属性才可以获取到value值
获取到的数据格式是name1=value1&name2=value2的字符串

2. 插件机制

插件是jQuery提供的扩展机制，本质是往jQuery原型对象上添加方法

语法：

jQuery.fn.extend({
    插件名(参数){
        // 逻辑
    }
})

jQuery是$的别名
jQuery内部也是通过这种方法添加方法

// 1.基本使用
      $.fn.extend({
        sayHello () {
          console.log('吃了没!')
          console.log(this)
        }
      })
      let $box = $('.box')
      console.log('$box:', $box)
      $box.sayHello()
      // 2.修改背景色插件
     $.fn.extend({
      setBgColor(color) {
        this.css('backgroundColor',color)
      }
     })
     $('.box').setBgColor('skyblue')
     $('p').setBgColor('pink')
     $('h3').setBgColor('red')

3.工具方法

jQuery除了封装了大量的DOM操作外，还提供了一些工具方法，这些方法通过$或者jQuery直接调用

语法：

// 遍历方法
$.each(数组,function(下标，值){
    
})
//遍历并返回新数组
$.map(数组,function(值){
    // 返回新的值
})

不仅仅只有这个2个方法
逐步被ES6及更高级的版本新增特性取代

4. 版本差异

jQuery主要有3个大的版本

x：兼容低版本的ie,最后一个版本是1.12.3
x：不兼容低版本ie，不在更新
x：不兼容低版本ie，更新中
// 6. 删除
$(‘tbody’).on(‘click’,‘.del’,function () {
let $tr = $(this).parent().parent()
$tr.fadeOut(function (){
$tr.remove()
})
})
// 7. 进入编辑状态
$(‘tbody’).on(‘click’,‘.edit’,function (){
let $tr = $(this).parent().parent()
let name = $tr.find(‘.td-name’).text()
let mobile = $tr.find(‘.td-mobile’).text()
let birth = $tr.find(‘.td-birth’).text()
$(‘.dialog-wrap h3’).text(‘编辑’)
$(‘.nickname’).val(name)
$(‘.mobile’).val(mobile)
$(‘.birthday’).val(birth)
$(‘.dialog-wrap’).fadeIn()
$editTr = $tr
})


## 十、表单序列化 + 版本差异

### 1. 表单序列化

**jQuery中封装了快速获取表单数据的方法，叫做序列化**

**语法：**

~~~js
$('form').serialize()

$('form').submit(function (e) {
        let data = $(this).serialize()
        console.log('data:',data);
        return false
      })

表单元素要有name属性才可以获取到value值
获取到的数据格式是name1=value1&name2=value2的字符串

2. 插件机制

插件是jQuery提供的扩展机制，本质是往jQuery原型对象上添加方法

语法：

jQuery.fn.extend({
    插件名(参数){
        // 逻辑
    }
})

jQuery是$的别名
jQuery内部也是通过这种方法添加方法

// 1.基本使用
      $.fn.extend({
        sayHello () {
          console.log('吃了没!')
          console.log(this)
        }
      })
      let $box = $('.box')
      console.log('$box:', $box)
      $box.sayHello()
      // 2.修改背景色插件
     $.fn.extend({
      setBgColor(color) {
        this.css('backgroundColor',color)
      }
     })
     $('.box').setBgColor('skyblue')
     $('p').setBgColor('pink')
     $('h3').setBgColor('red')

3.工具方法

jQuery除了封装了大量的DOM操作外，还提供了一些工具方法，这些方法通过$或者jQuery直接调用

语法：

// 遍历方法
$.each(数组,function(下标，值){
    
})
//遍历并返回新数组
$.map(数组,function(值){
    // 返回新的值
})

不仅仅只有这个2个方法
逐步被ES6及更高级的版本新增特性取代

4. 版本差异

jQuery主要有3个大的版本

x：兼容低版本的ie,最后一个版本是1.12.3
x：不兼容低版本ie，不在更新
x：不兼容低版本ie，更新中

jQuery

jQuery

一、jQuery介绍

1. 选择器

2. jQuery对象

3. 事件绑定

4. 链式编程

二、jQuery常用API

1. 内容操纵

2. 计数器

3. 过滤方法

4. 样式操纵

5. 属性操纵

6.图片切换

7. 操纵value

8. 查找方法

9. 操纵类名

10. 事件进阶

三、综合案例（输入统计）

四、登陆切换案例

1. 触发事件

2. 登陆切换案例

3. Window事件绑定

五、jQuery动画

1. 获取位置

2. 滚动距离

3.显示&隐藏动画

4. 淡入&淡出动画

5. 展开&收起动画

6. 动画队列及停止方法

7.自定义动画

六、综合案例（爱旅行）

1. 插入节点

2. 动画回调函数

3. 动画的延迟方法

4. 获取高度

七、事件委托和Notebook案例

1. 事件参数

2. 删除节点

3.事件委托

4. 综合案例（记事本）

八、jQuery常用插件

1. 入口函数

2. 轮播图插件slick

(1) 导包

（2）用包

3.懒加载插件

(1) 用包

4. 全屏滚动

5. 提交事件

6. 日期选择器

7.表单验证

（1）导包

（2）用包

8. 克隆

9. 获取dom对象

九、综合案例

十、表单序列化 + 版本差异

1. 表单序列化

2. 插件机制

3.工具方法

4. 版本差异

2. 插件机制

3.工具方法

4. 版本差异

相关阅读

相关文章

相关问答

相关文档