极客教程如何创建一个有方法的jQuery插件
Jquery是一个Javascript库，用于设计或简化HTML、CSS、AJAX、DOM以及网络开发的事件处理。它是开源软件，对所有人免费。有超过1000万个网站使用jquery。Jquery简单地将一行javascript转换为可在一行代码中调用的方法。这些插件的实现。
方法：在Jquery中，插件是一个标准的javascript文件中需要的代码。插件有助于提供不同的方法，可以与不同的jquery库方法一起使用。
- 创建一个方法
jQuery.fn.methodName = methodDefinition;
其中.methodname是一个方法的名称，而
methoddefinition定义了一个方法
- 为了获得一个完美的或兼容的代码，使用this.each，它是用来执行一组匹配的元素。
- 前缀应以
.js结尾。
语法：以下是一个插件文件的语法
(function(){.fn.myFunction(settings){
settings = $.extend({setting_A: 'default_A', setting_B: 'default_B'...});
...code away!
};
}(jQuery);
例子1：这里是一个插件的例子。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-3.4.1.js"
type="text/javascript">
</script>
<script src="custom.js"
type="text/javascript">
</script>
</head>
<script>
(function() {
.fn.myFunction(settings) {
settings = .extend({
setting_A: 'default_A',
setting_B: 'default_B'...
});
...code away!
};
}(jQuery);
</script>
<body>
<h1>GeeksForGeeks</h1>
<p>A Computer Portal For Geeks</p>
<button> Click To Get Started </button>
<script>
(document).ready(function() {
$('button').click(function() {
alert('My first jquery code');
});
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
-
点击该按钮后。
示例 2:
下面的方法是一个拥有警告方法的例子。请看一下plugin.js文件的语法
(function() {.fn.targetBlank = function () {
alert('Working');
}
}) (jQuery);
现在看看这个例子，它显示了如何用HTML链接这个插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
type="text/css"
href="css/style.css">
</head>
<script>
(function() {
.fn.targetBlank = function() {
alert('Working');
}
})(jQuery);
</script>
<body>
<a href="https://www.google.co.in/"
target="_blank">Google</a>
<script type="text/javascript"
src="jquery-3.4.1.js"></script>
<script type="text/javascript"
src="plugin.js"></script>
<script type="text/javascript"
src="ext.js"></script>
</body>
</html>
输出:
