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的键盘控制事件说明
Apr 15 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
JQuery教学之性能优化
May 14 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
小程序实现短信登录倒计时
Jul 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
pandas string转dataframe的方法
2018/04/11 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
学习方法演讲稿
2014/05/10 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
李强优秀员工观后感
2015/06/16 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
2015年教师节广播稿
2015/08/19 职场文书
六年级情感作文之500字
2019/10/23 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
Oracle 触发器trigger使用案例
2022/02/24 Oracle
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android