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 检测浏览器和操作系统的脚本
Dec 26 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
react中使用css的7中方式(最全总结)
Feb 11 Javascript
Javascript的this详解
Mar 23 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
第八节 访问方式 [8]
2006/10/09 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
js loading加载效果实现代码
2009/11/24 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
JS制作简易计算器的实例代码
2020/07/04 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
买房子个人收入证明
2014/01/16 职场文书
绩效工资分配方案
2014/01/18 职场文书
新闻学专业求职信
2014/07/28 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014年党总支工作总结
2014/12/18 职场文书
亲属关系公证书样本
2015/01/23 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript