热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

教你怎么写jQuery的插件

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

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

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

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

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

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

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

 $("#article-content").userCp();

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

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

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

 $("#article-content").userCp({
 cpBy: " T ",
 url: "http://dafi.cn",
 size: "16px",
 align: "right"
 });

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

不会JS的同学,可以直接去学JQ,这样让你在短时间内能够做出很炫的效果,而不必去啃那些厚厚的JS书籍了。不过如果你是想以JS作为职业的话,还是要从最基本的东西学起。


推荐阅读
author-avatar
cws401_712
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有