jQuery主要有两种使用方式：
1、在jQuery集合对象上调用方法
2、直接调用jQuery方法
扩展jQuery对象上的方法：jQuery.fn.extend()
扩展jQuery工具方法：jQuery.extend()//给jQuery本身的类添加新的方法此网站已经停止维护，官方的说明是在NPM上面进行插件的使用
建议使用Star数量比较多的（大于1000的就比较好了），维护频繁，文档齐全的插件。
1.引入插件：
2.查看并实现示例代码
3.阅读文档
以jquery.easing插件为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.panel {
width: 300px;
margin: 50px 0 0 50px;
box-shadow: 0 0 10px #999;
line-height: 1.8;
text-align: center;
font-size: 20px;
color: #fff;
}
.title {
background-color: #c7731f;
}
h1 {
margin: 0;
padding: 0;
}
.body {
padding: 30px 10px;
background-color: #5298c7;
}
</style>
</head>
<body>
<div class="panel">
<div class="title">
<h1>唐诗一首</h1>
</div>
<div class="body">
<p>
白日依山尽，
<br> 黄河入海流。
<br> 欲穷千里目，
<br> 更上一层楼。
<br>
</p>
</div>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script src="../../../vendor/jquery.easing.js"></script>
<script>
$(function() {
$('.title').click(function() {
$(this).siblings('.body').slideUp(1000, 'easeInOutCirc');
});
});
</script>
</body>
</html>
slick插件示例
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.your-class').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</body>
</html>
几个实用的插件使用
chosen:选择框
https://github.com/harvesthq/chosen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/chosen/1.6.2/chosen.css" rel="stylesheet">
</head>
<body>
<select name="demo" id="demo" style="width: 300px">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<br>
<select name="demo2" id="demo2" multiple data-placeholder="请选择...">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script src="vendor/jquery-1.12.4.js"></script>
<script src="//cdn.bootcss.com/chosen/1.6.2/chosen.jquery.js"></script>
<script>
$(function() {
$('#demo').chosen();
$('#demo2').chosen({
width: '50%'
});
});
</script>
</body>
</html>
pickadate:日期选择输入
https://github.com/amsul/pickadate.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.css" rel="stylesheet">
<link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.date.css" rel="stylesheet">
<link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.time.css" rel="stylesheet">
</head>
<body>
<input type="text" class="datepicker">
<br>
<br>
<input type="text" class="timepicker">
<script src="vendor/jquery-1.12.4.js"></script>
<script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.js"></script>
<script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.date.js"></script>
<script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.time.js"></script>
<script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/translations/zh_CN.js"></script>
<script>
$(function() {
var dateinput = $('.datepicker').pickadate();
var datepicker = dateinput.pickadate('picker');
$('.timepicker').pickatime();
datepicker.on({
open: function() {
console.log('Opened up!');
},
close: function() {
console.log('Closed now');
},
render: function() {
console.log('Just rendered anew');
},
stop: function() {
console.log('See ya');
},
set: function(thingSet) {
console.log('Set stuff:', thingSet);
}
});
});
</script>
</body>
</html>
Magnific-Popup:图片浏览
https://github.com/dimsemenov/Magnific-Popup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet">
<style>
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}
</style>
</head>
<body>
<a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>
<a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
</a>
<a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
</a>
<script src="vendor/jquery-1.12.4.js"></script>
<script src="//cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script>
$(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: false,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
</script>
</body>
</html>
注意项：
实现一个修改颜色的小插件
jquery.colorful.js
(function($) {
var namespace = 'colorful';
var methods = {
init: function(options) {
options = $.extend({}, $.fn[namespace].defaults, options);
if (options.font) { this.css('color', options.color); }
if (options.background) { this.css('background-color', options.color); }
return this;
}
};
$.fn[namespace] = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if ($.type(method) === 'object') {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + ' does not exist!');
}
};
$.fn[namespace].defaults = {
color: 'red',
background: false,
font: true
};
})(jQuery);
colorful.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A asperiores assumenda atque cum cupiditate debitis dolore doloribus illum inventore, magnam pariatur placeat similique suscipit! A accusantium cum dolore numquam optio.</p>
<script src="vendor/jquery-1.12.4.js"></script>
<script src="jquery.colorful.js"></script>
<script>
$(function() {
$('p').colorful('init')
$('p').colorful('init', {
background: true,
font: false
})
// $('p').colorful({
// color: 'green',
// background: true,
// font: false
// }).css('font-size', '30px');
});
</script>
</body>
</html>