编写自己的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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
Javascript 陷阱 window全局对象
Nov 26 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
vue实现表格合并功能
Dec 01 Vue.js
提升你网站水平的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开发GUI
2006/10/09 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python中实现三目运算的方法
2015/06/21 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Python随机函数random()使用方法小结
2018/04/29 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python 重命名轴索引的方法
2018/11/10 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python、Matlab求定积分的实现
2019/11/20 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
毕业生大学生活自我总结
2014/01/31 职场文书
入学申请自荐信范文
2014/02/26 职场文书
初三新学期计划书
2014/05/03 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
2019年大学推荐信
2019/06/24 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书