# jQuery 概述

# JavaScript 库

• JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate，hide，show，比如获取元素等
• 简单理解：就是一个 JS 文件，里面对我们原生 js 代码进行了封装，存放到桌面，这样我们可以快速高效使用这些封装好的功能

# jQuery 概念

• jQuery 是一个快速，简洁的 JavaScript 库，倡导写少的代码做更多的事
• jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作，事件处理，动画设计和 Ajax 交互，学习 jQuery 的本质，就是学习调用这些函数（方法）

优点

• 轻量级，核心文件才几十 kb，不会影响页面加载速度
• 跨浏览器兼容，基本兼容现在主流的浏览器
• 链式编程，隐式迭代
• 对事件，样式，动画支持，大大简化了 DOM 操作
• 支持插件扩展开发，有着丰富的第三方插件
• 免费，开源

# jQuery 的基本使用

# jQuery 的下载

官网地址：jQuery

# jQuery 使用步骤

• 引入 jQuery 文件
• 直接调用

# jQuery 的入口函数

$(function(){

   ... // 此处是页面 DOM 加载完成的入口 

});

$(document).ready(function(){

   ... // 此处是页面 DOM 加载完成的入口 

});

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

# jQuery 的顶级对象 $

• $ 是 jQuery 的别称，在代码中可以使用 JQuery 代替，但一切为了方便，通常直接使用 $
• $ 是 jQuery 的顶级对象，相当于原生 JavaScript 中的 windows，把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 方法

# jQuery 对象 和 DOM 对象

• 用原生 JS 获取的对象就是 DOM 对象
• jQUery 方法获取的对象就是 jQuery 对象
• jQuery 对象本质：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）

# jQuery 对象和 DOM 对象相互转换

DOM 对象转换为 jQuery 对象

$('div')

jQuery 对象转换为 DOM 对象（两种方式）

$('div')[index]    //index 是索引号

$('div').get(index)    //index 是索引号

# jQuery 选择器

# jQuery 基础选择器

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

$('选择器')    // 里面选择器写 CSS 选择器

# 层级选择器

# 层级迭代

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

# jQuery 筛选器

# jQuery 筛选方法

# jQuery 里面得排他思想

<script>

        $(function() {

            // 1. 隐式迭代 给所有的按钮都绑定了点击事件

            $("button").click(function() {

                // 2. 当前的元素变化背景颜色

                $(this).css("background", "pink");

                // 3. 其余的兄弟去掉背景颜色 隐式迭代

                $(this).siblings("button").css("background", "");

            });

        })

</script>

# 链式编程

$("#content div").eq(index).show().siblings("div").hide();

# jQuery 样式操作

# 操作 css 方式

# 参数只写属性名，返回属性值

$(this).css("color");

# 参数是属性值，属性名，逗号分隔，属性必须加引号，值是数字可以不加

$(this).css("color","red");

# 参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({

    "color": "white",

    "width": 400

})

# 设置类样式方法

# 添加类

$("div").addClass("current");

# 移除类

$("div").removeClass("current");

# 切换类

$("div").toggleClass("current");

# 类操作与 className 区别

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

# jQuery 效果

# 显示隐藏效果

# 隐藏语法规范

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

# 显示语法规范

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

# 切换语法规则

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

# 隐藏参数

• 参数都可以省略，无动画直接显示
• speed：三种预定速度之一的字符串（"slow","normal","or","fast'）或者表示动画时长的毫秒
• easing：（Optional）用来指定切换效果，默认是 "swing"，可用参数 "linear"
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

# 滑动效果

# 下滑效果语法规范

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

# 上拉效果语法规范

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

# 滑动效果语法规范

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

# 效果参数

• 参数都可以省略，无动画直接显示
• speed：三种预定速度之一的字符串（"slow","normal","or","fast'）或者表示动画时长的毫秒
• easing：（Optional）用来指定切换效果，默认是 "swing"，可用参数 "linear"
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

# 事件切换

hover(function(){},function(){})

// 第一个函数是鼠标经过函数，第二个是鼠标离开执行的函数

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

# 动画或效果队列

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

# 停止队列

stop()

• stop () 方法用于停止动画或效果
• 注意：stop () 写到动画或者效果的前面，相当于停止上一次的动画

# 淡入淡出效果

# 淡入效果语法规范

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

# 淡入效果参数

• 参数都可以省略
• speed：三种预定速度之一的字符串（"slow","normal","or","fast"）或表示动画时长的毫秒数值
• easing：（Optional）用来指定切换效果，默认是 "swing"，可用参数 "linear"
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

# 淡出效果语法规范

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

# 淡出效果参数

• 参数都可以省略
• speed：三种预定速度之一的字符串（"slow","normal","or","fast"）或表示动画时长的毫秒数值
• easing：（Optional）用来指定切换效果，默认是 "swing"，可用参数 "linear"
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

# 淡入淡出切换效果

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

# 淡入淡出切换效果参数

• 参数都可以省略
• speed：三种预定速度之一的字符串（"slow","normal","or","fast"）或表示动画时长的毫秒数值
• easing：（Optional）用来指定切换效果，默认是 "swing"，可用参数 "linear"
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

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

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

# 效果参数

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

# 自定义动画 animate

# 语法

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

# 参数

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

# jQuery 属性操作

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

# 获取属性语法

prop("属性");

# 设置属性语法

prop("属性","属性值");

# 设置或获取自定义属性值 attr ()

# 获取属性语法

attr("属性");    // 类似于原生 getAttribute ()

# 设置属性语法

attr("属性","属性值");    // 类似于原生 setAttribute ()

# 数据缓存 date ()

# 附加数据语法

data("name","value");    // 向被选中元素附加数据

# 获取数据语法

data("name");        // 向被选中元素获取数据

# jQuery 内容文本值

# 普通元素内容 html ()（相当于原生的 inner HTML）

html()    // 获取元素内容

html("内容")    // 设置元素内容

# 普通元素文本内容 text () （相当于原生 innerText）

text()    // 获取元素的文本内容

text("文本内容")    // 设置元素的文本内容

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

# jQuery 元素操作

# 遍历操作

# 语法

$("div").each(function(index,domEle){

    // 代码块        

})

• each () 方法匹配的每一个元素，主要用 DOM 处理，each 每一个
• 里面的回调函数有两个参数：index 是每个元素的索引号，demEle 是每个 DOM 元素对象，不是 jQuery 对象
• 所以要想使用 jquery 方法，需要给这个 dom 元素转换为 jquery 对象 $(domEle)

# 创建元素

# 语法

$("<li></li>");

# 添加元素

# 内部添加

element.append("内容");    // 内部添加并且放在内容的最后面

element.prepend(li);        // 内部添加并且放到内容的最前面

# 外部添加

element.after("内容")    // 把内容放在目标元素后面

element.before("内容")    // 把内容放在目标元素前面

# 删除元素

element.remove()    // 删除匹配的元素（本身）

element.empty()    // 删除匹配的元素集合中所有的子节点

element.html("")    // 清空匹配的元素内容

# jQuery 尺寸，位置操作

# jQuery 尺寸

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

# jQuery 位置

# offset () 设置或元素偏移量

• offset () 方法设置或返回被选元素相当于文档的偏移坐标，跟父级没有关系
• 该方法有 2 个属性 left，top，offset ().top 用于获取距离文档顶部的距离，offset ().left 用于获取距离文档左侧的距离
• 可以设置元素的偏移：offset（{top: 10 , left: 10}）;

# position () 获取元素偏移

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

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

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

# jQuery 事件注册

# 单个事件注册

# 语法

element.事件(function(){})

$("div").click(function(){  事件处理程序})

# 事件处理 on () 绑定事件

# 语法

element.on(events,[selector],fn)

• events 一个或多个用空格分隔的事件类型，如 "click" 或 "keydown"
• selector 元素的子元素选择器
• fn 回调函数，即绑定在元素身上的监听函数

# on () 方法优势 1

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

$("div").on({

    mouseover: function(){},

    mouseout: function(){},

    click:function(){}

});

如果事件处理程序相同

$("div").on("mouseover mouseout",function(){

    $(this).toggleClass("current");

})

# on () 方法优势 2

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

$("ul").on('click','li',function(){

    alert("Hello World");

})

# on () 方法优势 3

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

# 事件处理 off () 解绑事件

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

$("p").off()    // 解绑 p 元素所有事件的处理程序

$("p").off("click");    // 解绑 p 元素上面的点击事件，后面的 foo 是侦听函数名

$("ul").off("click","li");    // 解绑事件委托

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

$("div").one("click",function(){})

# 自动触发事件 trigger ()

element.click();    // 第一种简写形式

element.trigger("type");    // 第二种自动触发模式

$("p").on("click",function(){

    alert("123");'

})

$("p").trigger("click");    // 此时自动触发点击事件，不需要鼠标点击

element.triggerHandler(type);    // 第三种自动触发模式

# jQuery 事件对象

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

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

# jQuery 对象拷贝对象

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

• deep：如果设为 true 为深拷贝，默认为 false。浅拷贝
• target：要拷贝的目标对象
• object1：待拷贝到第一个对象的对象
• objectN：待拷贝到第 N 个对象的对象
• 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
• 深拷贝，前面加 true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响到拷贝对象

# 多库共存

# 问题概述

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

# 客观需求

需要一个解决方案，让 jQuery 和其他的 js 库不存在冲突，可以同时存在

# jQuery 解决方案

• 把里面的 $ 符号 统一改为 jQuery，比如 jQuery.("div")
• jQuery 变量规定新的名称： $ .noConflict() var xx = $ .noConflict();

# jQuery 插件

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

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

jQuery 插件常用网站

• jQuery 插件库 https://www.jq22.com/
• jQuery 之家：jQuery 之家 - 自由分享 jQuery、html5、css3 的插件库 (htmleaf.com)

jQuery 插件使用步骤

• 引入相关文件（jQuery 文件和插件文件）
• 复制相关 html，css，js（调用插件）

jQuery 插件演示：

• 1. 瀑布流

• 2. 图片懒加载（图片使用延迟加载可提高网页下载速度，它能帮助减轻服务器负载）当我们页面滑动到可视区域，再显示图片，我们使用 jQuery 库 插件库 EasyLazyload，注意，此时的 js 引入文件和 js 调用必须写到 DOM 元素最后面，ctrl + h 键 全局替换

• 3. 全屏滚动（fullpage.js）gitHub：https://github.com/alvarotrigo/fullPage.js https://www.dowebok.com/demo/2014/77/

• 4.bootstrap 插件：bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js 插件使用，也必须引入 jQuery 文件