💥此MD/PDF/HTML文档由 @竹梦者也 编辑制作,不可贩卖❌。仅供学习交流使用,下载后切勿随意传播。转载麻烦加上出处~

📌欢迎在留言区提供修改建议~

💌本文内容和代码来自于Pink老师的JQ视频教程

 

✅2021.6.22 @竹梦者也(https://www.zjgsuzjx.top)

 

 

一、jQuery入门

一、jQuery概述

1. JavaScript库

JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。

简单理解:就是一个JS文件,里面对我们原生JS代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。

常见的JavaScript库:

这些库都是对原生JavaScript的封装,内部都是用JavaScript实现的,我们主要学习的是jQuery。

2. jQuery的概念

jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

j就是JavaScript;Query查询;意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互

学习jQuery本质:就是学习调用这些函数(方法)。

jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

3. jQuery的优点

二、jQuery的基本使用

1. jQuery的下载

https://jquery.com

2. jQuery的使用步骤

引入jQuery文件、使用即可。

3. jQuery的入口函数

4. jQuery的顶级对象$

$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。

$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成Query对象,就可以调用jQuery的方法。

5. jQuery 对象和DOM对象

用原生JS获取来的对象就是DOM对象

jQuery方法获取的元素就是jQuery对象

jQuery对象本质是:利用对DOM对象包装后产生的对象(伪数组形式存储)。

jQuery对象只能使用jQuery方法,DOM对象则使用原生的Javascirpt属性和方法

DOM对象与jQuery对象之间是可以相互转换的。

因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM对象转换为jQuery对象

jQuery对象转换为DOM对象

二、jQuery 常用API

一、jQuery 选择器

1. jQuery 基础选择器

原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准

b94b2b1dfe6415fed5b8e06123822dca.jpg

2. jQuery 层级选择器

7b7ab8980fc81310cfbb9732af58d120.jpg

3. 隐式迭代

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

4. jQuery 筛选选择器

d964837142f814826f091181e4eaaf2a.jpg

5. jQuery 筛选方法

e41711bb9476a86e56ab9fe2e9531253.jpg

仿微博下拉菜单

其它方法

重点记住:parent children find siblings eq

6. jQuery 里面的排他思想

想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。

淘宝服饰精品案例分析

也是用排他思想

7. 链式编程

上面案例的代码其实可以简化:

使用链式编程一定注意是哪个对象执行样式

二、jQuery 样式操作

1. 操作css方法

jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。

如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号

2. 设置类样式方法

作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点

Tab切换栏案例

3. 类操作与className区别

原生JS中className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作,不影响原先的类名。

三、jQuery效果

jQuery给我们封装了很多动画效果,最为常见的如下:

2b12a76eadc4cf8a686fb13012b7b883.jpg

1. 显示隐藏效果

语法

显示参数

(1)参数都可以省略,无动画直接显示。 (2)speed:三种预定速度之一的字符串(“slow”,“normal",or“fast')或表示动画时长的毫秒数值(如:1000)。 (3)easing:(Optional)用来指定切换效果,默认是“swing",可用参数“linear"。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

手册:jQuery API 中文文档

例子

2. 滑动效果

3. 事件切换

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter) (2)out:鼠标移出元素要触发的函数(相当于mouseleave)

导航栏下拉菜单优化

4. 动画队列及其停止排队方法

动画或效果队列

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

停止排队

(1)stop()方法用于停止动画或效果。

(2)注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画。

5. 淡入淡出效果

淡入效果语法规范

淡入淡出切换效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的符串(“slow",“normal",or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional)用来指定切换效果,默认是“swing",可用参数“linear"。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

渐进方式调整到指定的不透明度

切换透明度案例

6. 自定义动画 animate

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数,每个元素执行一次。

注意div要加定位

王者荣耀手风琴效果案例

四、jQuery 属性操作

1. 设置或获取元素固有属性值 prop

所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href,比如<input>元素里面的type。

2. 设置或获取元素自定义属性值 attr

用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index=“1"。

3. 数据缓存data

data方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。

购物车复选框案例

五、jQuery内容文本值

主要针对元素的内容还有表单的值操作。

普通元素内容html(相当于原生innerHTML):

普通元素文本内容text(相当与原生innerText):

表单的值val(相当于原生value):

购物车增减商品数量案例

六、jQuery 元素操作

主要是遍历、创建、添加、删除元素操作。

1. 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历

第一种方法:

each方法遍历匹配的每一个元素。主要用DOM处理。

里面的回调函数有2个参数:index是每个元素的索引号;demEle是每个DOM元素对象,不是jquery对象

所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)

还有第二种方法遍历:

第一种方法适合用户遍历DOM,第二种方法适合用于遍历数据。

购物车总金额计算案例

2. 创建元素

3. 添加元素

内部添加元素,生成之后,它们是父子关系。外部添加元素,生成之后,他们是兄弟关系。

4. 删除元素

购物车删除商品模块案例

购物车选中商品添加背景案例

七、jQuery尺寸、位置操作

1. jQuery尺寸

6f43e0e2be8e33409f9875f45699eb32.jpg

2. jQuery位置

位置主要有三个:offset、position、scrollTop/scrolleft

offset设置或获取元素偏移

① offset0方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。

② 该方法有2个属性left、top。offset0.top用于获取距离文档顶部的距离,offset0.left用于获取距离文档左侧的距离。

③ 可以设置元素的偏移:offset({top: 10,left: 30});

position获取元素偏移

position方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。

scrolITop/scrollLeft设置或获取元素被卷去的头部和左侧

scrolITop方法设置或返回被选元素被卷去的头部。

带有动画的返回顶部

电梯导航案例

三、jQuery 事件

一、jQuery事件注册

单个事件注册

语法:

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

二、jQuery 事件处理

1. 事件处理on绑定事件

on方法在匹配元素上绑定一个或多个事件的事件处理函数。

events:一个或多个用空格分隔的事件类型,如“click"或“keydown"。

selector:元素的子元素选择器。

fn:回调函数即绑定在元素身上的侦听函数。

on方法优势1

可以绑定多个事件,多个处理事件处理程序。

on方法优势2

可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素

on方法优势3

动态创建的元素,click0没有办法绑定事件,on可以给动态生成的元素绑定事件

微博发布案例

2. 事件处理off

解绑事件off方法可以移除通过on方法添加的事件处理程序。

如果有的事件只想触发一次,可以使用one来绑定事件。

3. 自动触发事件trigger

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

第三种和前两种的区别在于,比如input获得焦点触发功能,但是第三种不会获得焦点,第二种获得了焦点。

三、jQuery 事件对象

事件被触发,就会有事件对象的产生。

阻止默认行为:event.preventDefault 或者 return false

阻止冒泡:event.stopPropagation

四、jQuery 其它方法

一、jQuery 拷贝对象

如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法

deep:如果设为true为深拷贝,默认为false浅拷贝

target:要拷贝的目标对象

object1:待拷贝到第一个对象的对象。

objectN:待拷贝到第N个对象的对象。

浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象

240fcd45d7e0c75c00f38271a8f2888a.jpg

深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象。

2baaf7ce1e2cb850d835090819ccb0b4.jpg

二、多库共存

问题概述

jQuery使用作为标示符,随jQuery的流行,其他js库也会用这S作为标识符,这样一起使用会引起冲突。

客观需求

需要一个解决方案,让jQuery和其他的JS库不存在冲突,可以同时存在,这就叫做多库共存

jQuery解决方案

把里面的$符号统一改为jQuery。比如jQuery("div')

jQuery变量规定新的名称:

三、jQuery 插件

jQuery功能比较有限,想要更复杂的特效效果,可以借助于jQuery插件完成。

注意:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为jQuery插件。

jQuery插件常用的网站

jQuery插件库 http://www.jq22.com/

jQuery之家 http://www.htmleaf.com/

jQuery插件使用步骤

  1. 引入相关文件。(jquery文件和插件文件)
  2. 复制相关html、css、js(调用插件)。

jQuery 插件演示

  1. 瀑布流
  2. 图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)当我们页面滑动到可视区域,再显示图片。

我们使用jquery插件库EasyLazyload。注意,此时的js引入文件和js调用必须写到DOM元素(图片)最后面

  1. 全屏滚动(fullpage.js)

    gitHub : https://github.com/alvarotrigo/fullPage.js

    中文翻译网站:http://www.dowebok.com/demo/2014/77/

  2. bootstrap JS插件:

    bootstrap框架也是依赖于jQuery开发的,因此里面的js插件使用,也必须引入jQuery文件。

toDoList案例

重点是将数据储存到浏览器缓存当中。

建议自己做一下

思路

① 文本框里面输入内容,按下回车,就可以生成待力事项。

② 点击待办事项复选框,就可以把当前数据添加到已完成事项里面。

③ 点击已完成事项复选框,就可以把当前数据添加到待办事里面。

④ 但是本页面内容刷新页面不会丢失