jQuery 插件开发

xiangxiongfly915

于 2022-12-23 14:36:25 发布

阅读量903

点赞数

分类专栏： # jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_14876133/article/details/128418627

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

jQuery 插件开发

jQuery 插件开发

插件概述

jQuery插件可以理解成是使用jQuery来封装的一个功能或特效。

一般来说，每一个jQuery插件都是放到独立的一个文件中的。常说的引入一个jQuery插件，其实就是引入一个外部JavaScript文件。

常用插件

文本溢出：dotdotdot.js

dotdotdot.js官方地址为http://plugins.jquery.com/dotdotdot/。

单行文本省略

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				border: 1px solid red;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div>
			这些一些内容。这些一些内容。这些一些内容。这些一些内容。这些一些内容。这些一些内容。
		</div>
	</body>
</html>

在这里插入图片描述

多行文本省略

如果想要实现“多行文本”的省略号效果，我们可以使用dotdotdot.js这个jQuery插件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 50px;
				border: 1px solid red;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script src="js/jquery.dotdotdot.min.js"></script>
		<script>
			$(function() {
				$("div").dotdotdot();
			})
		</script>
	</head>
	<body>
		<div>
			这些一些内容。这些一些内容。这些一些内容。这些一些内容。这些一些内容。这些一些内容。
		</div>
	</body>
</html>

在这里插入图片描述

延迟加载：lazyload.js

中文文档：http://code.ciaoca.com/jquery/lazyload。

github文档：https://github.com/tuupola/jquery_lazyload。

例如进入某个页面时，页面上会有很多图片，有些图片在下面，当我们没有看完整个页面时，那么下面的图片对我们来说就是“没用”的，加载了也是白加载，而且还会降低页面整体的加载速度。

在jQuery中，我们可以使用lazyload.js这个插件来实现图片的延迟加载。也就是只有当我们把滚动条拉到某个位置，相应处的图片才会显示出来，否则就不会显示。

步骤

引入jQuery库和lazyload.js插件。
使用data-original替代src。
调用lazyload()方法。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				height: 800px;
				background-color: grey;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script src="js/jquery.lazyload.min.js"></script>
		<script>
			$(function() {
				$("img").lazyload(function() {
					effect: "fadeIn"
				});
			})
		</script>
	</head>
	<body>
		<div></div>
		<img data-original="img/a.png">
		<img data-original="img/b.png">
		<img data-original="img/c.png">
		<img data-original="img/d.png">
		<img data-original="img/e.png">
	</body>
</html>

插件编写

方法类插件

语法

(function($){
    $.fn.extend({ 
        "插件名": function(参数){ 
            …… 
        } 
    }); 
})(jQuery);

简单使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			(function() {
				$.fn.extend({
					"hoverChangeColor": function(fgColor, bgColor) {
						$(this).mouseover(function() {
								$(this).css({
									"color": fgColor,
									"background-color": bgColor
								});
							})
							.mouseout(function() {
								$(this).css({
									"color": "black",
									"background-color": "white"
								});
							});
						return $(this);
					}
				})
			})(jQuery);
		</script>
		<script>
			$(function() {
				$("h3").hoverChangeColor("red", "#010101");
			})
		</script>
	</head>
	<body>
		<h3>hello world!</h3>
	</body>
</html>

在这里插入图片描述

添加默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			(function() {
				$.fn.extend({
					"hoverChangeColor": function(options) {
						var defautls = {
							fgColor: "hotpink",
							bgColor: "lightskyblue"
						};
						var options = $.extend(defautls, options)
						$(this).mouseover(function() {
								$(this).css({
									"color": options.fgColor,
									"background-color": options.bgColor
								});
							})
							.mouseout(function() {
								$(this).css({
									"color": "black",
									"background-color": "white"
								});
							});
						return $(this);
					}
				})
			})(jQuery);
		</script>
		<script>
			$(function() {
				$("h3").hoverChangeColor();
			})
		</script>
	</head>
	<body>
		<h3>hello world!</h3>
	</body>
</html>

$.extend(defautls, options)合并2个对象，将右边的对象合并到左边的对象上。

函数类插件

语法

(function($){
    $.extend({ 
        "插件名": function(){ 
            …… 
        } 
    }); 
})(jQuery)

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			(function($) {
				$.extend({
					"maxNum": function(m, n) {
						return (m > n) ? m : n;
					}
				});
			})(jQuery)
			$(function() {
				var result = $.maxNum(10, 5)
				console.log("最大值是：" + result);
			})
		</script>
	</head>
	<body>
	</body>
</html>