04-jQuery工具函数及 jQuery 插件

1. jQuery工具函数

在jQuery中,工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的,我们统称为工具函数,或Utilites函数。

主要作用于：字符串、数组、对象。

调用格式: $.函数名()或jQuery.函数名()

1.1 $.get()

通过远程 HTTP GET 请求载入信息。

jQuery.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数,对象或字符串，传递给服务器的数据。

回调函数:function(data,status,xhr) 可选。请求完成时的回调函数，无论请求成功或失败。

回调函数的参数说明：

data：服务器返回的脚本的文本内容。

status：请求的状态。

xhr： XMLHttpRequest对象。

type:返回内容格式，xml, html, script, json, text, _default

1.2 $.getJSON()

$.getJSON函数获取到文本之后，不会将其当作脚本执行，而会将其解析为JSON。当成功加载URL，并且将内容成功解析为JSON后，解析结果会作为第一个参数传入回调函数中。

语法格式：

jQuery.getJSON(url, [data], [callback])

参数说明：

URL 必需。请求的URL。

data：对象或字符串，传递给服务器的数据。

回调函数:function(data,status,xhr) 可选。请求完成时的回调函数，无论请求成功或失败。

回调函数的参数说明：

data：服务器返回的脚本的文本内容。

status：请求的状态。

xhr： XMLHttpRequest对象。

1.3 $.post()

jQuery.post(url, [data], [callback], [type])

url:发送请求地址。

data:待发送 Key/value 参数。

回调函数:function(data,status,xhr) 可选。请求完成时的回调函数，无论请求成功或失败。

回调函数的参数说明：

data：服务器返回的脚本的文本内容。

status：请求的状态。

xhr： XMLHttpRequest对象。

type:返回内容格式，xml, html, script, json, text, _default。

1.4 $.ajax()函数

这些函数可以用于发起任意Ajax请求,通过 HTTP 请求加载远程数据,$.ajax() 返回其创建的 XMLHttpRequest 对象.

jQuery.ajax( [settings ] )

settings:AJAX 请求设置。所有选项都是可选的。详情参照

$.ajax({
    type: 'GET',
    url: baseURL + '/api/student/getStudent',
    data: {
        name: '小谷'
    },
    success: function(data, status, xhr) {
        console.log(data);
    },
    error: function(err) {
        console.log('请求失败');
        console.log(err);
    }
});
$.ajax({
    type: 'POST',
    url: baseURL + '/api/student/addStudent',
    contentType: 'application/json',
    data: JSON.stringify({
    }),
    success: function(data, status, xhr) {
        console.log(data);
    },
    error: function(err) {
        console.log('请求失败');
        console.log(err);
    },
    cache: false,
    dataType: 'json'
});

1.5 $.each( array/object, callback )

该工具函数与 $('.box').each() 方法不同，$('.box').each() 方法只能辨认jQuery对象，而 $.each() 工具函数不仅可以遍历数组元素还可以遍历对象属性。第一个参数是要遍历的数组或对象；第二个参数是要在每个数组元素或对象属性上调用的函数。该函数在调用时会带有两个参数：数组元素的索引或对象的属性名，以及数组元素的值或对象的属性值。函数中的 this 值和第二个参数是一样的。

$.each( array, callback )

$.each( object, callback )

1.6 $.map()

该函数和Array对象的map()方法类似。它接受数组或类数组对象作为第一个参数；第二个参数则为映射函数。每一个数组元素与索引都会传入这个映射函数中，返回值就是由映射函数返回的值组成的新数组。$.map()与map()方法存在两点不同。首先，如果映射函数返回的是null，该值不会被包含在返回的数组中。其次，如果映射函数返回的是数组，该数组的元素会被添加到结果数组中，而不是数组本身中。

1.7 $.extend()

该函数接受对象作为参数。它会将第二个及其之后参数对象的属性复制到第一个参数对象中，如果同名的属性在第一个参数对象中已经存在，则会覆盖它。该函数会忽略任何值为 undefineed 的属性。如果仅传入一个对象，该对象的属性会被复制到jQuery对象自身中。该对象的返回值是属性被复制到的对象。如果第一个参数的值为 true，会执行深拷贝：第三个（及其之后）对象的属性会被复制到第二个对象上。注意，第一个参数为 false 是不被支持的。

jQuery.extend([deep], newObj, object1, [objectN])

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

newObj:合并最终的对象。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象。

浅拷贝: 只复制指向某个对象的地址，新旧对象还是共享同一块内存。修改其中一个对象会影响其他对象。

深拷贝:前面加上true,会另外创建一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改变原对象。

2. jQuery 插件

想要更复杂的特效效果，可以借助于 jQuery 插件完成，这些插件也是依赖于jQuery来完成的，所以必须要先引入。

jQuery 插件常用的网站：

jQuery 插件库 jQuery插件库-收集最全最新最好的jQuery插件
jQuery 之家 jQuery之家-自由分享jQuery、html5、css3的插件库

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

2.1 瀑布流插件

jQuery之家的开源插件，瀑布流。我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。

以下为例演示:兼容IE8的响应式网格瀑布流布局jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

代码演示

插件的使用三点：

引入css.
引入js
引入html。（有的简单插件只需引入html和js，甚至有的只需引入js）

总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）

2.2 图片懒加载插件

图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。

懒加载只需引入html 和 js操作即可，此插件不涉及css。

代码演示EasyLazyload.js 超好用js图片延迟加载

1.引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        showTime: 1100,
        onLoadBackEnd: function(i, e) {
            console.log("onLoadBackEnd:" + i);
        },
        onLoadBackStart: function(i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>

2.引入html

 <img data-lazy-src="upload/floor-1-3.png" alt="">

2.3 全屏滚动插件

全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：

jQuery全屏滚动插件fullPage.js演示_dowebok

全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际。

代码演示

项目需要使用哪种风格引入对应的HTML和CSS。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
    $(function() {
        $('#dowebok').fullpage({
            sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
            navigation: true
        });
    });
</script>

注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。

2.4 数字滚动插件

jquery.countup.js是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时，将指定的数字从0开始计数增加动画。

该数字动画插件可以控制动画的延迟时间和动画过渡时间。它依赖于Waypoints插件来监听滚动事件。

jquery轻量级数字动画插件jquery.countup.js

2.5 页面滚动动画

当页面向滚动时触发动画效果,非常好用

css页面滚动触发动画

2.7 bootstrap组件(之后详细讲解)

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷。

2.8 补充:swiper插件(js框架)

Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。同时，在Android、WP8系统以及PC端的浏览器也有着良好的用户体验。