普歌：jQuery总结

jQuery概述

jQuery概念:

jQuery是一个快速、简洁的JavaScript库，j就是JavaScript；query查询：伊苏就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码。
学习jQuery本质：就是学习调用这些函数（方法）。 目的：加快前端人员的代码速度，可以非常方便的调用和使用它，提高开发率。

JavaScript库：

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

仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以。

常见的JavaScript库：

• jQuery
• prototype
• YUI
• Dojo
• Ext JS
• 移动端的zepto

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

jQuery优点：

• 轻量级。核心文件猜及时Kb,不会影响页面加载速度
• 跨浏览器兼容，基本兼容了现在主流的浏览器
• 连式编程、隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持插件扩展开发。有着丰富的第三方的插件，例如：属性菜单、日期控件、轮播图等
• 免费、开源

jQuery基本使用:

1. 引入jQuery
2. 使用即可

jQuery的入口函数:

$(function() {
	...  //此处是页面DOM加载完成的入口
})

$(document).ready(function) {
	...  //此处是页面DOM加载完成的入口
});

1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
2.相当于原生js中的DOMContenLoaded。
3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
4.更推荐使用第一种方式。

jQuery的顶级对象 $:

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

jQuery的顶级对象 $:

1.用原生JS获取来的对象就是DOM对象。
2.jQuery方法获取的元素就是jQuery对象。
3.jQuery对象本质是：利用$对DOM对象包装后产生的对象（维数组形式存储）。


DOM对象与jQuery对象之间是可以相互转换的
原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性额方法需要把jQuery对象转换为DOM对象才能使用。

1.DOM对象转换为jQuery对象： 
$ ( DOM对象 )
$ ( ' div ' )
2. jQuery对象转换为DOM对象（两种方式）
$ ( ' div ' ) . [ index ]  index是索引号
$ ( ' div ' ) . get ( index )  index 是索引号

jQuery常用API

jQuery基础选择器：

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

$ ( “选择器” ) 里面选择器直接写css选择器即可，但是要加引号

1.jQuery层级选择器

jQuery设置样式：
$ ( 'div' ) . css ( '属性' , '值' )

隐式迭代（重要）
便利内部DOM元素（维数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化的操作，方便调用。

2.jQuery筛选选择器

3.jQuery里面的排他思想

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

4.链式编程

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

$ (this).css('color','red').sibling() . css('color','');

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

jQuery样式操作:

1.操作css方法：

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

1.参数只写属性名，则是返回属性值
$(this).css("color");

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，指如果是数字可以不用跟单位和引号
$(this).css("color","red");

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号
$(this).css({"color":"white","font-size":"20px"});

2.设置类样式方法：

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

1.添加类：
$("div").addClass("current");

2.移除类：
$("div").removeClass("current");

3.切换类
$("div").toggleClass("current");

3.类操作与className区别

原生JS中className 会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery效果:

1.显示隐藏效果

1）.显示语法规范

show([[speed],[easing],[fn]])

2.显示参数

1.参数都可以省略，无动画直接显示。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

2）.隐藏语法规范

hide([[speed],[easing],[fn]])

2.隐藏参数

1.参数都可以省略，无动画直接显示。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

3）.下滑效果语法规范

slideDown([[speed],[easing],[fn]])

2.下滑效果参数

1.参数都可以省略，无动画直接显示。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

4）.上滑效果语法规范

slideUp([[speed],[e]asing],[fn]])

2.上滑效果参数

1.参数都可以省略，无动画直接显示。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

5）.滑动切换效果语法规范

slideToggle([[speed],[easing],[fn]])

2.滑动切换效果参数

1.参数都可以省略，无动画直接显示。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

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

1.动画或效果队列

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

2.停止排队

stop()

1.stop()方法用于停止动画会效果。
2.注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

淡入淡出效果

1）.淡入效果语法规范

fadeIn([[speed],[easing],[fn]])

2.淡入效果参数

1.参数都可以省略，无动画直接显示。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

2）.淡出效果语法规范

fadeOut([[speed],[easing],[fn]])

2.淡出效果参数

1.参数都可以省略，无动画直接显示。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

3）.淡入淡出效果语法规范

fadeToggle([[speed],[easing],[fn]])

2.淡入淡出效果参数

1.参数都可以省略，无动画直接显示。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

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

fadeTo([speed],opacity,[easing],[fn]])

2.效果参数

1.opacity透明度必须写，取值0~1之间。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）必须写。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

5）.自定义动画animate

animate(params,[speed],[easing],[fn]])

2.效果参数

1.params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft.其余参数可以省略。
2.speed：三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3.easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
4.fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

属性操作:

设置或获取元素固有属性值prop（）

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

1.获取属性语法
prop("属性")

2.设置属性语法
prop("属性","属性值")

设置或获取元素自定义属性值 attr（）

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

1.获取属性语法
attr("属性")		//类似原生getAttribute()

2.设置属性语法
attr("属性","属性值")		类似原生getAttribute()

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

内容文本属性值:

元素操作:

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

尺寸、位置操作:

• 以上参数为空，则是获取相应值，返回的是数字型
• 如果参数位数字，则是修改相应值
• 参数可以不必写单位
  

jQuery事件

事件注册

单个注册事件：

Element.事件（function（）{}）
$("div").Click(function(){事件处理程序}）

其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll

事件处理

事件处理 on()绑定事件

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

Element.on(eevents,[selector],fn)

Events:一个或多个用空格分隔的事件类型，如“click”或“keydown”
Selector:元素的子元素选择器
fn:回调函数 即绑定在元素身上的侦听函数

事件处理 off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

$("p").off();		//解绑p元素所有事件处理程序
$("p").off("click");		//解绑p元素上面的点击事件  后面的foo是侦听函数名
$("p").off("click","li");		//解绑事件委托

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

自动触发事件trigger（）

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

 - Element.click()  //第一种简写形式
 - Element.trigger("type")  //第二种自动触发模式
 - Element.triggerHandler(type)  //第三种自动触发模式（不会触发元素的默认行为）

事件对象

事件被触发，就会有事件event对象的产生

Element.on(events,[selector],function(event){})

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

jQuery其他方法

对象拷贝

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

$.extend([deep],target,object1,[objectN])

多库共存

jQuery插件

~~~~~~~~~~~~~~~~

jQuery总结~可以做一些小练习~
小可爱们,喜欢的可以 点赞关注❤留下你们宝贵的意见~