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 相关文章推荐
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 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之第四天
2006/10/09 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php文件操作实例代码
2012/05/10 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
广播体操口号
2014/06/18 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
青年文明号汇报材料
2014/12/23 职场文书