写一个简单的JQ插件(例子)
虽然现在 vue angular react 当道啊
但是那 JQ还是有一席之地
很多很多的小单位啊.其实还会用到
我也放一个例子吧
虽然我也不是很肯定有没有人写的比我更好啊
但是我相信 我这个还是蛮实用的
话不多说 丢代码
JQ插件标准的封装代码如下,首先需要闭包:
< script type = "text/javascript" > (function ($) { //这里放入插件代码 })(jQuery); </ script > |
这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
接着给插件加入主体:
< script type = "text/javascript" > (function ($) { $.fn.userCp = function(options) { //定义插件的名称,这里为userCp var dft = { //以下为该插件的属性及其默认值 cpBy: "dafi", //版权所有者 url: "http://www.dafi.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 + '>此文章版权归< a target = "_blank" href = "' + ops.url + '" >' + ops.cpBy + '</ a >所有</ p >'; //生成版权文字的代码 $(this).append(cpTxt); //把版权文字加入到想显示的div } })(jQuery); </ script > |
OK了,这个插件已经完成了,接下来我们来看看调用的方式。
比如你文章所在的div的id=”article-content”,那么在此div后面(先读取到了该div,该div才可以作为后面的JS的对象)加上JS代码:
< script type = "text/javascript" > $("#article-content").userCp(); < script "> |
其实也不是一定要放到该div的后面,比如要放到head区域里的话,就要使用JQ的预读功能,也就是把页面所有的dom都读取完之后,才执行里面的JS:
< script type = "text/javascript" > $(function(){ //官方解释:在dom文档载入完成后执行的函数 $("#article-content").userCp(); }); < script "> |
如果不想使用默认的内容,比如要修改版权所有者名字、网址、文字大小和靠右显示等,那就给这个插件传几个参数:
< script type = "text/javascript" > $("#article-content").userCp({ cpBy: " T ", url: "http://dafi.cn", size: "16px", align: "right" }); < script "> |
写一个简单的JQ插件(例子)的更多相关文章
- 大前端工程化之写一个简单的webpack插件
今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...
- 从0开始写一个简单的vite hmr 插件
从0开始写一个简单的vite hmr 插件 0. 写在前面 在构建前端项目的时候,除开基本的资源格式(图片,json)以外,还常常会需要导入一些其他格式的资源,这些资源如果没有第三方vite插件的支持 ...
- 手把手教你从零写一个简单的 VUE
本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...
- 如何写一个简单的http服务器
最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...
- 如何写一个简单的shell
如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- [转]一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程
一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程 希望此文能给初学多线程编程的朋友带来帮助,也希望牛人多多指出错误. 另外感谢以下链接的作者给予,给我的学习带来了很大帮助 http ...
- Java写一个简单学生管理系统
其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...
- 【酷Q插件制作】教大家做一个简单的签到插件
酷Q插件已经有很多了,社区分享一大堆,不过还是自己写才有乐趣,哈哈.不得不吐槽一下,酷Q竟然不更新了,出了个酷Q pro,还收费!!诶.不过这也影响不了咱写插件的心情,今天教大家写一个酷Q签到插件,虽 ...
随机推荐
- 微信小程序 如何获取用户code
1.首先需要获取code 使用 wx.login({ success: function(res) { console.log(res);//这里的返回值里面便包含code }, fail: func ...
- Django中间件 及 form 实现用户登陆
Django中间件 及 form 实现用户登陆 Form 验证 密码调用md5 加密存储 form.add_error("字段名", "错误信息") 自定义错误 ...
- 阻止Java反编译蛋疼方法
public class landv { private static String companyName="landv测试"; public static void main( ...
- WARN Session 0x0 for server null, unexpected error, closing socket connection and attempting reconnect (org.apache.zookeeper.ClientCnxn) java.net.ConnectException: Connection refused
1.启动kafka的脚本程序报如下所示的错误: [hadoop@slaver1 script_hadoop]$ kafka-start.sh start kafkaServer... [-- ::,] ...
- ElasticSearch(五) Elasticsearch-jdbc实现MySQL同步到ElasticSearch
https://www.cnblogs.com/wt645631686/p/8274722.html
- webpack学习笔记--按需加载
为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...
- noip飞扬的小鸟
题解: 挺简单的题目 f[i][j]表示x坐标为i,y坐标为j的最小值 会发现那个东西是个完全背包 从f[i][j-a[i]]转移一下就是O(1)转移的了 另外上界为m这个要特判一下 我把sum[a[ ...
- 1419: Red is good
题解: 很简单的期望dp 转移方程显然,max一个0就可以了 #include <bits/stdc++.h> using namespace std; #define rep(i,h,t ...
- ASP.NET machineKey的作用和使用方法
ASP.NET machineKey的作用 如果你的Asp.Net程序执行时碰到这种错误:“验证视图状态 MAC 失败.如果此应用程序由网络场或群集承载,请确保 <machineKey> ...
- 如何使用maven进行avro序列化
maven导入avro: <dependency> <groupId>org.apache.avro</groupId> <artifactId>avr ...