使用jQuery插件

本章的主要内容：

1.下载和配置插件

2.调用插件提供的jQuery方法

3.使用插件定义的选择符查找元素

4.使用jQuery UI添加专业的用户界面行为

5.使用jQuery Mobile实现适合移动设备的功能

一：下载和配置插件

1.下载插件：jQuery的官方网站的插件库囊括了大量的插件；下载网址：http://plugins.jquery.com；以cycle插件为例，首先到官网下载该插件，文件名为：jquery.cycle.all.js。
2.配置插件：因为插件都是基于jQuery写的，所以引入插件之前都要先引入jquery.js，然后再引入插件，最后引入自己写的js文件，在自己写的js文件文件中可以调用插件提供的方法，这样就可以很好的使用插件的各种功能了。

二：调用插件提供的jQuery方法

1.通过Cycle插件可以将这个列表转换成可以交互的幻灯片。在DOM中适当的容器上调用.cycle()方法，就可以实现这一转换，代码入下：

$(function(){
    $('#books').cycle();
});

2.为插件方法指定参数
为插件方法传递参数与向jQuery方法中传递参数是一样。多数情况下，传递的参数是放在一个对象中，对象由参数的键值对构成。向cycle插件传参的代码如下：

$(function(){
    $('#books').cycle({
        timeout : 2000,
        speed   : 200,
        pause   : true
    });
});

3.修改参数默认值
cycle其实也遵循了一个常见的模式，就是把所有的默认值放在一个对象里，其包含所有的默认选项的对象是$.fn.cycle.defaults。那么修改这些默认值就非常简单了，代码如下：

$.fn.cycle.defaults.timeout = 10000;
$.fn.cycle.defaults.random  = true;

4.其他形式的插件：插件并不局限于提供更多的jQuery的方法，也可以扩展jQuery的功能，甚至修改已有的特性。

三.使用插件定义的选择符查找元素

1.自定义选择符：
支持自定义选择符表达式的插件扩展了jQuery内置选择符引擎的功能，可以让我们以全新的方式查找元素，Cycle就支持一种自定义选择符。假设页面上有多组幻灯片，我们想通过Resume按钮回复页面中所有暂停的幻灯片。那就需要找到页面中所有被暂停的幻灯片所在的ul元素，然后全部恢复。利用Cycle自定义的:paused选择符，可以轻松地实现这个功能，代码如下：

$(function(){
    $('.btn').click(function(event){
        event.preventDefault();
        $('ul:paused').cycle('resume');
    }).appendTo($contrlos);
});

2.全局函数插件：
很多流行的插件在jQuery命名空间中提供了一些新的全局函数。在插件提供食物功能与页面中的DOM元素无关，因而不适合扩展标准的jQUery方法的情况下，这种模式是很常见的。例如，Cookie插件提供了读写页面中的cookie值的接口。而这个功能是通过$.cookie（）函数提供的，这个函数可以取得或设置个别的cookie值。

$.cookie('cyclePaused','y');

四.jQuery UI插件库

1.效果：
在文档中引用核心效果文件的情况下，扩展的.animate()方法可以接受另外一些样式属性，例如borderTopColor、backgroundColor和color。

$books.hover(function(){
    $books.find('.title').animate({
        backgroundColor:'red',
        color:'cyan'
    },1000);
},function(){
    $books.find('.title').animate({
        backgroundColor:'cyan',
        color:'red'
    },1000);
});

2.高级缓动函数：
jQuery在某个时长内不会以稳定的速度来执行动画。例如，如果我们调用$(‘#my-div’).slideUp(1000),那么相应元素的高度变为零要经过整整一秒的时间。但在这1秒的开始和结尾，元素的高度变化比较慢，而在这1秒的中间，高度变化比较快。这种速度的变化就是缓动，缓动有助于让动画更流畅、更自然。高级缓动函数可以改变加速或减速曲线，以产生与众不同的结果。

$(function(){
    $('h1').click(function(){
        $(this).toggleClass('highlighted','slow','easeInExpo');
    });
});

五.jQuery Mobile插件库

与jQueryUI类似，jQuery Mobile同样由一组相关的组件构成，可以按需取用，又能无缝结合，流畅运行。jQuery Mobile提供Ajax驱动的导航系统、面向移动设备优化的交互式元素，以及高级的触摸事件处理程序。
1.HTML5自定义数据属性
HTML5规范允许我们在元素中插入任何需要的属性，只要该属性前缀data-即可。这种属性在页面渲染期间会被忽略，但jQuery脚本去可以访问它们。在页面中包含了jQuery Mobile之后，脚本可以扫描页面中的data-*属性，然后为相应的元素添加合适移动设备的特性。