jQuery 第一天

94 阅读6分钟

jQuery 第一天

01 认识jQuery

01.png

  1. jQuery 是 JavaScript 类库
  2. 使用它封装的方法可以极大的提升开发效率

02 使用准备

就两步

  • 下包:把 jQuery 下载到本地
  • 导包:在希望使用的页面中导入下载好的 jQuery

下载地址: jquery.com/

03 版本区别

目前最新版本是: 3.5.1

可以看成: 3.x

  • 3:大版本,和上一个版本相比有很多功能
  • x:bug修复或者新增小功能

目前有 3 个大版本

  • 1.x:兼容低版本的ie
  • 2.x:不兼容低版本的ie , 并且不再更新
  • 3.x: 不兼容低版本的ie , 更新中

下载地址:

04 选择器

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

语法:

// 语法
$('选择器')
// 修改背景色
$('选择器').css('backgroundColor''yellowgreen')

05 jQuery对象

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

例:

// jQuery 获取p标签 
$('p')
// jQuery 获取p标签 改变背景色为 粉色
$('p').css('backgroundColor''pink')

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

语法:

// 选择器获取
$('选择器')
// dom对象转换
$(dom对象)

06 事件绑定

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

语法:

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

$('选择器').click(function () {
  // 逻辑....
})
  • 事件名开头不需要写 on
  • 回调函数中的 this 就是触发事件的 dom 元素

07 链式编程

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

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

语法:

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

大部分 jQuery对象 方法的返回值还是同一个 jQuery 对象

08 内容操纵

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

语法:

// 设置
$(‘选择器’).html('内容')
$(‘选择器’).text(‘内容')
// 读取
$('选择器').html()
$('选择器').text()
  • 设置时: html 方法解析标签 , text 不解析标签
  • 取值时: html 方法获取标签 , text 只获取文本
  • 有一种使用方式支持链式编程

09 计数器

累加 & 递减

需求:点击 加号 累加数字一直到10,点击 减号 递减数字一直到0 , 到达临界值继续操作则提示用户 分析:

  1. 绑定点击事件

    click , first-child , last-child

  2. 修改文本

    text方法

  3. 判断并提示用户 0 到 10

    <div id="app">
      <!-- 计数器功能区域 -->
      <div class="input-num">
        <!-- 减号 -->
        <button>-</button>
        <!-- 内容 -->
        <span>0</span>
        <!-- 加号 -->
        <button>+</button>
      </div>
    </div>
    
    // 1. 累加
    // $('.input-num button:last-child').click(function () {
    $('.input-num button')
      .last()
      .click(function () {
        let num = $('.input-num span').text()
        if (num < 10) {
          num++
          $('.input-num span').text(num)
        } else {
          alert('数量上限')
        }
      })
    
    // 2. 递减
    // $('.input-num button:first-child').click(function () {
    $('.input-num button')
      .first()
      .click(function () {
        let num = $('.input-num span').text()
        if (num > 0) {
          num--
          $('.input-num span').text(num)
        } else {
          alert('到底了')
        }
      })
    

    02.gif

10 过滤方法

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

语法:

//  匹配的第一个元素
.first()
// 匹配的最后一个元素
.last()
// 根据索引匹配元素
.eq(索引)
  • eq 方法的索引从0开始
  • 返回的是 jQuery 对象

11 样式操纵

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

语法:

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

// 2. 对象方式设置
.css(对象)
.css({
  backgroundColor:'pink',
  color:'red',
  width:'200px',
  height:200
})

// 3. 样式获取
.css('样式名')
.css('width')
  • 数值类的样式省略单位,默认会使用 px

  • 获取样式需要传递样式名

12 属性操纵

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

语法:

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

13 图片切换

箭头缩放

需求:两侧箭头鼠标移入之后变大,鼠标移出之后还原 分析:

  1. 鼠标移入和移出事件 mouseenter , mouseleave
  2. 更改箭头缩放 transform , scale

图片切换

需求:点击左右箭头分别切换上一张和下一张图片,第一张时隐藏左箭头,最后一张时隐藏右箭头 分析:

  1. 默认隐藏左箭头 display

  2. 绑定点击事件

  3. 更改图片显示 src属性, 索引

  4. 更改箭头显示状态 判断 , display

<!-- 图片 -->
<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>
// 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++
 $('img.cover').attr('src', `./images/${index}.png`)
 $('.left').css('display', 'block')
 if (index === 5) {
   $(this).css('display', 'none')
 }
})
$('.left').click(function () {
 index--
 $('img.cover').attr('src', `./images/${index}.png`)
 $('.right').css('display', 'block')
 if (index === 1) {
   $(this).css('display', 'none')
 }
})

03.gif

14 操纵value

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

语法:

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

15 查找方法

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

语法:

// 1. 父元素
.parent()
// 2. 子元素 
.children()
// 3. 兄弟元素
.siblings()
// 4. 后代元素
.find('选择器')
  • find方法方法需要传入选择器
  • childrensibings 方法支持传入选择器

16 操纵类名

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

语法:

// 1. 添加类名
.addClass('类名')
// 2. 移除类名
.removeClass('类名')
// 3. 判断类名 返回布尔值
.hasClass('类名')
// 4. 切换类名
.toggleClass('类名')
  • 参数都是需要操纵的类名

17 事件进阶

jQuery 中封装了更为灵活的 on/offone 方法处理 DOM 事件

语法:

// 1. 注册事件
.on('事件名'function(){})
// 2. 移除指定事件
.off('事件名')
// 3. 移除所有事件
.off()
// 4. 注册一次性事件
.one('事件名'function(){})
  • on , one 方法回调函数中的 this 是触发事件的 dom 元素

18 输入统计

初始状态

需求:默认把统计字数设置为0,发布按钮设置为禁用状态 分析:

  1. 设置字数为0 text
  2. 添加禁用类名(disabled) addClass

高亮效果

需求:文本域获取焦点时父元素高亮,失去焦点时移除高亮效果 分析:

  1. 绑定获取焦点和失去焦点事件 on
  2. 获取到文本域的父元素 parent
  3. 添加和移除类名(actived) addClass , removeClass

字数统计

需求:文本域输入文字时,同步获取输入的文字个数并显示出来 分析:

  1. 绑定输入事件 on , input
  2. 获取文字个数 val , length
  3. 渲染页面 text

启用禁用

需求:输入内容为空时禁用发布按钮,不为空时启用发布按钮 分析:

  1. 绑定输入事件 on , input

  2. 判断内容是否为空(长度) val , length

  3. 添加或者移除类名(disabled) addClassremoveClass

    <!-- 字数统计区域 -->
    <p class="words">
      已输入
      <span>5</span>
      字
    </p>
    <!-- 输入区域 -->
    <div class="input-box actived">
      <textarea></textarea>
    </div>
    <!-- 发布按钮  -->
    <a href="javascript:;" class="publish_btn disabled">发布</a>
    
    ;(function () {
    // 1. 初始状态
    // $('.words span').text(0)
    // $('.publish_btn').addClass('disabled')
    
    // 2. 高亮状态
    $('.input-box textarea')
      .on('focus', function () {
        $(this).parent().addClass('actived')
      })
      .on('blur', function () {
        $(this).parent().removeClass('actived')
      })
    
    // 3. 字数统计
    $('.input-box textarea').on('input', function () {
      let length = $(this).val().length
      $('.words span').text(length)
      if (length === 0) {
        $('.publish_btn').addClass('disabled')
      } else {
        $('.publish_btn').removeClass('disabled')
      }
    })
    
    // 4. 触发input事件
    $('.input-box textarea').trigger('input')
    })()
    

19 触发事件

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

语法:

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

20 登录切换

账号&安全切换

需求:点击某种登录方式,切换到对应的登录界面 分析:

  1. 账号&安全登录点击高亮(active) click , addClass , siblings , removeClass
  2. 显示登录界面 attr , siblings

安全&手机切换

需求:点击右上角图标,根据当前状态在手机登录和安全登录之间切换 分析:

  1. 点击判断是否高亮 click , hasClass

  2. (未高亮)图标点击高亮(active) addClass , siblings , removeClass

  3. (未高亮)显示登录界面 attr , siblings

  4. (已高亮)切换到安全登录 trigger

    <!-- 切换登录场景 -->
    <div class="multi-type">
      <a data-label="#account" class="label active">账号登录</a>
      <a data-label="#secure" class="label">安全登录</a>
      <a data-label="#phone" class="icon"></a>
    </div>
    <!-- 登录界面 -->
    <div class="login-type">
      <!-- 账号登录 -->
      <div class="account" id="account">内容省略</div>
      <!-- 安全登录 -->
      <div class="secure" id="secure">内容省略</div>
      <!-- 手机号登录 -->
      <div class="phone" id="phone">内容省略</div>
    </div>
    
    ;(function () {
    // 1. 账号&安全切换
    $('.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')
    })
    
    // 2. 安全$手机切换
    $('.icon').click(function () {
      let isAcitve = $(this).hasClass('active')
      if (isAcitve === false) {
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
    
        let id = $(this).attr('data-label')
        $(id).css('display', 'block')
        $(id).siblings().css('display', 'none')
      } else {
        $('.label').last().trigger('click')
      }
    })
    })()
    

    04.gif