jQuery基础

js库：

即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度看，就是在这个库中，封装了很多预先定义好的函数在里面。

jquery优点：

轻量级，不影响页面加载速度
跨浏览器兼容
链式编程，隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发
免费开源

入口函数：

$(function() {
})
等着dom结构渲染完就能执行内部代码，不必等到所有外部资源被加载完成
类似原生js中的DOMContentLoaded，不同于原生js中的load事件（页面文档，外部js文件，css文件，图片加载完成才执行内部代码）

$： jquery的顶级对象，是jquery的别称；相当于原生js的window，可以把元素包装成jquery对象，进行操作

jquery对象是伪数组形式储存的

jquery对象与dom对象：

1.二者区别

<div></div>
    <span></span>
    <script>
        // 1. DOM 对象：  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
        $('div'); // $('div')是一个jQuery 对象
        $('span'); // $('span')是一个jQuery 对象
        console.dir($('div')); //伪数组形式
        // 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>

2.二者转换

<video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们直接获取视频，得到就是jQuery对象
        // $('video');
        // (2) 我们已经使用原生js 获取过来 DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo).play();  jquery里面没有play 这个方法
        // 2.  jQuery对象转换为DOM对象
        // myvideo.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>

jquery常用的API：

jquery选择器：
$(“选择器”) 获取元素统一标准
隐式迭代： 遍历内部DOM元素（伪数组形式存储）的过程（可以执行相同的操作）

jquery筛选选择器：
:first 获取第一个
:last 获取最后一个
:eq(index) 获取索引号为index的
:odd 获取索引号为奇数的
:even 获取索引号为偶数的

jquery筛选方法：
parent() ： 查找最近一级父级
children() ： 查找最近一级的子级 子代选择
find(选择器) ：后代选择
sibling(选择器)： 查找兄弟节点
nextAll() ： 查找当前元素之后的同级元素
prevAll() ： 查找当前元素之前的同级元素
hasClass(class)： 检查当前元素是否含有某个特定的类，有则返回true，没有则返回false
eq(index) ： 获取索引号为index的，相当于:eq

jquery样式操作：

1. $(“div”).css(“width”) 返回属性值
2. $(“div”).css(“width”, “300px”) 修改属性值 值为数字的话可以不加单位及引号
3. $(“div”).css({
   width: 400,
   height: 400,
   backgroundColor: “red”
   // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
   }) 参数为对象，操纵多组样式
4. 通过对类的增加删除改变样式：添加类 addClass() 删除类 removeClass() 切换类 toggleClass()；与className的区别：className会覆盖掉原来的类，jquery只是对指定的类操作，不影响原来的类

jquery效果：
显示隐藏：

1. show([speed,easing],[fn]) speed有slow、normal、fast或数字作为参数；easing有swing（慢-快-慢）、liner（匀速）作为参数；fn为回调函数，每次完成动画执行一次
2. hide([speed,easing],[fn]) toggle([speed,easing],[fn]) 一般情况下不加参数
   滑动：
3. slideDown()
4. slideUp()
5. slideToggle() 这三个参数与上面一致
   淡入淡出：
6. fadeIn()
7. fadeOut()
8. fadeToggle()参数与上面一致
9. fadeTo() 多了一个opacity参数，它和速度必须写，0~1之间，调整透明度
   自定义动画：
   animate(params,[speed],[easing],[fn]) params:必须写，想要更改的样式属性，以对象形式传递，属性名可以不用带引号，如果是复合属性要采取驼峰命名法
   动画或效果排队：动画或效果一旦触发就会执行，如果触发多次，就造成多个动画或效果排队执行
   停止排队：stop() 注意：stop()写到动画或效果前面，相当于停止结束上一次动画（保证只执行一次）

jquery属性操作：

1. prop(“属性名”) 设置或获取元素的固有属性
2. attr(“属性名”) 设置或获取元素的自定义属性，能获取h5中以data-开头的自定义属性
3. data() 数据缓存 在指定元素上存取数据，并不会修改DOM元素结构。一旦刷新页面，之前存放的数据将被移除 能获取h5自定义属性以data- 开头的，返回的是数字型

:cheaked选择器 ： 返回被选中的复选框

jquery内容文本值：

1. html(): 普通元素内容，相当于innerHTML()
2. text(): 普通元素文本内容，相当于innerTest()
3. val(): 表单的值，相当于value()
4. :parents()： 返回所有的父级 ；()中填写想查找的
5. toFixed()： 保留多少位小数

jquery元素操作：

1. $(“div”).each(function(index, domEle)： 遍历匹配到的每一个元素，主要用DOM处理，index是每个元素的索引号（可以自己指定索引号名称），domEle是每个DOM元素对象，不是jquery对象

2. $.each(要遍历的值, function(index, domEle)) 方法遍历元素 主要用于遍历数据（对象，数组，jQuery对象），处理数据

3. 创建元素：

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

4. 添加元素：
   1).内部添加：$ (“ul”).append(li)， 内部添加并且放到内容的最后面，类似appendChild()；$ (“ul”).prepend(li)，内部添加并且放到内容的最前面；生成后为父子关系
   2).外部添加：$ (".test").after(div)，把内容放到目标元素的后面；$(".test").before(div)，把内容放到目标元素的前面；生成后为兄弟关系

5. 删除元素： $ (“ul”).remove()，删除匹配的元素（本身）；$(“ul”).empty()，删除匹配的元素中所有的子节点； $(“ul”).html("")，清空匹配的元素的内容

jquery尺寸、位置操作：

width()/height()： 获取匹配元素的宽度和高度值，只算width/height
innerWidth()/innerHeight()： 获取匹配元素的宽度和高度值，包含padding
outerWidth()/outerHeight()： 获取匹配元素的宽度和高度值，包含padding、border
outerWidth(true)/outerHeight(true)： 获取匹配元素的宽度和高度值，包含padding、border、margin
参数为空，获取数值，返回的是数字型；参数为数字（参数不必写单位），修改相应数值
offset()： 设置获取元素偏移，返回被选元素相对于文档的偏移坐标，跟父级无关，两个属性left、top；可以设置数值
position()： 获取元素偏移，返回被选元素相对于父级（就近）的偏移坐标，如果所有父级没有定位，以文档为准；不能设置数值
被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
返回顶部动画：

$("body, html").stop().animate({
                    scrollTop: 0
                 }); //只能是元素做动画，不能是document

电梯导航滚动： index获取索引号，再用eq(index)找到对应的模块，获取其offset值，动画滚动到相应位置（小bug：刷新页面，电梯消失 解决方法：封装成函数，每次加载页面就自动调用它）；电梯层数自动变色：each遍历所有层数，$(“document”)scrollTop()>=当前区域的offset.top时，获取该区域索引号，将对应层数的电梯添加变色的类（小bug：跨层点击时会把路径上的层数都变色一次 解决方法：添加节流阀（互斥锁），每当点击层数，关闭节流阀；滚动动画结束后，打开节流阀）

jquery事件：

事件注册：
单个事件注册：$(“div”).click(function() { });
事件处理：
on()：绑定事件
1.on可以绑定1个或者多个事件处理程序

 $("div").on({
                mouseenter: function() {
                     $(this).css("background", "skyblue");
                 },
                 click: function() {
                     $(this).css("background", "purple");
                 },
                 mouseleave: function() {
                     $(this).css("background", "blue");
                 }
            });

2.on可以实现事件委托（委派）：
把原来加在子元素身上的事件绑定在父元素身上，就是把事件委托给父元素

$("ul").on("click", "li", function() {
                alert(11);
            });
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

3.on可以给未来动态创建的元素绑定事件

$("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

off()： 解绑通过on()添加的处理事件；没有参数就解绑所有事件，有参数就解绑相应事件
one()： 绑定事件，使用方法和on()基本一致，但是只能触发一次事件（一次性）
自动触发事件：
1.封装成函数默认调用
2.$("div").trigger()3.$(“div”).triggerHandler() 特点：不会触发默认行为

事件对象：

$(“div”).on(“click”, function(event) { })
阻止默认行为：event.preventDefault() 或者return false
阻止冒泡：event.stopPropagation()

jquery其他方法：

1.对象拷贝：

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

deep：true为深拷贝，false（默认）为浅拷贝
target：拷贝到的目标对象（目的地），会覆盖原来的数据
object1：待拷贝到目标对象的对象
[objectN]：指能拷贝多个
深拷贝与浅拷贝
浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象（一个变另一个也会变）；深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
2.多库共存：
jQuery使用$作为标识符，其他js库也可能用 $做标识符，一起使用会引起冲突
需要一个解决方案，让jquery和其他js库不存在冲突，可以同时存在

jQuery的解决方案：
1.把 $ 统一改为jQuery
2.自己命名：把jQuery变量规定新的名称：$.noConflict() var xx = $.noConflict()

jQuery插件：

jQuery插件库：http://www.jq22.com/
jQuery之家：http://www.htmleaf.com/
使用步骤：
1.下载
2.引入相关文件（jquery文件和插件文件）
3.复制相关html、css、js（调用插件）

图片懒加载：
当页面滑动到可视区域，再显示图片

补充的一些方法

$(this)： jQuery 当前元素 this不要加引号

$(this).index() 得到当前元素的索引号

hover(over,out)： 事件切换， over相当于mouseenter；out相当于mouseleave 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

change():
1.input元素：监听value值的变化，若有变化，当失去焦点时会触发事件；对于单选框和复选框，用鼠标作出选择时触发事件
2.select元素：对于下拉选择框，鼠标做出选择时立即触发事件
3.textarea元素：多行文本输入框，若有变化，当失去焦点时会触发事件