jQuery的三个阶段学习
三个阶段的实现目标
一、认识jQuery，基本使用
二、动画，节点
三、表单，插件
一、认识jQuery，基本使用
01-课程介绍
需要实现的4个案例
- 计数器:首先是一个很简单的小计数器
- 图片切换:接下来是一个图片切换效果
- 输入统计:然后是输入统计页
- 多模式登录:最后是一个这样的登录界面
02-认识jQuery
这一节咱们来一起认识一下什么是jQuery：
- JavaScript 类库(js文件)
说的通俗一些就是一个js文件 - 封装了很多简单易用的方法 (浏览器兼容)
并且考虑了浏览器的兼容问题，我们只管用就好 - 绝大多数用来简化 DOM 操作
咱们这个阶段的学习重点就是这些方法，通过调用他们可以大大减少代码量，从而提升开发效率 - 提升开发效率
测试：dom语法和jQuery的方法来实现同一需求
<ul>
<li>西兰花</li>
<li>西红柿</li>
<li>西瓜</li>
<li>西葫芦</li>
</ul>
// 原生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')
})
03-使用准备
jQuery官网地址：https://jquery.com
jQuery的俩步准备工作：下包、导包
- 下包：吧jQuery下载到本地
- 导包：在希望使用的页面导入下载好的jquery
兼容信息查看: https://jquery.com/browser-support/
历史版本下载: https://code.jquery.com/
目前有3个版本：
1.x：兼容低版本的ie
2.x：不兼容低版本的ie , 并且不再更新
3.x: 不兼容低版本的ie, 更新中
04-选择器
jQuery中通过选择器来获取DOM节点，支持的选择器与css的选择器几乎一致，功能类似于原生的querySelectAll方法
//基本用法
$('选择器')
//标签选择器
$('p').css('background',red'')
// 标签选择器
$('p').css('background',red'')
//类选择器
$(.'p').css('background',red'')
//id 选择器
$('#p').css('background',red'')
//后代选择器
$('body p').css('background',red'')
05-jQuery对象
$方法获取到的返回值就是jQuery对象
//jQuery
$('p').css('backgroundColor','pink')
//原生js
document.querySelector('p').style.backgroundColor = 'pink'
除了通过选择器以外，我们还可以把dom对象直接丢到$方法中，他返回的也是一个jQ对象，就可以使用jQuery提供的那些高级方法咯
// 选择器获取
$('选择器')
// dom对象转换
$(dom对象)
//eg:
let $p = $('p')
$('p').css('backgroundColor','pink') === $p.css('backgroundColor','pink')
jQuery对象 和 DOM对象 的语法不能混用
- 调用$方法传入选择器或dom元素获取到的是什么对象 ？
jQuery对象 - jQuery对象的方法,比如css方法放在什么位置？
原型上
06-事件绑定
在jQuery中以原生事件类型的名称为依据，封装了相对应的事件处理方法
//语法
$('选择器).事件名()
//eg:
$('选择器').click(function() {
//逻辑。。。
})
事件名开头不需要写on
回调函数中this就是触发事件的dom元素
eg ：
<ul>
<li>黑马程序员</li>
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
</ul>
<br />
<input type="text" class="text" />
<div class="box"></div>
//1. 点击事件：
$('li').click(function(){
console.log('click')
console.log(this)
$(this).css('backgroundColor','pink')
})
// 2.为 .text 添加获得焦点事件
$('.text').focus(function () {
console.log('focus')
$(this).css('backgroundColor', 'pink')
})
// 3.为 .text 添加失去焦点事件
$('.text').blur(function () {
console.log('blur')
$(this).css('backgroundColor', 'white')
})
- 为jQuery对象绑定事件时，方法名字中有没有on？
没有，$(‘选择器’). - 传入的回调函数中，如何获取触发事件的dom元素?
this,可以调用$方法将他转为jQuery对象，从而使用jQuery对象强大的方法
07-链式编程
$('.text').focus(回调函数).blur(回调函数).change(回调函数)
$('.text')
.focus(function () {
console.log('链式编程-获得焦点')
})
.blur(function () {
console.log('链式编程-失去焦点')
})
.change(function(){
console.log('链式编程-内容改变')
})
- 链式编程的含义是?
通过 点 把多个操作连续的写下去, 形成和 链子 一样的结构 - 有没有特殊情况?
有，但是大部分jQuery对象方法的返回值还是同一个jQuery对象
08-内容操纵
//设置
$('选择器').html('内容')
$('选择器').text('内容')
//读取
$('选择器').html()
$('选择器').text()
设置时：html方法解析标签，text不解析标签
取值时：html方法获取标签，text指获取文本
设置支持链式编程
09-计数器（案例）
需求：点击加号累加数字一直到10，点击减号 递减数字一直到0，到达临界值继续操作则提示用户
分析：
①：绑定点击事件： click，first-child ，last-child
②：修改文本 ：text方法
③：判断并提示用户： 0~10
<div class="input-num">
<!-- 减号 -->
<button> - </button>
<!-- 内容 -->
<span>0</span>
<!-- 加号 -->
<button> + </button>
</div>
$('.input-num button:first-child').click(function(){
let num = $('.input-num span').text()
if (num < 10 ){
num++
$('.input-num span').text(num)
}else {
alert('最大值就是10呦~~~')
})
$('.input-num button:last-child').click(function(){
let num = $('.input-num span').text()
if (num > 0 ){
num--
$('.input-num span').text(num)
}else {
alert('最小值就是0呦~~~')
})
- last-child和first-child叫做什么选择器?
伪类选择器 - span里面的文本设置和取值用的是什么方法
text方法
10-过滤方法
// 匹配的第一个元素
.first()
// 匹配的最后一个元素
.last()
// 根据索引匹配元素
.eq(索引)
//leq 方法的索引从0开始，这个三个方法返回值都是jQuery对象
11-样式操纵
jQuery 中对样式的操作进行封装 , 可以设置或者获取样式
// 1. 键值对设置
// .css('样式名','值')
.css('backgroundColor','pink')
.css('color','red')
.css('width','200px')
.css('height',200)
//数值类的样式省略单位默认会使用px
// 2. 对象方式设置
.css(对象)
.css({
backgroundColor:'pink',
color:'red',
width:'200px',
height:200
})
// 3. 样式获取
.css('样式名')
.css('width')
let width = $('.box').css('width')
console.log('width:', width)
//数值类的样式省略单位,默认会使用 px
//获取样式需要传递样式名
12-属性操纵
使用jQuery提供的方法操纵元素的属性
jQuery 中对属性的操作进行封装 , 可以设置、获取和删除属性
方法有2个，分别是attr和removeAttr，其中attr方法可以用来设置或者读取属性，removeAttr的作用是删除属性
// 1.赋值
.attr('属性名','值')
// 2.取值
.attr('属性名')
// 3.删除属性
.removeAttr('属性名')
<a href="#">黑马程序员</a>
<img src="" />
// 1. 设置
$('a').attr('href', 'http://www.itheima.com/')
$('img').attr('src', 'http://www.itheima.com/images/logo.png')
$('img').attr('info','itheima')
// 2. 取值
console.log($('a').attr('href'))
console.log($('img').attr('info'))
// 3. 删除
$('a').removeAttr('href')
$('img').removeAttr('info')
13-图片切换（案例）
实现：箭头缩放、图片切换
<div class='center'>
<!-- 图片 -->
<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>
1.箭头缩放
需求：两侧箭头鼠标移入之后变大，鼠标移出之后还原
分析：
①：鼠标移入和移出事件
mouseenter , mouseleave
②：更改箭头缩放
transform ， scale
//1.箭头缩放
$(.center a)
.mouseenter(function () {
$(this).css('transform','scale(1.1)')
})
.mouseleave(function () {
$(this).css('transform','scale(1)')
})
2.图片切换
需求：点击左右箭头分别切换上一张和下一张图片，第一张时隐藏左箭头，最后一张时隐藏右箭头
分析：
① ：默认隐藏左箭头
display
② ：绑定点击事件
③ ：更改图片显示
src属性,索引
④：更改箭头显示状态
判断 , display
//图片切换
$('left').css('display','none') //默认隐藏左箭头
let index = 1
//右侧按钮
$('right').click(function() {
index++
$('left').css('display','block')
$('cover').attr('src',`./images/${index}.png`)
if (index==5) {
$(this).css('display','none')
}
})
//左侧按钮
$('left').click(function() {
index--
$('right').css('display','block')
$('cover').attr('src',`./images/${index}.png`)
if (index==1) {
$(this).css('display','none')
}
})
- 为transform设置什么属性可以调整元素缩放？
scale - 使用什么方法修改元素属性?
attr - 使用什么方法修改元素样式?
css
14-操作value
jQuery 中封装了操纵表单元素value属性的方法，可以取值和赋值
// 1. 赋值
.val('参数')
// 2. 取值
.val()
- val方法操纵的是元素的什么属性？
value属性 - 获取value是否需要传递参数?
不需要
15-查找方法
jQuery 中封装了查找元素的方法，可以基于元素的结构关系查找新的元素
// 1. 父元素
.parent()
// 2. 子元素
.children()
// 3. 兄弟元素
.siblings()
// 4. 后代元素
.find('选择器')
//find方法方法需要传入选择器
//parent方法不支持传递参数
//children 、sibings 方法支持传入选择器
16-操纵类名
jQuery 中封装了为网页元素添加、移除、检测、切换类名的方法。
// 1. 添加类名
.addClass('类名')
// 2. 移除类名
.removeClass('类名')
// 3. 判断类名 返回布尔值
.hasClass('类名')
// 4. 切换类名
.toggleClass('类名')
//参数都是需要操纵的类名
17-事件进阶
jQuery并没有对所有的js事件绑定对应的jQuery方法，所以只能用on的方式对事件进行绑定
jQuery 中封装了更为灵活的 on/off、one 方法处理 DOM 事件
// 1. 注册事件
.on('事件名', function(){})
// 2. 移除指定事件
.off('事件名')
// 3. 移除所有事件
.off()
// 4. 注册一次性事件
.one('事件名', function(){})
//on , one 方法回调函数中的 this 是触发事件的 dom 元素
$('.onoff').on('input', function () {
console.log('input事件')
})
18-输入统计（案例）
为了避免全局变量污染，我们可以先添加一个自调用函数,一会逻辑代码全部写在内部
<!-- 字数统计区域 -->
<p class="words">
已输入
<span>5</span>
字
</p>
<!-- 输入区域 -->
<div class="input-box actived">
<textarea></textarea>
</div>
<!-- 发布按钮 -->
<a href="javascript:;" class="publish_btn">发布</a>
1.初始状态
需求：默认把统计字数设置为0，发布按钮设置为禁用状态
分析：
①：设置字数为0
text
②：添加禁用类名(disabled)
addClass
;function() {
//1.设置初始状态
$('.words span ').text()
$('.publish_btn').addClass('disabled')
}
2.高亮效果
需求：文本域获取焦点时父元素高亮，失去焦点时移除高亮效果
分析：
①：绑定获取焦点和失去焦点事件
on，focus，blur
②：获取到文本域的父元素
parent
③：添加和移除类名(actived)
addClass , removeClass
//获取焦点添加类名
$('.input-box textarea').on('focus' , function () {
$(this)
.parent()
.addClass('actived')
})
//失去焦点移除类名
$('.input-box textarea').on('blur' , function () {
$(this)
.parent()
.removeClass('actived')
})
3.字数统计
需求：文本域输入文字时，同步获取输入的文字个数并显示出来
分析：
①：绑定输入事件
on , input
②：获取文字个数
val , length
③：渲染页面
text
$('.input-box extarea').on('input' , function() {
//let value = $(this).val()
//let length = value.length
//$('.words span').text(length)
$('.words span').text($(this).val().length)
})
4.启用禁用
需求：输入内容为空时禁用发布按钮，不为空时启用发布按钮
分析：
①：绑定输入事件
on , input
②：判断内容是否为空(长度)
val , length
③：添加或者移除类名(disabled)
addClass ，removeClass
$('.input-box textarea').on('input' , function() {
let length = $(this).val().length
$('.words span ').text(length)
if (length === 0) {
$(this).addClass('disabled')
}else {
$(this).removeClass('disabled')
}
})
19-触发事件
jQuery 中如何通过代码的方式触发绑定的事件
// 1. 直接触发
.事件名()
// 2. trigger触发
.trigger('事件名')
// 3. 触发自定义事件
.trigger('自定义事件')
// 4. 注册自定义事件
.on('自定义事件',function(){})
//注意自定义事件不可以通过鼠标点击来触发，只能通过trigger()方法
//优化输入统计案例，页面打开的时候触发input事件，不需要设置初始状态
//触发input事件
$('.input-box extarea').trigger('input')x
20-登录切换（案例）
<!-- 切换登录场景 -->
<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>
账户&安全切换
需求：点击某种登录方式，切换到对应的登录界面
分析：
①：账号&安全登录点击高亮(active)
click , addClass , siblings , removeClass
②：显示登录界面
attr , siblings
;(function () {
//1. 账户&安全切换
$('.multi-type .label').click( function () {
//①：账号&安全登录点击高亮(active)
$(this).addClass('active')
$(this)
.siblings()
.removeClass('active')
//②：显示登录界面
let label = $(this).attr('data-label')
$(label)
.css('display','block')
.siblings()
.css('display','none')
})
})
安全&手机切换
需求：点击右上角图标，根据当前状态在手机登录和安全登录之间切换
分析：
①：点击判断是否高亮
click , hasClass
②：(未高亮)图标点击高亮(active)
addClass , siblings , removeClass
③： (未高亮)显示登录界面
attr , siblings
④： (已高亮)切换到安全登录
trigger
// 图标 和 安全登录切换
$('.multi-type .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')
}
}
- 自定义属性是否可以通过attr方法获取到?
可以 - 判断类名是否存在的方法是?
hasClass - 通过trigger方法触发事件时，参数传递什么？
事件名
21-window事件绑定
使用 jQuery 为window对象绑定事件
// 滚动
$(window).scroll(function () {})
// 点击
$(window).click(function () {})
//直接传入 window 对象，不需要写成选择器
22-版本区别
二、动画，节点
01-课程介绍
学习目标：
-
能够动态获取元素节点的位置、大小、滚动
-
能够为元素设置动画效果
-
能够操纵元素节点
-
能够理解并使用事件委托
-
待办事项：用来巩固元素的增删改查
-
爱旅行：用来巩固位置操作，动画效果
-
腾讯前端首页-滚动效果
02-获取位置
通过jQuery直接获取元素的位置
// 取值
$('选择器').offset()
// 取值
$('选择器').position()
// 返回值
{top: 126, left: 58}
- position和offset都可以获取位置
- 返回的是一个对象
- 两者获取位置的参照物不同:
- offset始终参照的是html 标签
- position参照的有定位属性的最近祖先元素
- 对于margin两者的处理也不相同
- offset忽略
- position会累加margin
- 如果要设置位置的话只能通过offset方法
总结：
- offset方法和position方法哪个参考的是html?
offset方法,position方法参考的是最近并且有定位的祖先元素 - offset方法和position方法哪个可以用来设置位置?
offset方法可以设置位置,但是没有动画效果 - 如果元素有margin哪个方法会一起计算进去呢?
offset会把margin也计算进去,而position不会
03-滚动距离
通过jQuery获取元素的滚动距离
-
获取元素滚动距离
$(‘选择器’).scrollTop()
$(‘选择器’).scrollLeft() -
获取网页的滚动距离
$(‘html’).scrollTop()
$(‘html’).scrollLeft() -
设置滚动距离
$(‘html’).scrollTop(值)
$(‘html’).scrollLeft(值)
小结:
- 对于内容可以滚动的元素可以通过scrollTop或者scrollLeft获取滚动距离,如何获取网页的滚动距离呢?
把html作为选择器即可 - 调用scrollTop和scrollLeft方法可以让元素滚到指定位置,但是并没有动画效果
04-腾讯前端（案例）
<div class="header scrolled">
</div>
1.顶部高亮
需求：页面只要滚动为顶部添加高亮效果,在顶部时移除高亮
分析：
①：注册页面滚动事件
window , scroll
②：获取滚动距离
html
③：切换高亮效果
切换类名(scrolled)
// 自调用函数（自执行函数），创建自己独立作用域，局部变量不会造成全局变量污染
;(function() {
//1. 顶部高亮
$(window).scroll(function () {
let top = $('html').scrollTop()
if ( top === 0) {
$('.header').removeClass('scrolled')
}else {
$('.header').addClass('scrolled')
}
})
})
2.返回顶部
<div class="gotop">
<a href="javascript:;">
<i></i>
返回顶部
</a>
</div>
需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部
分析：
①：注册页面滚动事件并获取滚动距离
②：切换显示隐藏
css方法 , display样式 / show方法, hide方法 / fadeIn方法，fadeOut方法 /
slideDown方法, slideUp方法
③：点击返回顶部
click事件 , scrollTop方法
//2. 返回顶部
$(window).scroll(function () {
let top = $('html').scrollTop()
if ( top >= 200)
//$('.gotop').css('display','block')
//$('.gotop').show(1000)
//$('.gotop').fadeIn(2000)
//$('.gotop').slideUp(1000)
}else {
//$('.gotop').css('display','none')
//$('gotop').hide(1000)
//$('.gotop').fadeOut(2000)
//$('.gotop').slideUp(1000)
}
$('.gotop').click(function () {
//$('html').scrollTop(0)\
$('html').animate({
scrollTop : 0
})
})
})
1.如何注册页面滚动事件?
$(window).scroll()
2.如何获取网页垂直方向的滚动距离?
$(‘html’).scrollTop()
05-动画-显示&隐藏
通过jQuery以动画的方式切换元素的显示&隐藏
-
如何使用show方法
-
如何使用hide方法
-
如何使用toggle方法
-
方法中的this
-
动画的持续时间
-
动画效果
-
调优demo
// 显示
( ′ 选择 器 ′ ) . s h o w ( ) / / 隐藏 ('选择器').show() // 隐藏 (′选择器′).show() // 隐藏 (‘选择器’).hide()
// 显示&隐藏
$(‘选择器’).toggle()// 显示
( ′ 选择 器 ′ ) . s h o w ( 持续时间 ) / / 隐藏 ('选择器').show(持续时间) // 隐藏 (′选择器′).show(持续时间) // 隐藏 (‘选择器’).hide(持续时间)
// 显示&隐藏
$(‘选择器’).toggle(持续时间)
//毫秒为单位
动画的本质：jQuery在慢慢的通过行内的方式改变元素的大小，透明度这些样式
1.显示用show,隐藏用hide,切换显示隐藏的那个方法是?
toggle方法
2.不设置时间是否有动画效果?
没有
06 动画-淡入&淡出
通过jQuery以淡入&淡出的方式切换元素的显示隐藏
-
如何使用fadeIn方法
-
如何使用fadeOut方法
-
如何使用fadeToggle方法
-
方法中的this
-
动画的持续时间
-
动画效果
-
调优demo
// 淡入( ′ 选择 器 ′ ) . f a d e I n ( ) / / 淡出 ('选择器').fadeIn() // 淡出 (′选择器′).fadeIn() // 淡出 (‘选择器’).fadeOut()
// 淡入&淡出
( ′ 选择 器 ′ ) . f a d e T o g g l e ( ) / / 淡入 ('选择器').fadeToggle() // 淡入 (′选择器′).fadeToggle()// 淡入 (‘选择器’).fadeIn(持续时间)
// 淡出
KaTeX parse error: Expected 'EOF', got '&' at position 35: …间) // 淡入&̲淡出 (‘选择器’).fadeToggle(持续时间)
//毫秒为单位
1.淡入淡出效果是通过修改元素的哪个样式实现?
opactity （①以动画的方式切换透明度）（②切换display）
2.元素的尺寸是否会在淡入淡出的动画过程中一起改变?
不会
07 动画-展开&收起
通过jQuery以展开&收起的方式切换元素的显示隐藏
通过jQuery以展开(高度增大-显示)&收起(高度减小-隐藏)的方式切换元素的显示隐藏
-
如何使用slideDown方法
-
如何使用slideUp方法
-
如何使用slideToggle方法
-
本质是修改了哪个样式
-
方法中的this
-
动画的持续时间
-
动画效果
-
调优demo
// 展开
( ′ 选择 器 ′ ) . s l i d e D o w n ( ) / / 收起 ('选择器').slideDown() // 收起 (′选择器′).slideDown() // 收起 (‘选择器’).slideUp()
// 展开&收起
( ′ 选择 器 ′ ) . s l i d e T o g g l e ( ) / / 展开 ('选择器').slideToggle() // 展开 (′选择器′).slideToggle() // 展开 (‘选择器’).slideDown(持续时间)
// 收起
KaTeX parse error: Expected 'EOF', got '&' at position 35: …间) // 展开&̲收起 (‘选择器’).slideToggle(持续时间)
//毫秒为单位
1.slideDown和slideUp哪一个用来把元素显示出来?
slideDown展开
2.在垂直方向上调整的样式除了高度、margin、还有?
padding
08 动画-队列&停止
通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放
// 动画队列
['动画1','动画2','动画3']
// 停止当前动画
$('选择器').stop()
// 清空队列 在动画当前状态停止
$('选择器').stop(true)
// 清空队列 直接到当前动画的结束状态
$('选择器').stop(true,true)
//动画方法和stop方法返回的是同一个jQuery对象(链式编程)
1.队列中动画的播放顺序和添加顺序是否有关系？
有
2.stop方法要清空队列需要传递什么参数?
true
3.传递1个true和传递2个true的区别是?
1个:动画停止在执行stop方法的瞬间
2个:直接到当前播放动画的结束状态
09 自定义动画
jQuery提供了animate方法来实现更为复杂的动画效果
$('选择器').animate(动画属性)
$('选择器').animate({
width: 100,
height: '100%',
margin: '100px',
...
})
$('选择器').animate({
scrollTop: 100,
scrollLeft: 100
})
$('选择器').animate(动画属性, 持续时间)
//数值类样式支持动画,支持多个
//默认单位是px
//支持非样式的特殊属性
//持续时间单位是毫秒
1.是否所有的样式都支持自定义动画?
不是
2.直接写数值默认的单位是什么?
px
3.是否只支持样式类的自定义动画?
scrollTop、scrollLeft
10-爱旅行（案例）
1.返回顶部
<!-- 返回顶部 -->
<div class="gotop">
<a href="javascript:;">
<i></i>返回顶部
</a>
</div>
需求：页面滚动距离大于某个值时淡入,小于时淡出,点击时以动画的方式让页面返回顶部
分析：
①：注册页面滚动事件
window , scroll
②：获取滚动距离
200 , html, scrollTop方法
③：淡入淡出效果
fadeIn , fadeOut
④：点击返回顶部
animate,scrollTop属性
;(function() {
//0. 默认隐藏返回顶部
$('.gotop').hide()
//1.注册页面滚动事件
$(window).scroll(function () {
let top = $('html').scrollTop()
if (top > 200 ){
$('.gotop')
.stop()
.fadeIn()
} else {
$('.gotop')
.stop()
.fadeOut()
}
})
//2.点击返回顶部
$('.gotop').click(function() {
//$('html').scrollTop(0)
$('html').animate({
scrollTop:0
})
})
})()
2.意见反馈
<!-- 返回顶部 -->
<div class="gotop">
<a href="javascript:;">
<i></i>返回顶部
</a>
</div>
<!-- 意见反馈 -->
<div class="suggest">
<a href="javascript:;"> <i></i>意见反馈 </a>
</div>
<!-- 反馈窗口 -->
<div class="sugform">
<div class="sugtitle">
<p>您对<span class="curpage">"当前页面"</span>满意吗?</p>
<!-- 关闭按钮 -->
<a href="javascript:;" class="close"> </a>
</div>
<div class="check"></div>
</div>
需求：点击意见反馈展开反馈窗口,点击关闭按钮收起反馈窗口
分析：
①：点击展开反馈窗口
click , slideDown
②：点击关闭收起反馈窗口
click , slideUp
//3.点击展开反馈窗口
$('.suggest').click(function() {
$('.sugform').slideDown()
})
//4.点击关闭收起反馈窗口
$('.close').click(function() {
$('.sugform').slideUp()
})
3.自动轮播（待定）
思考：
1.如何通过jQuery中改变页面结构?
2.如何知道动画播放完毕?
3.如何让动画延迟播放?
4.如何获取元素高度?
需求：内容朝下自动轮播,每次动画结束之后稍作停留,然后继续重复这个过程
分析：
①：末尾元素移到顶部,并设置定位为负值
last , prepend , css , outerHeight
②：延迟一会,通过动画将定位变为0
delay , animate
③：动画播放完毕之后,重复….
动画回调函数 , 抽取为函数
11-插入节点
jQuery 中封装了在指定位置动态插入元素节点的方法,可以插入(新增)节点或者改变节点位置
// 4个方法参数一样 位置不同
$('父元素选择器').append(参数) // 父元素结尾
$('父元素选择器').prepend(参数) // 父元素开头
$('兄弟元素选择器').before(参数) // 兄弟元素前面
$('兄弟元素选择器').after(参数) // 兄弟元素后面
插入节点:传入创建的dom元素或者html结构
改变位置:传入现有的dom元素或者jQuery对象
12-动画的回调函数
所有的 jQuery 动画方法都支持传入回调函数
$('选择器基础动画方法(回调函数)
$('选择器').基础动画方法(持续时间, 回调函数)
$('选择器').animate(属性, 回调函数)
$('选择器').animate(属性, 持续时间, 回调函数)
回调函数会在动画执行完毕时立刻执行
回调函数中的this是执行动画的dom元素
1.回调函数设置的位置是第几个参数？
最后一个
2.回调函数的执行时机是?
动画播放完毕
3.回调函数中的this是?
播放动画的dom元素
13-动画的延迟方法
jQuery 不仅可以设置动画执行的速度，还能在动画执行前设置一定的延时
$('选择器').delay(延迟时间).动画方法()
$('选择器').delay(延迟时间).动画方法().delay(延迟时间).动画方法()
//延迟时间单位是毫秒
14-获取尺寸
jQuery 对获取元素尺寸进行了封装，使得在不同场景中获取元素尺寸十分方便
// 样式
width: 200px;
height: 120px;
padding: 10px 20px;
border: 10px dashed yellowgreen;
margin: 20px 25px;
//语法
$('选择器').width() // 内容宽度
$('选择器').height() // 内容高度
$('选择器').innerWidth() // 内容宽度 + 内边距
$('选择器').innerHeight() // 内容高度 + 内边距
$('选择器').outerWidth() // 内容宽度 + 内边距 + 边框
$('选择器').outerHeight() // 内容高度 + 内边距 + 边框
$('选择器').outerWidth(true) // 内容宽度 + 内边距 + 边框 + 外边距
$('选择器').outerHeight(true) // 内容高度 + 内边距 + 边框 + 外边距
1.width和height方法获取的尺寸中是否包含padding？
不包含
2.获取内容和padding的尺寸使用哪个方法?
innerWidth,innerHeight
3.outerWidth和outerHeight获取的尺寸中还包含了什么?
传入true:包含border
不传入true:包含border和margin
1.如何通过jQuery中改变页面结构?(√)
2.如何知道动画播放完毕?(√)
3.如何让动画延迟播放?(√)
4.如何获取元素高度?(√)
3.爱旅行-自动轮播
通过目前所学的知识完成爱旅行这个案例
- 回到顶部显示隐藏
- 回复客服效果
- 轮播图
- 回复轮播
15-事件参数
jQuery 绑定的事件中可以获取事件参数(事件对象),用法和原生js完全一致
// 没定义事件参数
$('选择器').事件(function () {})
// 通过形参定义了事件参数
$('选择器').事件(function (event) {})
$('选择器').事件(function(event){
event.stopPropagation()
})
// 比如 点击事件
$('选择器').click(function(event){})
// 比如 键盘抬起事件
$('选择 器').keyup(function(event){})
//jQuery已经处理好了事件参数的兼容性
去浏览器中测试一下.
<!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.itheima.com/">黑马程序员</a>
<input type="text" />
<br />
<button>点我</button>
<br />
</div>
<script src="./jquery/jquery-3.5.1.min.js"></script>
<script>
</script>
</body>
</html>
最外层盒子绑定点击事件,查看触发源
$('.box').click(function (event) {
console.log('event.target:',event.target)
console.log('box-click')
})
阻止a的默认行为
$('a').click(function (event) {
event.preventDefault()
})
判断键盘按键
//键盘编码keyCode
$('input').keyup(function (event) {
console.log('keyCode:',event.keyCode)
if (event.keyCode === 13) {
console.log('按下回车')
}
})
阻止冒泡
$('button').click(function (event) {
event.stopPropagation()
console.log('button-click')
})
1.事件参数必须起名为event吗？
不需要, event是形参
2.preventDefault是阻止冒泡吗?
阻止默认行为, stopPropagation用来阻止冒泡
3.回车键的keyCode是多少?
13
小结一下
事件对象:
- 也可以叫做事件参数用法和webapi阶段学习的基本一致
- 在事件触发时额外传递给开发者中的信息和功能
- 可以通过它获取触发源,实现阻止默认行为等功能
16 节点-新增
jQuery 中封装了动态新增元素节点的方法
1.基于创建的jquery对象进行添加
// 基于html创建jQuery对象
let $a = $('<a href="#">超链接</a>')
// 添加jQuery对象
// 在父元素末尾添加
$('选择器').append($a)
// 在父元素开头添加
$('选择器').prepend($a)
// 在兄弟元素之前添加
$('选择器').before($a)
// 在兄弟元素之后添加
$('选择器').after($a)
2.直接添加html结构
// 直接添加html结构
// 在父元素末尾添加
$('选择器').append('html结构')
// 在父元素开头添加
$('选择器').prepend('html结构')
// 在兄弟元素之前添加
$('选择器').before('html结构')
// 在兄弟元素之后添加
$('选择器').after('html结构')
去测试一下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery-day02</title>
<style>
body {
padding: 0 30px;
}
p {
color: #333;
}
.container {
overflow: hidden;
background-color: pink;
}
img {
margin: 10px;
float: left;
}
</style>
</head>
<body>
<h3>节点操作</h3>
<p>jQuery 中封装了在指定位置动态添加元素节点的方法。</p>
<div class="insert">
<button class="append">父元素结尾添加</button>
<button class="prepend">父元素开头添加</button>
<button class="before">兄弟元素前添加</button>
<button class="after">兄弟元素后添加</button>
</div>
<hr />
<div class="container">
<img
class="Amumu"
src="http://game.gtimg.cn/images/lol/act/img/champion/Amumu.png"
/>
<img
class="Teemo"
src="http://game.gtimg.cn/images/lol/act/img/champion/Teemo.png"
alt=""
/>
<img
class="Kennen"
src="http://game.gtimg.cn/images/lol/act/img/champion/Kennen.png"
/>
</div>
<script src="./jquery/jquery-3.5.1.min.js"></script>
</body>
</html>
首先是:父元素结尾添加
// 父元素结尾添加
$('.append').click(function () {
$('.container').append(
`<img class="Ziggs" src="http://game.gtimg.cn/images/lol/act/img/champion/Ziggs.png" alt="">`
)
})
接下来:父元素开头添加
// 父元素开头添加
$('.prepend').click(function () {
$('.container').prepend(
` <img class="Poppy" src="http://game.gtimg.cn/images/lol/act/img/champion/Poppy.png" alt=""> `
)
})
然后:兄弟元素前面添加
// 兄弟元素前添加
$('.before').click(function () {
$('.Teemo').before(
`<img class="Ezreal" src="http://game.gtimg.cn/images/lol/act/img/champion/Ezreal.png" alt="">`
)
})
最后:兄弟元素末尾添加
// 兄弟元素后添加
$('.after').click(function () {
$('.Teemo').after(
`<img class="Lulu" src="http://game.gtimg.cn/images/lol/act/img/champion/Lulu.png" alt=""> `
)
})
小结一下:
- append、prepend 以父元素为参考分别在结尾处和开头处添加新的元素节点
- after、before 以当前元素为参考在之前或之后插入新的元素节点
- append、prepend、after、before 均支持直接将 html 字符串做为节点插入
17 节点-删除
不同于webapi中需要通过父元素才可以删除自己,jQuery中直接就可以把自己给删咯
（jQuery如何删除节点）
// 删除自己
$('选择器').remove();
总结：
- remove 方法删除的是当前调用方法的元素节点
18 节点-克隆
jQuery 中封装了复制（克隆）元素节点的方法
<script>
// 通过复制获得新的节点 拷贝事件
$('选择器').clone(true);
// 通过复制获得新的节点 不拷贝事件
$('选择器').clone(false);
</script>
总结：
- clone 方法复制得到的元素节点仍是 jQuery 对象
- 待复制的节点中如果有事件监听，需要为 clone 方法传入参数 true
19-事件委托
jQuery 中封装了事件委托的支持 , 直接通过 on 方法即可使用
// 直接绑定
$('选择器').on('事件名',function(){})
// 事件委托
$('祖先选择器').on('事件名', '后代选择器', function () {})
//减少事件注册
//解决动态增加后代元素的事件绑定问题
//原理是事件冒泡
//回调函数中的this是触发事件的dom对象
后代选择器主要是用来限制事件触发的来源
1.事件委托中绑定事件的对象必须是父元素吗?
不是, 祖先元素即可
2.事件委托只能用在动态添加的后代元素上吗?
不是, 默认存在的后代元素也可以使用
3.原理是?
事件冒泡
总结：
- 事件委托需要为某个在 DOM 中已经存在的祖先元素添加事件监听
- delegate 方法是 jQuery 中专门的事件委托的方法
- on 方法中也内置支持事件委托，推荐使用 on 方法
18-notebook（案例）
1.新增
<!-- 输入框 -->
<input id="addTodo" class="new-todo" />
<!-- 容器 -->
<ul class="todo-list" id="todoList">
<!-- 记事本项目 -->
<li>
<div class="view">
<label>文本</label>
<button class="destroy"></button>
</div>
</li>
</ul>
需求：在输入内容的情况下,回车新增记事本项,并且以动画的方式添加到页面中,同时清空输入
分析：
①：新增时,判断按键为回车,及输入内容非空
keyup , keyCode , val
②：添加记事本项到页面,并设置输入内容
append
③：通过展开动画的方式展示元素
display:none , slideDown
④：清空输入内容
val
;(function(){
//1.新增
$('#addTodo').keyup(function(e) {
if (e.keyCode===13){
//console.log('回车键弹起了')
let value = $(this).val()
if (value !== ''){
//console.log('出入了内容')
//在父元素末尾添加
$('#todolist').append(`
<li style="display:none">
<div class="view">
<label>${value}</label>
<button class="destroy"></button>
</div>
</li>`)
$('#todolist li')
.last()
.slideDown()
$(this).val('')
}
}
})
})()
2.删除
<!-- 输入框 -->
<input id="addTodo" class="new-todo" />
<!-- 容器 -->
<ul class="todo-list" id="todoList">
<!-- 记事本项目 -->
<li>
<div class="view">
<label>文本</label>
<button class="destroy"></button>
</div>
</li>
</ul>
需求：新增和删除记事本项时,更新个数显示
分析：
①：为删除按钮绑定点击事件
on , click
②：找到祖先元素li标签并播放淡出动画
parent , fadeOut
③：动画播放完毕,删除li标签
回调函数 , remove
//2.删除
$('#todoList').on('click','.destroy',function(){
//绑定的点击事件里面的this是删除按钮
let $li = $(this)
.parent()
.parent()
//回调函数里面的this就是li本身
$li.fadeOut(function () {
$(this).remove()
})
})
3.计数
<!-- 容器 -->
<ul class="todo-list" id="todoList">
<li>
内容省略
</li>
</ul>
<!-- 计数区域 -->
<span class="todo-count">
合计:
<strong>0</strong>
</span>
需求：新增和删除时更新个数
分析：
①：新增和删除动画播放完毕时执行逻辑
动画的回调函数
②：获取li标签的个数并更新个数
text
③：代码复用
抽取
//3.计数
//抽取代码
function count() {
$('.todo-count strong').text($('#todolist li').length)
}
抽取：
1.事件参数中如何获取用户的键盘按键?
keyCode
2.案例中动态创建的li标签通过哪种方式来绑定事件?
事件委托
3.动画播放完毕之后执行的逻辑写在哪里?
动画的回调函数
三、表单，插件
01-课程介绍
学习目标
- 能够了解常见 jQuery 插件的使用套路
- 能够了解插件的本质及实现方法
- 能够掌握操纵表单的方法
1.插件+表单+3个案例
02-入口函数
jQuery 中提供了更为简便的入口函数写法
-
页面资源加载完毕才会执行(包括图片、css等等)逻辑代码
// 原生写法
window.onload = function () {}
// jQ写法
$(window).on(‘load’, function () {}) -
DOM载入完毕就会执行（不考虑外部资源）
// 完整写法
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) / / 简化写法 (document).ready(function () {}) // 简化写法 (document).ready(function () ) // 简化写法 (function () {}) -
onload和ready的执行先后
ready会执行
- window.onload 和 ready哪个先执行？
ready - window.onload 和 ready哪个可以获取图片尺寸?
window.onload - 开发中用哪个?
具体情况具体分析
03-轮播图插件-slick
下包：把插件下载到本地
导包：先导入 jQuery , 再导入插件 , 导入css(需要的话)
用包：根据文档(说明书)使用
导包
<!-- 引入插件所需要的样式表 -->
<link rel="stylesheet" href="./assets/slick/slick.css">
<link rel="stylesheet" href="./assets/slick/slick-theme.css">
<!-- 先导入 jQuery -->
<script src="./assets/jquery/jquery-3.5.1.js"></script>
<!-- 在 jQuery 之后引入插件 -->
<script src="./assets/slick/slick.min.js"></script>
用包
<div class="your-class">
<div>轮播元素一</div>
<div>轮播元素二</div>
<div>轮播元素三</div>
</div>
$('.your-class').slick()
// 调用插件方法初始化
$('.your-class').slick({
autoplay:true,
arrows:true
...
})
默认样式不符合需求直接添加 CSS 覆盖即可
更多的配置参数可以查阅官方文档:https://github.com/kenwheeler/slick
用包：
修改底部小圆点样式与位置：
下包：
- slick.js文件导入的位置是 jQuery 之前还是之后？
之后 - 是否需要把使用步骤和配置背下来?
不需要
04-懒加载插件-lazyload
懒加载：图片用到了再去加载，常见于有大量图片的网页，比如电商
下包：把插件下载到本地
导包：先导入 jQuery , 再导入插件 , 导入css(需要的话)
用包：根据文档(说明书)使用
<!-- 先导入jQueery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 再导入lazyload插件 -->
<script src="./assets/jquery.lazyload.min.js"></script>
<!-- 图片 -->
//默认src属性是用来设置图片地址
<img class="lazyload" src="./images/1.png" alt="" />
//在这里需要把 图片地址设置给 data-original
<!-- 图片 -->
<img class="lazyload" data-original="./images/1.png" alt="" />
//使用src属性图片会立即加载，data-original懒加载方式会让页面没展示的图片暂时不加载
//找到希望懒加载的图片并调用lazyload方法
$('.lazyload').lazyload()
以前用src：
利用插件功能：
修改属性，调用lazyload方法后，页面滚到底部图片才会被加载出来
官方文档:https://github.com/tuupola/lazyload/tree/1.x
- 使用懒加载插件之后，看不到的图片会不会加载?
不会 - 图片较多的网页可以用这个提升加载速度吗?
可以
05-小兔鲜儿(案例)
轮播图
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/banner_1.png" alt="" />
</a>
</li>
... 略
</ul>
<!-- 切换按钮 -->
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites"></a>
<!-- 指示器 -->
<div class="indicator"></div>
</div>
需求：项目中整合轮播图效果，使用自定义的左右箭头，开启自动轮播，显示指示点并且居中
分析：
①：整合轮播图插件(slick)
下包，导包
②：调用插件方法
slick方法
③：调整配置或样式
随用随查，审查元素
图片懒加载
<img class="lazyload" data-original="图片地址" src="占位图片" alt="" />
需求：轮播图下方的图片全部通过懒加载的方式载入
分析：
①：整合懒加载插件(lazyload)
下包，导包
②：调整图片地址
data-original
③：调用插件方法
lazyload
- 工作中所有的功能都需要自己手写吗?
不需要 - 插件的使用方法，配置需要背下来吗?
不需要
06 全屏滚动-插件fullpage
下包：把插件下载到本地
导包：先导入 jQuery , 再导入插件 , 导入css(需要的话)
用包：根据文档(说明书)使用
<!-- 导入 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>
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
</div>
每个区域必须有 section 这个类名
$('#fullpage').fullpage({
....
})
更多的配置参数可以查阅官方文档:https://github.com/alvarotrigo/fullPage.js/tree/2.9.7
- fullpage插件在使用的时候一定要传入配置吗?
不需要 - fullpage插件的区域容器必须要有什么类名?
section
07-安全导航（案例）
<!-- 外层容器 -->
<div id="fullpage" class="fullpage">
<div class="section current"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
需求：整合全屏滚动效果，每次切屏完毕播放动画，支持来回滚动
分析：
①：整合fullpage插件
下包，导包
②：调用方法整合全屏滚动
fullpage
③：切屏完毕播放动画
afterLoad，current类，addClass
④：来回滚动
current类，removeClass
- 使用的回调函数叫什么名字?
afterLoad - 回调函数的第二个参数是什么?
索引
08-提交事件
form 标签本身具有提交数据的能力，但是现在基本不这么用
<form>
<input type="text" placeholder="用户名" />
<br />
<input type="password" placeholder="密码" />
<br />
<input type="submit" value="提交" />
<button>提交</button>
</form>
点击提交按钮，输入区域点击回车都会触发表单提交
表单中的 button 默认就是提交按钮
现在比较流行在表单的 submit 事件中阻止默认行为，自己获取数据并提交
$('form').submit(function (event) {
// 阻止默认行为
event.preventDefault()
// 阻止默认行为
return false
})
返回false 或者 preventDefault 都可以阻止默认行为
- 点击提交按钮或者在输入区域按回车会触发表单的什么事件？
submit - 事件中return什么值可以阻止默认行为?
false
09-日期选择器
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({
…
})
更多的配置参数可以查阅官方文档:https://github.com/fengyuanchen/datepicker/blob/master/README.md
- 插件默认显示的语言是中文还是英文?
英文 - 为了设置插件的语言为中文，需要导入什么?
中文语言包
10-表单验证
jQuery 的表单验证插件 validate , 验证用户在表单中输入的内容
下包：把插件下载到本地
导包：先导入 jQuery , 再导入插件 , 导入css(需要的话)
用包：根据文档(说明书)使用
<!-- 导入jQuery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 导入validate插件 -->
<script src="./jquery-validate/jquery-validate.js"></script>
初始代码如下：
$('form').validate({
// 放置常用配置
})
//html属性值的使用
<input
type="password"
name="password"
data-required
data-pattern=".{6,}" <!-- 长度大于等于6 -->
/>
<!-- 表单元素要放在 form 里面 -->
<input
type="password"
name="password"
data-required
data-describedby="password-error"
data-description="password"
data-pattern=".{6,}"
/>
<span class="error" id="password-error"></span>
$('form').validate({
description: {
password: {
required: '密码不能为空!',
pattern: '密码不能少于6位!',
},
},
1.校验密码
2.校验密码
3.校验复选框agree
- 这一节学习的插件是用来验证什么的?
验证表单
. 案例中校验密码长度用的是什么技术?
正则表达式
11-克隆
jQuery 中封装了克隆(复制)，节点的方法
// 不带事件
.clone()
// 带事件
.clone(true)
- 方法返回的还是 jQuery 对象
- 传入 true 事件也会一起克隆
- 克隆方法得到的是什么对象？
jQuery对象 - 希望事件一起克隆需要传递什么参数?
true
12-获取dom对象
jQuery 封装了获取内部 dom 对象的方法
// 播放视频
video标签.play()
// 暂停视频
video标签.pause()
// 重置表单
form表单.reset()
//jQuery没有封装以上方法
-
因为jQuery 并没有封装所有 dom 的方法
// 播放视频
( ′ v i d e o ′ ) . t r i g g e r ( ′ p l a y ′ ) / / 暂停视频 ('video').trigger('play') // 暂停视频 (′video′).trigger(′play′) // 暂停视频 (‘video’).trigger(‘pause’)
// 重置表单
$(‘form’).trigger(‘reset’) -
所以jQuery 通过trigger可以触发这些方法
// ① get方法获取
.get(索引)
// ② 中括号获取
[索引]
//通过dom对象来调用以上的方法（jQuery 并没有封装） -
索引从 0 开始
-
获取到的是 dom 对象
1.get方法从jQuery对象中获取dom对象
2.中括号方式从jQuery对象中获取dom对象
3.播放视频
3.1 jQuery方式-tirgger
3.2 DOM对象-索引[ ]
4.暂停视频
5.重置表单
- 可以使用 [] 还有一个什么方法来获取dom对象？
get方法 - 索引从几开始?
从0开始
13-人员管理（案例）
1.1新增-弹框及插件整合
需求：点击弹出新增框，整合日期及表单校验插件
分析：
①：点击新增按钮弹框带动画
click , fadeIn
②：整合日期插件
文档
③：整合表单校验插件
文档 , 非空 , 正则
^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
1.2新增-添加及关闭弹框
<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>
需求：点击提交新增数据到页面上，关闭弹框之后清空内容
分析：
①：关闭弹框之后，清空内容
fadeOut , reset , 抽取
②：表单校验通过之后
valid
③：新增数据，并且设置内容
克隆 , val , append
2.删除
<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>
需求：点击删除，直接删除整行
分析：
①：删除按钮事件绑定
委托 , click
②：tr播放淡出动画
parent , fadeOut
③：动画播放完毕，删除tr
回调函数 , remove
④：tbody中没有tr之后，有坑!!
克隆导致，tr删除完之后就不能在克隆，需要将tr隐藏，然后将克隆后的tr显示出来show（）方法
3.1 编辑-进入编辑状态
<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>
需求：点击提交，修改数据并关闭弹框
分析：
①：编辑按钮事件绑定
委托 , click
②：获取这一行的内容
parent , find
③：修改弹框标题和内容，并显示
fadeIn , val
④：新增功能受影响了没？
3.2 编辑-保存此次编辑
需求：点击编辑，弹出编辑框，并填入这一行的内容
分析：
①：点击提交校验表单
valid
②：修改被编辑tr的数据
共享tr , 修改tr
③：区分新增和编辑的逻辑
判断
④：新增功能受影响了没？
- 是否需要记忆插件的使用步骤？
不需要，随用随查 - 弹框的出现和隐藏动画分别是什么?
fadeIn , fadeOut - remove方法删除的是自己，还是子元素?
自己
14-表单序列化
jQuery 中封装了快速获取表单数据的方法 , 叫做序列化
$('form').serialize()
- 表单元素要有 name 属性才可以获取到 value 值
- 获取到的数据格式是 name1=value1&name2=value2 的 字符串
- serialize方法要能够获取到 value 值，表单元素要有什么属性？
name属性 - 获取到的数据是什么格式?
字符串 ， name1=value1&name2=value2….
15-插件机制
插件是 jQuery 提供的扩展机制 , 本质是往 jQuery 原型对象上添加方法
jQuery.fn.extend({
插件名 (参数) {
// 逻辑
}
})
- jQuery 是 $ 的别名
- jQuery 内部也是通过这种方式添加方法
- 通过 jQuery.fn.extend 是往什么地方添加功能？
原型 - 导入 jQuery 之后，会多2个全局变量，一个是 $ 一个是什么?
jQuery
16-工具方法
jQuery 除了封装了大量的 DOM 操作外，还提供了一些工具方法，这些方法通过 $ 或 jQuery 直接调用
// 遍历数组
$.each(数组, function (下标, 值) {})
// 遍历并返回新数组
$.map(数组,function(值){
// 返回新的值
})
- 不仅仅只有这2个方法
- 逐步被 ES6 及更高级的版本新增特性取代
- jQuery提供的工具方法只有2个？
有很多 - jQuery的工具方法和ES6及更高版本的新特性更推荐用哪个?
后者
17-版本差异
jQuery 主要有3个大的版本
- 1.x：兼容低版本的ie , 最后一个版本是1.12.4
- 2.x：不兼容低版本ie , 不在更新
- 3.x: 不兼容低版本ie , 更新中
- 兼容信息查看:https://jquery.com/browser-support/
- 历史版本下载:https://code.jquery.com/
- 大的版本一共有几个?
3个 - 不考虑兼容性的话用哪个?
最新版本
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
