编写自己的jQuery插件简单实现代码


Posted in Javascript onApril 19, 2011

这里只阐述如何编写自己的插件,至于要实现什么功能,要因人而异了...好了,下面开始...
jQuery插件主要分为三种
1、封装对象方法的插件
2、封装全局函数的插件
3、扩展选择器的插件
这里只编写前俩种,即比较常见的..
大多数插件都是已这种形式编写的:

(function ($) { 
/* 这里放置代码 */ 
})(jQuery);

这样的好处是函数内部依然可以使用$作为jQuery的别名,而不影响到其他库使用$
jQuery提供了俩个扩展用于编写插件
$.fn.extend({});用于扩展第一种
$.extend({});用于扩展第二种
以下为实现效果截图和代码
编写自己的jQuery插件简单实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title></title> 
<style type="text/css"> 
li { border: 1px solid #000; cursor: pointer; width: 200px; display: block; } 
</style> 
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
(function ($) { 

$.fn.extend({ 



"chgSC": function (options) { 




 options = $.extend({ FontSize: "100px", Color: "red" }, options); //这里用了$.extend方法,扩展一个对象 
return this.hover(function () { //return为了保持jQuery的链式操作 





 $(this).css({ "fontSize": options.FontSize, "color": options.Color }); 





 }, function () { 


 $(this).css({ "fontSize": "", "color": "" }); 





 }); 
} 
}); 
$.extend({ 




"urlParam": function () { 





 var pageUrl = location.search; 






 if (pageUrl != "") 




 return pageUrl.slice(1); 





 else 





 return "没有参数"; 





 } 




}); 
})(jQuery); 
$(function () { 


$("li").chgSC({ FontSize: "130px" }); 
  alert($.urlParam()); 
}); 
</script> 
</head> 
<body> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
vuejs如何配置less
Apr 25 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 #Javascript
分享20款好玩的jQuery游戏
Apr 17 #Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 #Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 #Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 #Javascript
表单JS弹出填写提示效果代码
Apr 16 #Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 #Javascript
You might like
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
如何开发一个JQuery插件
2016/07/28 面试题
幼儿园教师请假制度
2014/01/16 职场文书
同学会感言
2015/07/30 职场文书
高三化学教学反思
2016/02/22 职场文书