jQuery基础--插件
Posted eadela
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery基础--插件相关的知识，希望对你有一定的参考价值。
1. 插件
1.1. 常用插件
插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
1.1.1. jquery.color.js
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
使用插件的步骤
1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div width: 400px; height: 400px; background-color: red; </style> </head> <body> <div></div> <!--1. 引入jquery的js文件--> <script src="jquery-1.12.4.js"></script> <!--2. 引入插件的js文件--> <script src="jquery.color.js"></script> <script> $(function () //3. 直接使用即可。 //说明jquery不支持颜色的渐变,颜色最好用16进制 $(‘div‘).animate(backgroundColor:"#ffc0cb", 3000, function () alert("呵呵"); ); ); </script> </body> </html>
1.1.2. jquery.lazyload.js
懒加载插件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
height: 4000px;
</style>
</head>
<body>
<div></div>
<img class="lazy" data-original="02.gif" >
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<script>
$(function ()
$("img.lazy").lazyload();
);
</script>
</body>
</html>
1.1.3. jquery.ui.js插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
2. 1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能
使用jquery.ui.js实现新闻模块的案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="jquery-ui.css">
<style type="text/css">
*
margin: 0;
padding: 0;
.drag-wrapper
width: 400px;
margin: 50px auto 0;
/*border: 10px solid #000;*/
.drag-bar
height: 40px;
font-size: 20px;
font-weight: bold;
line-height: 40px;
text-align: center;
background-color: #E6E6E6;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: move;
.resize-item
height: 212px;
border: 1px solid #e6e6e6;
.sort-wrapper
height: 100%;
overflow: hidden;
.sort-item
list-style: none;
padding-top: 10px;
.sort-item li
height: 40px;
line-height: 40px;
padding-left: 20px;
cursor: pointer;
.sort-item li:hover
background-color: #e6e6e6;
</style>
</head>
<body>
<div class="drag-wrapper">
<div class="drag-bar">可拖动、排序、变形的新闻模块</div>
<div class="resize-item">
<div class="sort-wrapper">
<ul class="sort-item">
<li>这是第1条新闻!</li>
<li>这是第2条新闻!</li>
<li>这是第3条新闻!</li>
<li>这是第4条新闻!</li>
<li>这是第5条新闻!</li>
<li>这是第6条新闻!</li>
<li>这是第7条新闻!</li>
<li>这是第8条新闻!</li>
<li>这是第9条新闻!</li>
<li>这是第10条新闻!</li>
</ul>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function ()
$(".drag-wrapper").draggable(
handle:".drag-bar"
);
$(".sort-item").sortable(
opacity:0.3
);
$(".resize-item").resizable(
handles:"s"
);
);
</script>
</body>
</html>
1.2. 制作jquery插件
原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。
//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() ;
prototype
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
//var arr = new Array();
//console.log(arr);
//给数组的原型增加了一个方法，sayHi的方法
// Array.prototype.sayHi = function ()
// console.log("呵呵");
//
//
//
//
// var arr = new Array();
//
// arr.sayHi();
//jquery插件的实质，就是给jquery的原型上增加方法。
//$.fn ==== jQuery.prototype
$.fn.sayHi = function ()
console.log("呵呵");
$(document).sayHi();
</script>
</body>
</html>
初体验
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
width: 200px;
height: 200px;
background-color: pink;
</style>
</head>
<body>
<div></div>
<p>1234</p>
<script src="jquery-1.12.4.js"></script>
<script src="jquery.bgColor.js"></script>
<script>
$(function ()
$("div").bgColor("red").width(400);
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
width: 200px;
height: 200px;
background-color: pink;
</style>
</head>
<body>
<div></div>
<p>1234</p>
<script src="jquery-1.12.4.js"></script>
<script src="jquery.bgColor.js"></script>
<script>
$(function ()
$("div").bgColor("red").width(400);
);
</script>
</body>
</html>
制作手风琴插件
？？？
以上是关于jQuery基础--插件的主要内容，如果未能解决你的问题，请参考以下文章