jquery插件开发示例 jquery插件化开发

转载

mob64ca1411a6fc 2023-11-08 22:31:38

文章标签 jquery插件开发示例 python java javascript js 文章分类 jQuery 前端开发

jquery 插件开发

jquery插件开发示例 jquery插件化开发_python

为什么要创建jQuery插件？

一句话：重复使用。通过扩展jQuery，您可以创建可在任何网页上使用的可重用组件。您的代码已封装，因此在其他地方使用相同的函数名称的风险较小。

jQuery如何工作

jQuery的核心是传递DOM元素或包含CSS选择器的字符串。它返回一个jQuery对象，它是一个类似DOM节点的数组集合。然后可以将一个或多个方法链接到这组节点，例如

// color all <p> tags red
$("p").css("color", "red");

注意：尽管jQuery库被命名为'jQuery'，但是'$'是引用它的快捷方式变量。请注意，其他库也可以自己获取“ $”。

jQuery插件如何工作

jQuery允许将方法添加到其库中。调用这些方法时，这些方法将通过JavaScript“ this”对象中的jQuery对象传递。可以根据需要操纵DOM节点，并且该方法应返回“ this”，以便可以链接其他函数。

我们的示例插件将使用以下代码调用：

// reverse the text in all <p> tags
$("p").reverseText();

我们还将添加两个可选参数minlength和maxlength。定义后，字符串长度必须在这些限制之间，以使反转发生。

插件声明

插件是使用jQuery fn函数定义的，例如

jQuery.fn.reverseText = function(params) { ... };

使用“ jQuery”而不是“ $”可确保与其他JavaScript库没有冲突。我们所有的内部代码都应引用“ jQuery”而不是“ $”。但是，我们可以使用匿名函数保存一些键入内容并减小文件大小：

(function($) {
	$.fn.reverseText = function(params) { ... };
})(jQuery);

此函数立即运行，并通过jQuery作为名为“ $”的参数传递。由于“ $”是一个局部变量，因此我们可以假定它始终引用jQuery库，而不是另一个首先抢占全局“ $”变量的库。

插件参数

我们的插件需要两个参数：minlength和maxlength。将它们定义为函数参数是最简单的，例如

(function($) {
	$.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// example
$("p").reverseText(0, 100);

但是，如果我们决定以后再添加更多参数，该怎么办？我们的插件可能有数十个选项-参数处理将很快变得令人费解。作为替代，我们可以传递一个JSON对象，例如

(function($) {
	$.fn.reverseText = function(params) { ... }
})(jQuery);

// example
$("p").reverseText( { minlength: 0, maxlength: 100 } );

reverseText函数的第一行应定义一组默认参数，然后用任何用户定义的值覆盖它们。 jQuery扩展函数可以为我们解决这个问题：

// merge default and user parameters
params = $.extend( {minlength: 0, maxlength: 99999}, params);

因此，除非调用代码覆盖这些值，否则params.minlength为0且params.maxlength为99999。

插件代码

现在我们可以编写我们的主要插件代码：

// traverse all nodes
this.each(function() {

	// express a single node as a jQuery object
	var $t = $(this);

	// find text
	var origText = $t.text(), newText = '';

	// text length within defined limits?
	if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {

		// reverse text
		for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
		$t.text(newText);

	}

});

说明：

this.each函数遍历所有jQuery DOM节点并调用一个匿名函数。
在函数中，“ this”包含一个节点。 jQuery节点集合已分配给$ t，因此我们可以运行jQuery方法。
为变量origText分配了DOM节点内的文本字符串。 newText设置为空字符串。
如果origText的长度介于params.minlength和params.maxlength之间，则循环将在newText中创建一个反向文本字符串。然后，将相应地更新DOM节点。

不要打破链条！

最后，我们应该记得返回jQuery对象，以便可以链接其他方法：

return this;

完整的代码

我们的插件代码现已完成：

(function($) {

	// jQuery plugin definition
	$.fn.reverseText = function(params) {

		// merge default and user parameters
		params = $.extend( {minlength: 0, maxlength: 99999}, params);

		// traverse all nodes
		this.each(function() {

			// express a single node as a jQuery object
			var $t = $(this);

			// find text
			var origText = $t.text(), newText = '';

			// text length within defined limits?
			if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {

				// reverse text
				for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
				$t.text(newText);

			}

		});

		// allow jQuery chaining
		return this;
	};

})(jQuery);

jquery插件开发示例 jquery插件化开发_python_02

<source type="image/webp"><source><img src="https://s2.51cto.com/images/blog/202309/03034041_64f38fb93d6c424111.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

免费获得这本书

该文件另存为jquery.reversetext.js。然后，我们可以在jQuery库加载后将其包含在任何HTML页面中，例如

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>jQuery plugin: reverseText demonstration</title>
</head>
<body>

<h1>jQuery plugin: reverseText</h1>
<p>This jQuery plugin reverses all the text in the selected nodes.</p>

<ul>
<li>This text will be reversed</li>
<li>This text will not be reversed</li>
<li>reversed</li>
<li>not reversed</li>
</ul>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.reversetext.js"></script>
<script type="text/javascript">
// reverse even-numbered LI tag text
$("ul li:even").reverseText();
</script>

</body>
</html>

现在，此页面中的列表在第一和第三项目符号上具有颠倒的文字（请记住，第一项从0开始编号）：

jquery插件开发示例 jquery插件化开发_jquery插件开发示例_03