写一个简单的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签到插件,虽 ...
随机推荐
- jenkins原理
原理:Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 直白的说:这个jenkins是CI ...
- Lottie 动画
#### 三方框架之Lotti使用Lottie 的使用 1.添加 Gradle 依赖 dependencies { compile 'com.airbnb.android:lottie:1.5.3'} ...
- Spring Boot 导出Excel表格
Spring Boot 导出Excel表格 添加支持 <!--添加导入/出表格依赖--> <dependency> <groupId>org.apache.poi& ...
- alpha冲刺4/10
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺4 团队部分 后敬甲 过去两天完成了哪些任务 文字描述 主页部分图标的替换 -拍照按钮的设计和测试 GitHub代码 ...
- nginx 正则及rewrite常用规则实例
一.正则表达式匹配,其中:* ~ 为区分大小写匹配* ~* 为不区分大小写匹配* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配二.文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* ...
- Python_面向对象_类2
类的几个装饰器方法: @classmethod (类方法):使之无法访问实例变量 class Animal(object): def __init__(self, name): self.name = ...
- flink的Standalone集群安装
1:上传安装包到linux系统 使用rz命令 2:解压 tar –zxvf flink-1.5.0-bin-hadoop24-scala_2.11.tgz 3:修改配置文件 vim conf/flin ...
- 初识Python.day2
一. python运算符 算数运算符 比较运算符 赋值运算符 逻辑运算符 成员运算符 二. Python基础数据类型 1. python字符串总结 # 首字母变大写 # a1 = "jiu ...
- Javascript 中调参数的脚本onclick="select(this)" this 怎么解释
解释1. this,指当前的onclick所在的节点本身. 比如: <div onclick='select(this)"></div> 则当点击div时,this就 ...
- ncat
ncat 或者说 nc 是一款功能类似 cat 的工具,但是是用于网络的.它是一款拥有多种功能的 CLI 工具,可以用来在网络上读.写以及重定向数据. 它被设计成可以被脚本或其他程序调用的可靠的后端工 ...