文章目录
- jQuery 插件开发
- 插件概述
- 常用插件
- 文本溢出：dotdotdot.js
- 单行文本省略
- 多行文本省略
- 延迟加载：lazyload.js
- 插件编写
- 方法类插件
- 函数类插件
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>
