Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用,
本人就感觉很好奇他们是怎么做到的呢,于是自己也开始想学习封装一下,才用了Jquery插件的学习,
在学习Jquery的开发时候网上也看过了很多人写过例子但是都是很简单的,没有完整的从写插件方法到调用插件,有的要不就是很深的于是自己写一下自己的学的东西方便以后学习,和分享给和我一样在学习Jquery插件的朋友,废话不多说先上代码
(function ($) {
//带有参数的插件
$.fn.myPlugins = function(options){
var defaults = {
'color':'red',//对外提供了Color参数
'fontSize':'12px',//对外提供了字体大小参数
'backgroundColor':'red',//对外提供了背景参数
'borderRadius':'12px'//对外提供了圆角边框参数
};
var opts = $.extend({},defaults,options); //将一个空对象做为第一个参数
this.css({
'color':opts.color,
'font-size':opts.fontSize,
'background-color':opts.backgroundColor,
'border-radius':opts.borderRadius
});
return this;
};
})(jQuery);
以上是jquery插件代码只要复制到你项目中就可以使用
下面是页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery插件学习</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="MyPlugin.js"></script>
<script type="text/javascript" src="MySelf.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").myPlugins({
color:'blue',//这里是调用参数的地方
fontSize:'23px'
});
});
</script>
</head>
<body>
<p>第一天学习插件</p>
</body>
</html>
未经过本人的同意请勿转载,如果要转载请添加上本人的博客地址谢谢:https://i.cnblogs.com/EditPosts.aspx?opt=1
Jquery插件学习的更多相关文章
- jquery插件学习之元素顶部悬浮
jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- jQuery插件学习(一)
由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...
- jquery插件 - 学习笔记 (插件参数及函数的调用)
今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...
- JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
- jQuery插件学习笔记
近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...
- [置顶] JQuery插件学习教程
这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...
- jquery 插件学习
练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件: 2.测试的主html页面代码 <!DOCTYPE html> ...
- jQuery插件学习基础
1.给jQuery添加全局的函数: $.zgz={ fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...
- jQuery插件学习之选项卡Tab
在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...
随机推荐
- [Hive - Tutorial] Data Units 数据存储单位
Data Units In the order of granularity - Hive data is organized into: 数据库.表.分区.桶 Databases: Namespac ...
- MEAN Stack:创建RESTful web service
本文在个人博客上的地址为URL,欢迎品尝. 前段时间做了DTREE项目中的前后端数据存储功能,在原有的ngController上进行HTTP请求,后端接受到请求后再存储到mongoDB上.现将学习所得 ...
- linux内核地址mapping
linux内核采用页式存储管理,虚拟地址空间划分成固定大小的页面,由MMU(memory manager unit)在运行时将virtual address mapping to (或者说是变化成)某 ...
- svn IP地址变更后如何变更
通过grep ip地址,发现svn中url地址信息是记录在.svn文件夹entries文件中的,第一种方案应该是遍历目录下的entries文件,将ip替换为新的ip即可. 可以发现这个用sed命令即可 ...
- 【转】UIBezierPath精讲
http://www.henishuo.com/uibezierpath-draw/ 基础知识 使用UIBezierPath可以创建基于矢量的路径,此类是Core Graphics框架关于路径的封装. ...
- HDU 4864 Task (贪心)
Task 题目链接: http://acm.hust.edu.cn/vjudge/contest/121336#problem/B Description Today the company has ...
- Linux命令(1)-scp
Linux scp命令用于Linux之间复制文件和目录,包括从本地复制到远程.从远程复制到本地是两种使用方式. 命令基本格式 scp [可选参数] file_source file_target 从本 ...
- Linux(Centos)全自动异地备份数据(WEB+Mysql)
文章开始之前,先问下各位站长一个问题:什么东西对于站长是十分重要的?其实对于站长而言,很多东西都是很重要的.但我们现在排除外在因素,把范围缩小到网站系统本身,哪些是非常重要的呢?网站数据就是其中之一了 ...
- javascript实现队列功能
- oracle 的rowid和rownum
rowid就是唯一标志记录物理位置的一个id,对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推,这个伪字段可以用于限制查询返回的总行 ...