Jquery 扩展方法


Posted in Javascript onMay 06, 2010

网上搜索了信息在编写JQUERY扩展方法有两种,一种是使用jquery.fn.extend,一种是jquery.extend.
jquery.fn表示jquery.prototype,,给jquery对象添加方法。刚好用到扩展方法,并且使用jquery.fn,这里就写下jquery.fn的用法,这些网上很多,蛮写蛮写
比如当点击 button时弹出一个textbox的值加一个参数值

jquery.fn.extend({ 
alertMessage:function(message){ 
var txtboxValue = $(this).val();//使用$(this)表示对哪个对象添加了扩展方法,这里是指$('#textbox' ) 
alert(txtboxValue + message); 
} 
}); 
$(function(){ 
$("input[name='btn' ]").click(function(){ 
$('#textbox' ).alertMessage("是字符串"); 
}) 
})

html:
<input type='button' name='btn' value='Alert'/> 
<input type='text' id='textbox' value='abc'/>

于是翻出了前年的Jquery中文文档。 大致浏览了下Jquery的方法。发现Jquery如此之强大,怎么以前就没有发现呢?于是就亲手写了基于Jquery的扩展函数,代码如下:

jQuery.fn.__toggleCheck = function (idPrefix) { 
var c = false; 
$(this).click(function () { 
if (c) c = false; 
else c = true; 
$("input[type=checkbox][id^=" + idPrefix + "]").each( 
function () { 
this.checked = c; 
} 
); 
}); 
}; 
jQuery.fn.__setRepeaterStyle = function (itemTag, evenStyle, hoverStyle) { 
$("#" + this.attr("id") + " " + itemTag + ":odd").addClass(evenStyle); 
var cssOriginal = ""; 
$("#" + this.attr("id") + " " + itemTag + "").mouseover(function () { 
cssOriginal = $(this).attr("class"); 
$(this).addClass(hoverStyle); 
}); 
$("#" + this.attr("id") + " " + itemTag + "").mouseout(function () { 
$(this).removeClass(); 
if (cssOriginal.length > 0) { 
$(this).addClass(cssOriginal); 
} 
}); 
};

以上函数调用如下:
<div id="selBox"> 
<input type="checkbox" id="a_1" />1 
<input type="checkbox" id="a_2" />2 
<input type="checkbox" id="a_3" />3 
<input type="checkbox" id="a_4" />4 
<input type="checkbox" id="a_5" />5 
<input type="checkbox" id="a_6" />6 
<input type="checkbox" id="a_All" />All</div> 
<div id="a_All1">Check</div> 
</div> 
<style type="text/css"> 
table tr {} 
table .rowStyle { background:#dedede;} 
table .hoverStyle {font-weight:bold; color:Red; background-color:Gray;} 
</style> 
<table id="tb" style="width:100%; border:solid 1px #dedede;"> 
<tr> 
<td>1</td> 
</tr> 
<tr> 
<td>1</td> 
</tr> 
<tr> 
<td>1</td> 
</tr> 
</table> 
<script type="text/javascript"> 
$("#a_All").__toggleCheck("a_"); 
$("#a_All1").__toggleCheck("a_"); 
$("#tb").__setRepeaterStyle("tr", "rowStyle", "hoverStyle"); 
</script>
Javascript 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
javascript实现简单的进度条
Jul 02 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 #Javascript
屏蔽F1~F12的快捷键的js函数
May 06 #Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 #Javascript
picChange 图片切换特效的函数代码
May 06 #Javascript
JS 自定义函数缺省值的设置方法
May 05 #Javascript
JSQL 批量图片切换的实现代码
May 05 #Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 #Javascript
You might like
PHP 模拟$_PUT实现代码
2010/03/15 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python随机读取文件实现实例
2017/05/25 Python
Python程序退出方式小结
2017/12/09 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
简单了解django orm中介模型
2019/07/30 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
监理资料员岗位职责
2014/01/03 职场文书
教师个人学习总结
2015/02/11 职场文书
简爱读书笔记
2015/06/26 职场文书
创业计划书之废品回收
2019/09/26 职场文书