jquery开发插件_如何开发jQuery插件
jquery开发插件
We have gone through different jQuery event methods, jQuery effects and animations in the previous posts. Now we are going to discuss about one of the most exciting aspects of jQuery, the jQuery Plugins. In this post, we will learn how to create a jQuery plugin.
在之前的文章中，我们介绍了不同的jQuery事件方法 ， jQuery效果和动画 。 现在，我们将讨论jQuery最令人兴奋的方面之一jQuery Plugins 。 在本文中，我们将学习如何创建jQuery插件 。
Plugin is a piece of code that adds some kind of functionality to our applications. Plugins can be very helpful if you want to encapsulate a piece of behavior that you may want to use in different parts of your applications. jQuery provides several plugins that add specific functionality to our applications.
插件是一段代码，为我们的应用程序添加了某种功能。 如果您想封装一些您可能希望在应用程序的不同部分中使用的行为，则插件可能会非常有用。 jQuery提供了几个插件，这些插件为我们的应用程序添加了特定功能。
Here is the general syntax to create a jQuery plugin:
这是创建jQuery插件的一般语法：
- jQuery.fn.pluginName = pluginDefinition; jQuery.fn.pluginName = pluginDefinition ;
pluginName is the name of the plugin you are going to create.
pluginName是您要创建的插件的名称。
pluginDefinition is actual function definition, here you can define the intended operations.
pluginDefinition是实际的函数定义，在这里您可以定义预期的操作。
创建我们的第一个jQuery插件 (Creating our first jQuery plugin)
Let’s create a jQuery plugin to iterate through the div elements in our HTML code and changes the background colour of the divelements to green on clicking each div element.
让我们通过创建一个jQuery插件来遍历div在我们HTML代码的元素和改变的背景颜色div元素，绿色上点击每个div元素。
jQuery.fn.greenify = function() {
return this.each(function(){
$(this).click(function(){
$(this).addClass( "highlight");
});
});
};greenify is the name of our jQuery plugin. Using jQuery.fn makes this method available to all other jQuery objects. 'this' will be the jQuery object the plugin was called on. Instead of using $, you should attach the custom plugin to jQuery directly that will allow the users to use a custom alias via jQuery noConflict() method.
greenify是我们的jQuery插件的名称。 使用jQuery.fn可使此方法可用于所有其他jQuery对象。 'this'将是插件被调用的jQuery对象。 而不是使用$ ，您应该将自定义插件直接附加到jQuery，这将允许用户通过jQuery noConflict（）方法使用自定义别名。
We save the above jQuery plugin with the name jquery.greenify.js. The file is prefixed with jquery. to eliminate the possible name conflicts with other files used in other libraries.
我们将上面的jQuery插件保存为jquery.greenify.js 。 该文件的前缀是jquery。 消除与其他库中使用的其他文件可能的名称冲突。
如何使用jQuery插件 (How to use jQuery Plugin)
We have created our first plugin greenify and now we are going to show how to use this plugin.
我们已经创建了第一个绿色插件，现在我们将展示如何使用该插件。
To make the greenify plugin method available, we must include the plugin file (jquery.greenify.js) similar to jQuery library file in the head of the document.
We must make sure that it appears only after the main jQuery source file and before the custom jQuery script in our code.
为了使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>The following code demonstrates how to use this plugin.
以下代码演示了如何使用此插件。
Note: I’m using jquery-2.1.1.js in this example.
注意：在此示例中，我使用的是jquery-2.1.1.js 。
jquery-plugin.html
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>In this example, you can see how the greenify plugin is included and called to execute the targeted operation.
在此示例中，您可以看到如何包含并调用greenify插件以执行目标操作。
$("div").greenify(): This single line of code iterates over all the div elements and changes it’s background color on clicking each div element.
$("div").greenify() ：此单行代码遍历所有div元素，并在单击每个div元素时更改其背景颜色。
You can see above plugin in action by clicking on any of the below div elements.
您可以通过单击以下任何div元素来查看上面的插件的运行情况。
One of the important features in jQuery is chaining. You can do multiple tasks on a single selector with the jQuery chaining feature. To make our method chain-able takes only a single line of code.
jQuery的重要功能之一是链接。 您可以使用jQuery链接功能在单个选择器上执行多个任务。 使我们的方法可链接仅需一行代码。
$("div").greenify().text("JournalDev") : This single line of code can be used to chain a jQuery text() method to our code.
$("div").greenify().text("JournalDev") ：这一行代码可用于将jQuery text()方法链接到我们的代码。
This is how we write a basic jQuery plugin. I hope you understood this tutorial to getting started with jQuery plugin development.
这就是我们编写基本jQuery插件的方式。 我希望您了解本教程，以开始使用jQuery插件开发。
That’s all for now and we will discuss about different jQuery plugins in the coming posts.
到此为止，我们将在以后的文章中讨论有关不同的jQuery插件的信息。
翻译自: https://www.journaldev.com/5506/how-to-develop-a-jquery-plugin
jquery开发插件