学习地址：jQuery Pink老师_哔哩哔哩_bilibili
目录
1.jQuery概述
1.1Javascript库
仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找就可以了。
JavaScript库：即library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
常见的JavaScript库
-
jQuery
-
Prototype
-
YUI
-
Dojo
-
Ext JS
-
移动端的zepto
这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。
1.2jQuery的优点
优点
-
轻量级。核心文件才几十kb，不会影响页面加载速度
-
跨浏览器兼容。基本兼容了现在主流的浏览器
-
链式编程、隐式迭代
-
对事件、样式、动画支持，大大简化了DOM操作
-
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
-
免费、开源
2.jQuery的基本使用
2.1下载jQuery
2.2jQuery的使用步骤
1.引入jQuery文件
<script src="./jquery.min.js"></script>2.使用即可
2.3jQuery的入口函数
$(function(){
...//此处是页面DOM加载完成的入口
})
$('document').ready(function(){
...//此处是页面DOM加载完成的入口
})
1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
2.相当于原生js中的DOMContentLoaded.
3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
2.4jQuery的顶级对象
1.$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$
2.$是jQuery的顶级对象
2.5jQuery对象和DOM对象
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是索引号
3.jQuery选择器
3.1jQuery基础选择器
$('选择器') //里面选择器直接写CSS选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $('#id') | 获取指定ID的元素 |
| 全选选择器 | $('*') | 匹配所有元素 |
| 类选择器 | $('.class') | 获取同一类class的元素 |
| 标签选择器 | $('div') | 获取同一类标签的所有元素 |
| 并集选择器 | $('div,p,li') | 选取多个元素 |
| 交集选择器 | $('li.current') | 交集元素 |
3.2层叠选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $('ul>li') | |
| 后代选择器 | $('ul li') |
jQuery设置样式
$('div').css('属性','值')
3.3隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用。
3.4jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $('li:first') | 获取第一个li元素 |
| :last | $('li:last') | 获取最后一个li元素 |
| :eq(index) | $('li:eq(2)') | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| :odd | $('li:odd') | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even') | 获取到的li元素中，选择索引号为偶数的元素 |
3.5jQuery筛选方法(重点)
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $('li').parent(); | 查找父级(最近一级的父元素) |
| children(selector) | $('ul').children('li'); | 相当于$('ul>li'),最近一级(亲儿子) |
| find(selector) | $('ul').find('li'); | 相当于$('ul li')，后代选择器 |
| siblings(selector) | $('.first').siblings('li') | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $('.first').nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $('.last').prevAll() | 查找当前 元素之前所有的同辈元素 |
| hasClass(class) | $('div').hasClass('protected') | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $('li').eq(2) | 相当于$('li:eq(2)'),index从开始 |
案例
-
核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余图片隐藏。
-
需要得到当前小li的索引号，就可以显示对应索引号的图片
-
jQuery得到当前元素索引号$(this).index()
4.jQuery样式操作
4.1操作css方法
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
1.参数只写属性名，则是返回属性值
$(this).css('color');
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color','red');
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({'color':'white','font-size':'20px'}); //复合属性需要驼峰命名法， 如果值不是数字，则需要加引号
4.2设置类样式方法
作用等同于以前的classList,可以操作类样式，注意操作类里面 的参数不要加点
1.添加类
$('div').addClass('current');
2.移除类
$('div').removeClass('current');
3.切换类
$('div').toggleClass('current');
4.3类操作与clasName区别
原生JS中className会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作，不影响原先的类名
5.jQuery效果
5.1显示隐藏效果
1.显示语法规范
show([speed,[easing],[fn]])
2.显示参数
(1)参数都可以省略，无动画直接显示
(2)speed：三种预定速度之一的字符串（“show","normal",or "fast")或表示动画时长的毫秒数值（如：1000）
(3)easing:（Optional）用来指定切换效果，默认是”swing"，可用参数"linear"
(4)fn:回调函数，在动画完成是执行的函数，每个元素执行一次。
5.2滑动效果
slideUp() 向上滑动
slideDown()向下滑动
slideToggle()滑动切换
5.3事件切换
hover([over，]out)
（1）over：鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out：鼠标移出元素要触发的函数（相当于mouseleave）
5.4动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
2.停止排队
stop()
(1)stop()方法用于停止动画或效果
(2)注意：stop()写到动画或者效果的前面，相当于停止介绍上一次的动画。
5.5淡入淡出效果
1.淡入效果语法规范
fadeIn([speed,[easing],[fn]])
2.淡入效果参数
(1)参数都可以省略
(2)speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000)。
(3)easing:（Optional）用来指定切换效果，默认是"swing",可用参数"linear"
5.6自定义动画animate
1.语法
animate(params,[speed],[easing],[fn])
2.参数
(1)params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft.其余参数都可以省略。
(2)speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000)。
(3)easing:（Optional）用来指定切换效果，默认是"swing",可用参数"linear"
(4)fn:回调函数，在动画完成是执行的函数，每个元素执行一次。
6.jQuery属性操作
6.1设置或获取元素固有属性值prop()
1.获取属性语法
prop('属性')
2.设置属性语法
prop('属性','属性值‘) //元素的自定义属性不能获取
6.2设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index="1"
1.获取属性语法
attr("属性") //类似原生getAttribute()
2.设置属性语法
attr("属性"，"属性值") //类似原生setAttribute()
也可以获取H5自定义属性
6.3数据缓存data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
1.附加数据语法
data("name","value") //向被选元素附加数据
2.获取数据语法
data("name") //向被选元素获取数据
同时，还可以读取HTML5自定义属性data-index,得到的是数字型
7.jQuery内容文本值
主要针对元素的内容还有表单的值操作。
1.普通元素内容html()（相当于原生innerHTML)
html() //获取元素的内容
html() //设置元素的内容
2.普通元素文本内容text()（相当于原生innerText)
3.表单元素文本内容val()
toFixed(2) //保留两位小数
8.jQuery元素操作
主要是遍历、创建、添加、删除元素操作。
8.1遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
语法1：
$('div').each(function(index,domEle){xxxx;})
1.each()方法遍历匹配的每一个元素。主要用DOM处理，each每一个
2.里面的回调函数有2个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jquery对象
3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)
语法2
$.each(object,funtion(index,element){xxxx;})
1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组、对象
2.里面的函数有2个参数：index是每个元素的索引号；element遍历内容
8.2创建元素
语法：$('<li></li>');
8.3添加元素
1.内部添加
element.append('内容')
把内容放入匹配元素内部最后面，类似原生appendChild.
2.外部添加
element.after('内容') //把内容放入目标元素后面
element.before('内容') //把内容放入目标元素前面
内部添加元素是父子关系
外部添加元素是兄弟关系
8.4删除元素
element.remove() //删除匹配的元素(本身)
element.empty() //删除匹配的元素集合中所有的子节点
element.html("") //清空匹配的元素内容
9.jQuery事件注册
单个事件注册
语法：
element.事件(function(){})
$('div').click(function(){事件处理程序})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、resize、scroll等
9.1事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件处理函数
语法：
element.on(events,[selector],fn)
1.events:一个或多个用空格分隔的事件类型，如'click'或'keydown'.
2.selector:元素的子元素选择器
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');
});
在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on代替他们。
on()可以给后来动态创建的元素绑定事件
$('ol').on('click','li',function(){
alert(11);
});
var li = $('<li>我是后来创建的</li>');
$('ol').append(li);
9.2事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
$('div').off(); //解除div元素所有事件处理程序
$('div').off('click'); //解绑div元素上面的点击事件
$('ul').off('click','li); //解绑事件委托
9.3自动触发事件 trigger()
有些事件希望自动触发，比如轮播图功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
element.click() //简写形式
element.trigger("type") //第二种自动触发模式
element.triggerHandler(type) //第三种自动触发模式 不会触发元素的默认行为
10.jQuery事件对象
事件被触发，就会有事件对象的产生
element.on(event,[selector],function(event){})
阻止默认行为：event.preventDefault() 或者return false
组织冒泡：event.stopPropagation()
11.jQuery对象拷贝
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
语法：
$.extend([deep],target,object1,[objectN])
1.deep:如果设为true为深拷贝，默认为false浅拷贝
2.target:要拷贝的目标对象
3.object1:待拷贝到第一个对象的对象
4.objectN:待拷贝到第N个对象的对象
5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
6.深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝对象。
12.jQuery多库共存
问题描述：
jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用这$作为标识符，这样一起使用会引起冲突。
客观需求：
需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery解决方案：
1.把里面的$符号统一改为jQuery，比如jQuery('div')
2.jQuery变量规定新的名称:$.noConflict() var xx = $.noConflict();
13.jQuery插件
jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
注意:这些插件也是依赖于jQuery来完成的，所以必须要引入jQuery文件，因此也成为jQuery插件。
jQuery插件常用网站。
1.jQuery插件库 jQuery插件库-收集最全最新最好的jQuery插件
2.jQuery之家 jQuery之家-自由分享jQuery、html5、css3的插件库
jQuery插件使用步骤：
1.引入相关文件。（jQuery文件和插入文件）
2.复制相关html、css、js（调用插件)
jQuery插件演示：
1.瀑布流
2.图片懒加载(图片使用延迟加载在可提高网页下载速度，它也能帮助减轻服务器负载)当我们页面滑动到可是区域，再显示图片。
我们使用jQuery插件库EasyLasyload。注意，此时的js引入文件和js调用必须写道DOM元素（图片）最后面
3.全屏滚动(fullpage.js)
gitHub:https://github.com/alvartrigo/fullPage.js (打不开了)
中文翻译网站:jQuery全屏滚动插件fullPage.js演示_dowebok
bootstrap JS插件：
bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件。
综合案例
$(function(){
load();
$('#todotxt').on('keydown',function(e){
if(e.keyCode == 13) {
var local = getData();
// console.log(local);
// 把local数组进行更新数据 把最新的数据追加给local数组
local.push({title: $(this).val(),done: false});
saveData(local);
load();
}
});
$('ol,ul').on('click','a',function(){
// alert(11);
// 先获取本地存储
var data = getData();
// 修改数据
var index = $(this).attr('id');
console.log(index);
data.splice(index,1);
// 保存到本地存储
saveData(data);
// 重新渲染页面
load();
})
// toDoList正在进行和已完成选项操作
$('ol,ul').on('click','input',function(){
// 先获取本地存储的数据
var data = getData();
// 修改数据
var index = $(this).siblings('a').attr('id');
// console.log(index);
data[index].done = $(this).prop('checked');
console.log(data);
// 保存到本地存储
saveData(data);
// 重新渲染页面
load();
})
// 读取本地的数据
function getData(){
var data = localStorage.getItem('todo');
if(data != null){
return JSON.parse(data);
}else{
return [];
}
};
// 保存本地的数据
function saveData(data){
localStorage.setItem('todo',JSON.stringify(data));
}
function load(){
var data = getData();
console.log(data);
// 遍历之前先要清空ol里面的元素内容
$('ol,ul').empty();
var todoCount = 0; //正在进行的个数
var doneCount = 0; //已经完成的个数
$.each(data,function(i,n){
if(n.done){
$('ul').prepend('<li><input type="checkbox" checked><p>' + n.title + '</p><a href="javascript:;" id=' + i + '>删除</a></li>');
doneCount++;
}else {
$('ol').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '>删除</a></li>');
todoCount++;
}
});
$('#todocount').text(todoCount);
$('#donecount').text(doneCount);
}
})案例：toDoList分析
1.刷新页面不会丢失数据，因此需要用到本地存储localStorage
2.核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
3.存储的数据格式：var todolist = [{title: 'xxx',done:false}]
4.注意点1：本地存储localStorage里面只能存储字符串格式了，因此需要把对象转换为字符串JSON.stringfy(data).
5注意点2：获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据
案例：toDoList按下回车把新数据添加到本地存储里面
1.切记：页面中的数据，都有从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面
2.利用事件对象.keyCode判断用户按下回车键(13)
3.声明一个数组，保存数据。
4.先要读取本地存储原来的数据（声明函数getData())，放到这个数组里面。
5.之后把最新从表单获取过来的数据，追加到数组里面
6.最后把数组存储给本地存储（声明函数saveDate())
案例：toDoList本地存储数据渲染加载到页面
1.因为后面也会经常渲染加载操作，所以声明一个函数load，，方便后面调用
2.先要读取本地存储数据。(数据不要忘记转换为对象格式)
3.之后遍历这个数据($.each()),有几条数据，就生成几个小li添加到ol里面
案例：toDoList删除操作
1.点击里面的a链接，不是删除的li，而是删除本地存储对于的数据
2.核心原理：先获取本地存储数据，删除对于的数据，保存给本地存储，重新渲染列表li
3.我们可以给链接自定义属性记录当前的索引号
4.根据这个索引号删除相关的书----数组的splice(i,1)方法
5.存储修改后的数据，然后存储给本地存储
6.重新渲染加载数据列表
7.因为a是动态创建的，我们使用on方法绑定事件
案例：toDoList正在进行和已完成选项操作
1.当我们点击了小的复选框，修改本地存储数据，在重新渲染数据列表。
2.点击之后，获取本地存储数据。
3.修改对应数据属性done为当前复选框的checked状态
4.之后保存数据到本地存储
5.重新渲染加载数据列表
6.load加载函数里面，新增一个条件，如果当前数据的done为true就是已经完成 ，就是列表渲染加载到ul里面
7.如果当前的数据的done为false，则是待办事项，就把列表渲染加载到ol里面
案例：toDoList统计正在进行个数和已经完成个数
1.在我们load函数里面操作
2.声明2个变量：todoCount待办个数doneCount已完成个数
3.当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++,否则doneCount++
4.最后修改相应的元素text()
14.jQuery尺寸、位置操作
14.1jQuery尺寸
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素宽度和高度值 只算 width/height |
| innerWidth()/innerHeight() | 取得匹配元素宽度和高度值 包括padding |
| outerWidth()/outerHeight() | 取得匹配元素宽度和高度值 包括padding、border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值 包括padding、border、margin |
-
以上参数为空，则是获取相应值，返回的是数字型
-
如果参数为数字，则是修改相应值
-
参数可以不必写单位
14.2jQuery位置
位置主要有三个：offset()、position()、scrollTop/scrollLeft()
1.offset()设置或获取元素偏移
1.offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
2.该方法有2个属性left、top、offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
2.position()获取元素偏移
1.position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
1.scroollTop()方法设置或返回被选元素被卷去的头部。
案例：带有动画的返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery被卷去的头部</title>
<script src="./jquery.min.js"></script>
<style>
.container {
width: 200px;
height: 900px;
background-color: pink;
margin: 100px auto;
}
.back{
position: fixed;
right: 0;
top: 50%;
width: 40px;
height: 40px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function(){
$(window).on('scroll',function(){
var boxTop = $('.container').offset().top
if($(document).scrollTop() >= boxTop){
$('.back').fadeIn();
}
else{
$('.back').fadeOut();
}
});
$('.back').click(function(){
$('body,html').animate({
scrollTop: 0
});
$(document).animate({scrollTop:0});//不能是文档而是 html和body元素做动画
})
})
</script>
</body>
</html>1.核心原理：使用animate动画返回顶部
2.animate动画函数里面有个scrollTop属性，可以设置位置
3.但是是元素做动画，因此$("body,html").animate({scrollTop:0})
案例：品优购电梯导航
-
当我们点击电梯导航某个小li,当前小li添加current类，兄弟移除类名
-
当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类
-
触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面
-
需要用到each，便利遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号
-
判断的条件：被卷去的头部大于等于内容区域里面每个模块的offset().top
15.jQuery选择器
15.1链式编程
链式编程是为了节省代码量，看起来更优雅
$(this).css('color','red').sibling().css('color','');
770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
