如何开发jQuery插件
在之前的文章中，我们介绍了不同的jQuery事件方法，jQuery效果和动画。
现在，我们将讨论jQuery最令人兴奋的方面之一jQuery插件。
在本文中，我们将学习如何创建jQuery插件。
插件是一段代码，为我们的应用程序添加了某种功能。
如果您想封装一种可能要在应用程序的不同部分中使用的行为，则插件可能非常有用。
jQuery提供了几个插件，这些插件为我们的应用程序添加了特定功能。
这是创建jQuery插件的一般语法：
- jQuery.fn.pluginName = pluginDefinition;
pluginName是您要创建的插件的名称。
pluginDefinition是实际的函数定义，在这里您可以定义预期的操作。
创建我们的第一个jQuery插件
让我们创建一个jQuery插件来遍历HTML代码中的div元素，然后在单击每个div元素时将div元素的背景颜色更改为绿色。
jQuery.fn.greenify = function() {
return this.each(function(){
$(this).click(function(){
$(this).addClass( "highlight");
});
});
};
greenify是我们的jQuery插件的名称。
使用jQuery.fn可使此方法可用于所有其他jQuery对象。'this'将是插件被调用的jQuery对象。
而不是使用$，您应该将自定义插件直接附加到jQuery，这将允许用户通过jQuery noConflict()方法使用自定义别名。
我们将上面的jQuery插件保存为jquery.greenify.js。
该文件的前缀为jquery。
消除与其他库中使用的其他文件可能的名称冲突。
如何使用jQuery插件
我们已经创建了第一个绿色插件，现在我们将展示如何使用该插件。
为了使greenify插件方法可用，我们必须在文档的" head"中包含类似于jQuery库文件的插件文件(jquery.greenify.js)。
我们必须确保它仅出现在主jQuery源文件之后以及代码中的自定义jQuery脚本之前。
<html> <head> <script src="jquery-2.1.1.js"></script> <script src="jquery.greenify.js"></script> <script> //our jQuery code goes here </script> </head> <body> <!--html codes --> </body> </html>
以下代码演示了如何使用此插件。
注意：在此示例中，我使用的是jquery-2.1.1.js。
jquery-plugin.html
<!doctype html>
<html>
<head>
<title>jQuery Plugin Demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 20px;
float: left;
border: 4px solid black;
text-align: center;
font-weight: bolder;
cursor: pointer;
}
h2 {
color: red;
font-weight: bolder;
width:400px;
background: white;
margin: 3px;
clear: left;
}
.highlight {
background-color: green;
}
</style>
<script src="jquery-2.1.1.js"></script>
<script src="jquery.greenify.js"></script>
<script>
$(document).ready(function() {
$("div").greenify();
});
</script>
</head>
<body>
<h2>Plugin Demo</h2>
<div>
click
</div>
<div>
click
</div>
<div>
click
</div>
</body>
</html>
在此示例中，您可以看到如何包含并调用greenify插件以执行目标操作。
$(" div").greenify()：这行代码会遍历所有div元素，并在单击每个div元素时更改其背景颜色。
您可以通过单击以下div元素中的任何一个来查看上述插件的运行情况。
jQuery重要功能之一是链接。
您可以使用jQuery链接功能在单个选择器上执行多个任务。
使我们的方法可链接仅需一行代码。
$(" div")。
greenify()。
text(" theitroad")"：这一行代码可用于将jQuerytext()方法链接到我们的代码。
