当前位置: 首页 >> JS/Jquery >> 教你怎么写jQuery的插件

教你怎么写jQuery的插件

发表时间:2016-09-01 11:04  |  2条评论  |  点击数:165  |  作者:jws132

jQuery(以下简称JQ)是一个功能强大而又小巧的JS框架,现在很多网站都在使用JQ,本站也不例外。本文教大家如何写一个属于你自己的JQ插件。

本JQ插件例子是在你网站的文章结尾处添加你的版权。

JQ插件标准的封装代码如下,首先需要闭包:

<scripttype="text/javascript">
(function ($) {
 //这里放入插件代码
})(jQuery);
</script>

这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
接着给插件加入主体:

<scripttype="text/javascript">
(function ($) {
 $.fn.userCp = function(options) { //定义插件的名称,这里为userCp
 var dft = {
 //以下为该插件的属性及其默认值
 cpBy: "dafi", //版权所有者
 url: "http://www.jz07.cn", //所有者链接
 size: "12px", //版权文字大小
 align: "left" //版权文字位置,left || center || right
 };
 var ops = $.extend(dft,options);
 var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; //调用默认的样式
 var cpTxt = '<p' + ' ' + style + '>此文章版权归<atarget="_blank"href="' + ops.url + '">' + ops.cpBy + '</a>所有</p>'; //生成版权文字的代码
 $(this).append(cpTxt); //把版权文字加入到想显示的div
 }
})(jQuery);
</script>

OK了,这个插件已经完成了,接下来我们来看看调用的方式。

比如你文章所在的div的id=”article-content”,那么在此div后面(先读取到了该div,该div才可以作为后面的JS的对象)加上JS代码:

<scripttype="text/javascript">
 $("#article-content").userCp();
<script">

其实也不是一定要放到该div的后面,比如要放到head区域里的话,就要使用JQ的预读功能,也就是把页面所有的dom都读取完之后,才执行里面的JS:

<scripttype="text/javascript">
$(function(){ //官方解释:在dom文档载入完成后执行的函数
 $("#article-content").userCp();
});
<script">

如果不想使用默认的内容,比如要修改版权所有者名字、网址、文字大小和靠右显示等,那就给这个插件传几个参数:

<scripttype="text/javascript">
 $("#article-content").userCp({
 cpBy: " T ",
 url: "http://dafi.cn",
 size: "16px",
 align: "right"
 });
<script">

在实际的应用中,我们当然不会写这么一个插件,因为直接用非封装的方法或者直接改页面的源码会更快更方便,我只是为了给大家一个demo,所以才写了这个鸡肋的插件。

网友评论 2条评论
  
  • 全部评论
  • 站主信息
网名:小白 | ゞ_Shuつ
姓名:蒋文书
生日:1990-05-22
籍贯:浙江省—温州市
现居:北京市—昌平区
职业:网站设计、网站制作。今后想成为一名高级程序员
爱好:研究java,php编程,打球,唱歌,登山。
喜欢的书:《红与黑》《红楼梦》
喜欢的歌手:黄家驹 Rain 六哲
网站信息:本站正在完善中下步会新增用户中心预计完成在7月中旬
  • 热门关注
  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 最新评论
  • 【聚会】22日跟大闽网友一起看世界杯,小龙虾啤酒通通免费吃...[详细]

  • 【福利】带孩子玩水不要钱!50份白水洋套票免费送了...[详细]

  • 【福利】熬夜看球太累太伤?没关系!养生粤菜免费吃起来...[详细]

  • 【独家】送福利来了,空调挂机免费清洗,快来回帖报名吧...[详细]

  • 【独家】猜世界杯冠军,8套1088元纯金纪念钞免费送! ...[详细]

Copyright © 2013-2016 . 蒋文书个人博客 版权所有 浙ICP备16006289号