一篇文章入门jQueryspeed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时

[TOC]

JavaScript库

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

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

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

常见的JavaScript库
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto

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

jQuery

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是"write Less, Do More",即倡导写更少的代码，做更多的事情

j就是JavaScript; Query查询; 意思就是查询JS，把JS中的DOM操作做了封装

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

学习jQuery的本质就是学习调用这些函数(方法);jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率

jQuery的优点

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

jQuery的基本使用

官方网址：jquery.com/

版本：

1x:兼容IE6~8低版本浏览器，官网不在更新

2x:不兼容IE6~8低版本浏览器，官网不在更新

3x:不兼容IE6~8低版本浏览器，是官方主要更新维护的版本

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

使用步骤
- 引入jQuery文件
- ……

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

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装(相当于原生js中的DOMContentLoaded,不同的是原生js中的load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码)

jQuery的顶级对象$

$是jQuery的别称，在代码中可以使用jQuery代替$ ,但是一般为了方便，通常都直接使用$
$同时也是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$ 包装成jQuery对象，就可以调用jQuery的方法

jQuery对象和DOM对象

用原生JS获取来的对象就是DOM对象
jQuery方法获取来的对象就是jQuery对象
- jQuery对象本质：利用$对DOM元素包装后产生的对象(伪数组的形式存储)
jQuery对象只能使用jQuery方法，而DOM对象只能使用原生的JS属性和方法

<div></div>
<script>
    // 原生JS获取DOM元素的方法
    let myDiv = document.querySelector('div');
    // jQuery获取jQuery对象的方法
    $('div'); // $('div')是一个jQuery对象
    // jQuery对象只能使用jQuery方法，而DOM对象只能使用原生的JS属性和方法
    myDiv.style.display = 'none';
    $('div').hide();
</script>

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

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

DOM对象转换为jQuery对象：
- 直接使用 $获取`$ (DOM对象)`
- 已经用原生JS获取过来的对象，用$进行包装，也能转换为jQuery对象
```
<div></div>
<script>
    $('div');
    // 或者
    let myDiv = document.querySelector('div');
    $(myDiv);
</script>
```

jQuery对象转换为DOM对象：

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

<div></div>
<script>
    $('div')[0];
    // 或者
    let myDiv = document.querySelector('div');
    $('div').get(0);
</script>

jQuery常用的API

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

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

名称	用法	描述
ID选择器	`$("#id")`	获取指定ID的元素
全选选择器	`$("*")`	匹配所有元素
类选择器	`$(".class")`	获取同一类的class元素
标签选择器	`$("div")`	获取同一类标签的所有元素
并集选择器	`$("div,p,li")`	选取多个元素
交集选择器	`$("li.current")`	交集元素
子代选择器	`$("ul>li")`	使用>号，获取亲儿子层级的元素；并不会获取孙子层级的元素
后代选择器	`$("ul li")`	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

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

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

jQuery筛选选择器

语法	用法	描述
`: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元素中，选择索引号为偶数的元素

jQuery筛选方法

语法	用法	说明
`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()`	查找当前元素的所有弟弟元素
`prevAll([expr])`	`$(".last").prevAll()`	查找当前元素的所有哥哥元素
`hasClass(class)`	`$('div').hasClass("protected")`	检查当前元素是否含有某个特定的类，如果有，则返回true
`eq(index)`	`$("li").eq(2)`	相当于`$("li:eq(2)")`,index从0开始

jQuery里面的排他思想

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

<button>第1个按钮</button>
<button>第2个按钮</button>
<button>第3个按钮</button>
<button>第4个按钮</button>
<button>第5个按钮</button>
<script>
    $(function() {
        // 隐式迭代 给所有的按钮绑定点击事件
        $("button").click(function() {
            // 当前的元素变化背景颜色
            $(this).css("background", "blue");
            // 其余的兄弟去掉背景颜色  隐式迭代
            $(this).siblings("button").css("background", "");
        });
    })
</script>

jQuery样式操作

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

操作样式之CSS方法
- $(this).css("color"); 参数只写属性名，则返回属性值
- $(this).css("color", "red"); 参数是属性名，属性值，用逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
- $(this).css({"color":"black","font-size":"20px"})参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号($(this).css({color:"black", font-size:20})),如果是复合属性则必须采用驼峰命名法，如果属性值不是数字，则需要加引号
设置类样式方法
- 作用等同于以前的classList,可以操作类样式，注意操作类里面的参数不要加点
- 1. 添加类 $("div").addClass("类名");
- 1. 删除类 $("div").removeClass("类名");
- 1. 切换类 $("div").toggleClass("类名");
- 类操作和className的区别：原生JS中的className会覆盖元素原先里面的类名；jQuery里面类操作只是对指定类进行操作，不影响原先的类名

jQuery动画效果

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

显示隐藏：show()、hide()、toggle()

滑动：slideDown()、slideUp()、slideToggle()

淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo()

自定义动画：animate()

显示隐藏效果(一般情况下，我们都不加参数，直接显示隐藏就可以)
- show([speed,[easing],[fn]]) 显示
  - 参数可以都省略，无动画直接显示
  - speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒数值(如：1000)
  - easing:(Optional)用来指定切换效果，默认是swing,可用参数linear
  - fn:回调函数，在动画完成时执行的函数，每个元素执行一次
- hide([speed,[easing],[fn]]) 隐藏
  - 参数可以都省略，无动画直接显示
  - speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒数值(如：1000)
  - easing:(Optional)用来指定切换效果，默认是swing,可用参数linear
  - fn:回调函数，在动画完成时执行的函数，每个元素执行一次
- toggle([speed,[easing],[fn]]) 切换
  - 参数可以都省略，无动画直接显示
  - speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒数值(如：1000)
  - easing:(Optional)用来指定切换效果，默认是swing,可用参数linear
  - fn:回调函数，在动画完成时执行的函数，每个元素执行一次
滑动效果(参数语法与上面一致)
- slideDown([speed,[easing],[fn]]) 下滑效果
- slideUp([speed,[easing],[fn]]) 上滑效果
- slideToggle([speed,[easing],[fn]]) 切换效果
淡入淡出效果(参数语法基本与上面一致)
- fadeIn([speed,[easing],[fn]])淡入效果
- fadeOut([speed,[easing],[fn]])淡出效果
- fadeToggle([speed,[easing],[fn]])淡入淡出效果切换
- fadeTo([[speed],opacity,[easing],[fn]])渐进方式调整指定的不透明度
  - opacity:透明度必须写，取值0~1之间
  - speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒数值(如：1000)。必须写
自定义动画 animate
- 语法：animate(params,[speed],[easing],[fn])
- 参数：
  - params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需采用驼峰命名法borderTop。其余参数可以省略
  - 剩下的参数与上面一致

事件切换

hover([over,]out)

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

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

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

动画或效果队列
- 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
停止排队 stop()
- stop()方法用于停止动画或效果
- 注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

jQuery属性操作

设置或获取元素固有属性值prop()
- 所谓元素固有属性就是元素本身在带的属性，比如<a>元素里面的href,再比如<input>元素里面的type
  - 获取属性语法：prop("属性")
  - 设置属性语法：prop("属性","属性值")
设置或获取元素自定义属性值 attr()
- 用户自己给元素添加的属性，被称为自定义属性
  - 获取属性语法：attr("属性") 类似原生getAttribute()
  - 设置属性语法：attr("属性","属性值") 类似原生setAttribute()
数据缓存data()
- data()方法可以在指定元素上存储数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除
  - 附加数据语法：data("name","value") 向被选元素附加数据
  - 获取数据语法：data("name") 向被选元素获取数据
  - 同时还可以读取HTML5自定义属性data-index,得到的是数字型
    - 这个方法获取data-index,H5自定义属性有两点不同：不用写data-;返回的是数字型

购物车案例引出的小知识点

选择器:checked,返回有几个复选框被选中

parents("选择器")可以返回指定祖先级元素

通过toFixed(2)方法保留两位小数

jQuery内容文本值

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

普通元素内容html()(相当于原生innerHTML)
- html() 获取元素内容
- html("内容") 设置元素内容
普通元素文本内容text()(相当于原生中的innerText)
- text() 获取元素文本内容
- text("内容") 设置元素文本内容
表单的值val()(相当于原生value)

jQuery元素操作

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

遍历元素

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

语法1：$("div").each(function (index,domEle) {...};)
- each()方法遍历匹配的每一个元素，主要用于DOM处理，each每一个
- 里面的回调函数有两个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象
- 如果想使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(donEle)

<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function() {
        // 针对同一类元素做不同的操作，需要用到遍历元素
        // each() 方法遍历元素
        let arr = ["red","blue","orange"];
        $("div").each(function(index, domEle) {
            // 回调函数第一个参数是索引号  可以自己定义索引号名称
            console.log(index);
            // 回调函数第二个参数一定是DOM元素对象
            console.log(domEle);
            $(domEle).css("color", arr[index]);
        })
    })
</script>

语法2：$.each(object, function (index, element) {...})
- $.each()方法可用于遍历任何对象，主要用于数据处理，比如数组、对象
- 里面的函数有两个参数：index是每个元素的索引号；element遍历内容

创建元素

语法：$("<li></li>");动态创建一个li

添加元素

内部添加:(内部添加元素，生成之后，他们是父子关系)

element.append("内容")把内容放入匹配元素内部最后面，类似原生appendChild

element.prepend("内容")把内容放入匹配元素内部最前面

外部添加：(外部元素，生成之后，他们是兄弟关系)

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

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

删除元素

element.remove() 删除匹配元素(本身)

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

element.html("") 清空匹配的元素内容(子节点)

推荐案例练习：购物车(点击按钮删除和删除勾选的商品以及清空购物车)

jQuery事件

单个事件注册
- 语法：element.事件(function(){});例如：$("div").click(function(){事件处理程序}),其他事件与原生基本一致
- 比如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

事件绑定

事件处理on()绑定事件
- on()方法在匹配元素上绑定一个或多个事件的事件处理函数
- 语法规范：element.on(events,[selector],fn)
  - events：一个或多个用空格分隔的事件类型，如：click或keydown
  - selector:元素的子元素选择器
  - fn:回调函数即绑定在元素身上的侦听函数

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #777;
    }
</style>
<div></div>
<!-- 此处引入jQuery文件,你就当这个文件存在吧 -->
<script src="jquery.min.js"></script>
<script>
    $(function() {
        // 单个事件注册
        $("div").click(function() {
            $(this).css("background", "blue");
        });
        $("div").mouseenter(function() {
            $(this).css("background", "red");
        });

        // 事件处理on()
        $("div").on({
            click: function() {
                $(this).css("background", "blue");
            },
            mouseenter: function() {
                $(this).css("background", "red");
            }
            mouseleave: function() {
                $(this).css("background", "purple");
            }
        });
    })
</script>

on()方法的优势:

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

$("div").on({
    mouseover: function(){},
    mouseout: function(){},
    click: function(){}
});

// 如果事件类型是相同的，可以使用下面这种方法
$("div").on("mouseover mouseout", function() {
    $(this).toggleClass("current");
})

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

$('ul').on('click','li',function() {
    alert('hello world!');
});

在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们

解绑事件

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

$("p").off(); // 解绑p标签所有事件处理程序
$("p").off("click"); // 解绑p标签元素上面的点击事件
$("ul").off("click", "li"); // 解绑事件委托

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

$("p").one("click", function() {
    alert(57); // 只触发一次
})

自动触发事件`trigger()`

元素.事件() 第一种简写形式，会触发元素的默认行为

元素.trigger("事件") 第二种自动触发模式，会触发元素的默认行为

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div></div>
<script>
    $(function() {
        $("div").on("click",function() {
            alert(5);
        });
        // 第一种 元素.事件()
        $("div").click();

        // 第二种 元素.trigger("事件")
        $("div").trigger("click");
    })
</script>

元素.triggerHandler("事件") 第三种自动触发模式，这种方法不会触发元素的默认行为

jQuery事件对象

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

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

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

阻止事件冒泡：event.stopPropagation()

<!-- 阻止事件冒泡 -->
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div></div>
<script>
    $(function() {
        $(document).on("click",function() {
            alert(7);
        });
        $("div").on("click",function() {
            alert(5);
            event.stopPropagation();
        });
    })
</script>

jQuery里面的一些常用方法

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

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

deep:如果设为true为深拷贝，默认为false浅拷贝

target:要拷贝的目标对象

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

$(function() {
    /* let targetObj = {};
    let obj = {
        id: 1,
        name: "andy"
    };
    $.extend(targetObj, obj);
    console.log(targetObj); */

    /* let targetObj = {
        id: 0
    };
    let obj = {
        id: 1,
        name: "andy"
    };
    $.extend(targetObj, obj);
    console.log(targetObj); // 会覆盖targetObj里面原来的数据 */

    let targetObj = {
        id: 0
    };
    let obj = {
        id: 1,
        name: "andy"
        byc: {
            age: 18
        }
    };
    $.extend(targetObj, obj);
    console.log(targetObj);
})

浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝，前面加true,完全克隆(拷贝的是对象，不是地址)，修改目标对象不会影响被拷贝对象

多库共存

问题概述：jQuery使用$作为标识符，随着jQuery的流行，其它JS库也会用这种$作为标识符，这样一起使用会引起冲突

客观需求：需要一个解决方案，让jQuery和其他的JS库不存在冲突，可以同时存在，这就叫做多库共存

jQuery解决方案

把里面的符号统一改为jQuery，例如：jQuery("div")

让jQuery释放对$控制权，让用户自己决定(jQuery变量规定新的名称)：$noConflict() let xx = $noConflict();

jQuery插件

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

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

推荐两个JS插件常用的网站http://www.jq22.com/和http://www.htmleaf.com/

jQuery插件使用步骤
- 引入相关文件(jQuery文件和插件文件)
- 复制相关html、css、js(调用插件)

推荐案例练习：瀑布流(图片懒加载)、轮播图(3D切换版)

图片懒加载：就是当我们页面滚动到可视区域在显示图片(图片使用延迟加载可提高网页下载速度，它也能帮助减轻服务器负载)

一篇文章入门jQuery

JavaScript库

jQuery

jQuery的优点

jQuery的基本使用

jQuery的顶级对象$

jQuery对象和DOM对象

jQuery常用的API

jQuery里面的排他思想

jQuery样式操作

jQuery动画效果

事件切换

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

jQuery属性操作

jQuery内容文本值

jQuery元素操作

jQuery事件

事件绑定

解绑事件

自动触发事件trigger()

jQuery事件对象

jQuery里面的一些常用方法

多库共存

jQuery插件

自动触发事件`trigger()`