jQuery的介绍与应用

jQuery已经淘汰了，有兴趣的同学可以瞅瞅，等我整理笔记，到时候发布一些VUE的笔记

一、jQuery概述

1.1、JavaScript库

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

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

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

1.2、常见的JavaScript库

● jQuery

● Prototype

● YUI

● Dojo

● Ext JS

● 移动端的zepto

这些库都是对原生JavaScript的封装,内部都是用JavaScript实现的。

1.3、jQuery的概念

jQuery是一个快速、 简洁的JavaScript库,其设计的宗旨是 “write Less , Do More”

即倡导写更少的代码,做更多的事情。

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

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

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

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

1.4、jQuery的优点

● 轻量级。 核心文件才几十kb ,不会影响页面加载速度。

● 跨浏览器兼容。 基本兼容了现在主流的浏览器。

● 链式编程、 隐式迭代。

● 对事件、 样式、动画支持,大大简化了DOM操作。

● 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等。

● 免费、开源。

二、jQuery的基本使用

2.1、jQuery 的下载

官网地址: https://jquery.com/

版本:

● 1x :兼容IE678等低版本浏览器,官网不再更新。

● 2x:不兼容IE 678等低版本浏览器,官网不再更新。

● 3x :不兼容IE 678等低版本浏览器,是官方主要更新维护的版本。

各个版本的下载: https://code.jquery.com/

2.2、jQuery使用步骤

1.引入jQuery文件。

2.使用即可。

2.3、jQuery的入口函数

① 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。

② 相当于原生js中的DOMContentl oaded 。

③ 不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、 图片加载完毕才执行内部代码。

2.4、jQuery的顶级对象$

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

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

2.5、jQuery 对象和DOM对象

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

\2. jQuery方法获取的元素就是jQuery对象。

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

4. jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScirpt 属性和方法。

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

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

1. DOM对象转换为jQuery对象: $(DOM对象)

2. jQuery对象转换为DOM对象(两种方式)

jQuery常用API

1.1、jQuery 基础选择器

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

1.2 、jQuery 层级选择器

1.3、隐式迭代(重要)

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

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

1.4、jQuery 筛选选择器

1.5、jQuery筛选方法(重点)

parents $(“li”).parents(“.div”) 查找所有父级元素中的div

更推荐用红框的写法筛选第几个元素，这样便于用变量。

重点记住: parent()children()find()siblings()eq()

1.6、jQuery里面的排他思想

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

1.7、链式编程

链式编程是为了节省代码量,看起来更优雅。

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

二、jQuery样式操作

2.1 操作css方法

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

1.参数只写属性名,则是返回属性值

2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号。值如果是数字可以不用跟单位和引号。

3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号。（如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号）

2.2设置类样式方法

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

1.添加类addClass()

2.删除类removeClass()

3.切换类toggleClass()

（有这个类就移除，没有就添加）

2.3、类操作与className区别

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

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

三、jQuery效果

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

显示隐藏

滑动

淡入淡出

自定义动画

3.1、显示隐藏效果

1.显示语法规范

显示参数

(1) 参数都可以省略,无动画直接显示。

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

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

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

2.隐藏语法规范

隐藏参数

(1) 参数都可以省略，无动画直接显示。

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

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

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

3.切换语法规范

切换参数

(1) 参数都可以省略,无动画直接显示。

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

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

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

3.2、滑动效果

1.下滑效果语法规范

2.下滑效果语法规范

3.滑动切换效果语法规范

各个参数

(1) 参数都可以省略。

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

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

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

3.3、事件切换

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

( 2 ) out:鼠标移出元素要触发的函数(相当于mouseleave )。

( 3 ) 事件切换hover 就是鼠标经过和离开的复合写法。

( 4 ) 事件切换hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数。

3.4、动画队列及其停止排队方法

1.动画或效果队列

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

2.停止排队

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

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

3.5、淡入淡出效果

1.淡入效果语法规范

2.淡出效果语法规范

3.淡入淡出切换效果语法规范

效果参数

(1 )参数都可以省略。

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

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

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

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

效果参数

( 1 ) opacity：透明度必须写,取值0~1之间。

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

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

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

3.6自定义动画animate

1.语法

参数：

( 1 ) params:想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。 其余参数都可以省略。

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

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

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

四、jQuery属性操作

4.1、设置或获取元素固有属性值prop()

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

1.获取属性语法.

2.设置属性语法

4.2、设置或获取元素自定义属性值attr()

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

1.获取属性语法

2.设置属性语法

该方法也可以获取H5自定义属性

4.3、数据缓存data()

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

1.附加数据语法

2.获取数据语法

同时，还可以读取HTML5自定义属性data-index 。得到的是数字型

这个方法获取 data-index h5 自定义属性第一个不用写 data- 而且返回的是数字型

五、jQuery内容文本值

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

5.1、普通元素内容html() (相当于原生inner HTML)

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

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

同上。

六. jQuery元素操作

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

6.1、遍历元素

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

语法1：

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

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

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

例：让每个div有不同颜色

语法2：

1.$.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象

2.里面的函数有2个参数: index 是每个元素的索引号; element遍历内容

6.2、创建元素

语法:

动态的创建了一个

• 6.3、添加元素

  1.内部添加

  
  把内容放入匹配元素内部最后面,类似原生appendChild 。
  
  内部添加并且放到内容的最前面，

  2.外部添加

  
  

  ① 内部添加元素,生成之后,它们是父子关系。

  ② 外部添加元素,生成之后,他们是兄弟关系。

  6.4、删除元素

  
  
  
  

  七、jQuery尺寸、位置操作

  7.1、jQuery 尺寸

  

  ● 以上参数为空,则是获取相应值,返回的是数字型。

  ● 如果参数为数字,则是修改相应值。

  ● 参数可以不必写单位。

  7.2、jQuery 位置

  位置主要有三个: offset()、position()、scrollTop()/scrollLeft()

  1.offset()设置或获取元素偏移

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

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

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

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

  2.position()获取元素偏移

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

  ② 这个方法只能获取不能设置偏移。

  3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

  ① scrollTop() 方法设置或返回被选元素被卷去的头部。

  jQuery事件

  一、jQuery事件注册

  单个事件注册

  语法：

  
  

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

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

  二、事件处理

  2.1、事件处理 on()绑定事件

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

  语法:

  

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

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

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

  例：

  

  优势：

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

  语法：

  
  

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

  语法：

  

  在此之前有bind(, live0 delegate0等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。

  ● 动态创建的元素, click()没有办法绑定事件, on()可以给动态生成的元素绑定事件。

  2.2、事件处理off()解绑事件

  Off()方法可以移除通过on0方法添加的事件处理程序。

  语法：

  

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

  2.3、自动触发事件trigger()

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

  有三种方式：

  
  
  

  trigger()语法：

  
  元素. triggerHandler(“事件”)就是不会触发元素的默认行为。

  2.4、事件切换toggle

  

  当单击jq对象对应的组件后，会执行fn1，第二次点击会执行fn2。

  注意: 1.9版本.toggle()方法删除，jQuery Migrate (迁移)插件可以恢复此功能。

  2.5、jQuery事件对象

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

  

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

  阻止冒泡: event.stopPropagation0

  2.6、补充

  

  jQuery其他方法

  一、jQuery拷贝对象extend ()

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

  语法：

  

  参数值：

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

  2.target:要拷贝的目标对象。

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

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

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

  6.深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性,会合并到一起。修改目标对象不会影响被拷贝对象。

  二、多库共存

  问题概述:

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

  客观需求:

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

  jQuery解决方案:

  1.把里面的$符号统-改为jQuery。 比如jQuery("div’)

  2.jQuery变量规定新的名称: $.noConflict() var xx = $.noConflict();

  三、jQuery插件

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

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

  3.1、jQuery插件常用的网站:

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

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

  3.2、jQuery插件使用步骤:

  1.引入相关文件。(jQuery文件 和插件文件)

  2.复制相关html. Css、 js (调用插件)。

  3.3、jQuery插件演示:

  1.瀑布流

  2.图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)

  当我们页面滑动到可视区域,再显示图片。

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

  3.全屏滚动( fllpagejis )

  gitHub : https://ithub.com/alvrotrigopfullPagejis

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

  3.4、bootstrap JS插件:

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

  例（返回顶部显示案例）
  

  开发实例

  一、下拉菜单

  JS代码：

  

  优化后JS：

  

  简化后JS：

  

  最终简化版：

  
  Bug修复最终简化版：
  

  二、淘宝精品推荐栏

  思路：

  ① 核心原理:鼠标经过左侧盒子某个小i ,就让内容区盒子相对应图片显示,其余的图片隐藏。

  ② 需要得到当前小i的索引号,就可以显示对应索引号的图片。

  ③ jQuery得到当前元素索引号**$(this).index()**。

  ④ 中间对应的图片,可以通过eq(index)方法去选择。

  ⑤ 显示元素show0隐藏元素hide()。

  JS代码：

  

  三、tab栏切换

  思路：

  ①点击上部的li。当前li添加current类,其余兄弟移除类。

  ②点击的同时,得到当前li的索引号

  ③让下部里面相应索引号的item显示,其余的item隐藏

  JS代码：

  

  四、王者荣耀手风琴效果

  思路：

  ①鼠标经过某个小li有两步操作。

  ②当前小li宽度变为224px ,同时里面的小图片淡出,大图片淡入。

  ③其余兄弟小li宽度变为69px ,小图片淡入，大图片淡出。

  HTML代码（部分）：

  

  （初始显示小图，隐藏大图，小图定位到大图上，鼠标到哪组图，显示大图隐藏小图）

  JS 代码：

  

  五、全选功能

  思路：

  ① 全选思路:里面3个小的复选框按钮( j-checkbox )选中状态( checked )跟着全选按钮( checkall )走。

  ② 因为checked是复选框的固有属性,此时我们需要利用prop0方法获取和设置该属性。

  ③ 把全选按钮状态赋值给多小复选框就可以了。

  ④当我们每次点击小的复选框按钮,就来判断:

  ⑤如果小复选框被选中的个数等于复选框个数就应该把全选按钮选上,否则全选按钮不选。

  ⑥:checked 选择器:checked 查找被选中的表单元素。

  HTML 代码：

  

  JS 代码：

  
  

  六、购物车模块

  6.1、购物车增减商品

  思路：

  ① 核心思路:首先声明一个变量,当我们点击+号( increment) , 就让这个值++ ,然后赋值给文本框。

  ② 注意1 :只能增加本商品的数量,就是当前+号的兄弟文本框( itxt )的值。

  ③ 修改表单的值是val()方法。

  ④ 注意2:这个变量初始值应该是这个文本框的值,在这个值的基础上++。要获取表单的值。

  ⑤减号( decrement )思路同理,但是如果文本框的值是1 ,就不能再减了。

  JS代码：
  
  

  6.2、购物车修改商品小计

  思路：

  ①核心思路:每次点击+号或者号,根据文本框的值剩以当前商品的价格就是商品的小计

  ②注意1 :只能增加本商品的小计,就是当前商品的小计模块( p-sum )

  ③修改普通元素的内容是text()方法

  ④注意2:当前商品的价格,要把￥符号去掉再相乘 截取字符串substr(1)

  JS 代码：
  
  

  优化版：

  ⑤ parents( '选择器’ ) 可以返回指定祖先元素。

  ⑥最后计算的结果如果想要保留2位小数通过**toFixed(2)**方法

  

  修复BUG（手动输入不会更改总价）版：

  ⑦ 用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件。

  ⑧ 用最新的表单内的值乘以单价即可但是还是当前商品小计。

  

  6.3、总计模块

  思路：

  ① 核心思路:把所有文本框里面的值相加就是总计数量。总额同理。

  ② 文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即呵。

  ③ 点击+号-号,会改变总计和总额,如果用户修改了文本框里面的值同样会改变总计和总额。

  ④ 因此可以封装yi个函数求总计和总额的，以上2个操作调用这个函数即可。

  ⑤ 注意1 :总计是文本框里面的值相加用val() 总额是普通元su的内容用text()。

  
  （再点击或手动修改后直接调用就行）

  6.4、删除商品模块

  思路：

  ① 核心思路:把商品remove0删除元素即可。

  ② 有三个地方需要删除: 1. 商品后面的删除按钮2.删除选中的商品3.清理购物车。

  ③ 商品后面的删除按钮: -定是删除当前的商品,所以从$(this)出发。

  ④删除选中的商品:先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品。

  JS代码：

  

  6.5、给选中商品添加背景

  思路：

  ① 核心思路:选中的商品添加背景,不选中移除背景即可。

  ② 全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景。

  ③ 小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景。

  ④ 这个背景,可以通过类名修改,添加类和删除类。

  JS代码：

  
  

  七、发布微博案例

  思路：

  ①点击发布按钮，动态创建一个小li ,放入文本框的内容和删除按钮,并且添加到ul中。

  ②点击的删除按钮,可以删除当前的微博留言。

  HTML 代码：

  

  JS 代码：

  

  

  八、带有动画的返回顶部

  思路：

  ①核心原理:使用animate动画返回顶部。

  ②animate动画函数里面有个scrollTop属性,可以设置位置。

  ③但是只有可以元素做动画，因此$( “body,html” ).animate(scrollTop: 0})
  
  

  九、电梯导航案例

  思路：

  ①当我们滚动到今日推荐模块,就让电梯导航显示出来。

  ②点击电梯导航页面可以滚动到相应内容区域。

  ③核心算法:因为电梯导航模块和内容区模块一对应的。

  ④当我们点击电梯导航某个小模块,就可以拿到当前小模块的索引号。

  ⑤就可以把animate要移动的距离求出来:当前索引号内容区模块它的offst).top。

  ⑥然后执行动画即可。

  JS代码：

  

  显示隐藏优化版：

  
  
  

  ① 当我们点击电梯导航某个小i，当前小i添加current类,兄弟移除类名。

  ② 当我们页面滚动到内容区域某个模块,左侧电梯导航,相对应的小i模块,也会添加current类,兄弟移除current类。

  ③ 触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面。

  ④ 需要用到each ,遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号。

  ⑤ 判断的条件:被卷去的头部大于等于内容区域里面每个模块的offset().top。

  ⑥ 就利用这个索引号找到相应的电梯导航小li添加类。

  ⑦ 节流阀（互斥锁）。