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 相关文章推荐
jquery中ajax学习笔记4
Oct 16 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
design vue 表格开启列排序的操作
Oct 28 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
文件上传的实现
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
php格式化json函数示例代码
2016/05/12 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
javaScript动态添加Li元素的实例
2018/02/24 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
星球大战与Python之间的那些事
2016/01/07 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python导入库的具体方法
2020/06/18 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
行政总经理岗位职责
2013/12/05 职场文书
大一军训感言
2014/01/09 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
财务经理岗位职责
2015/01/31 职场文书
大学生个人学年总结
2015/02/15 职场文书
付款证明模板
2015/06/19 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫