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针对DOM的应用分析(四)
Apr 15 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
原生js实现九宫格拖拽换位
Jan 26 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
Vue-cli3多页面配置详解
2020/03/22 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
PHP实现发送和接收JSON请求
2018/06/07 Python
python自动生成model文件过程详解
2019/11/02 Python
Python 使用type来定义类的实现
2019/11/19 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
python如何运行js语句
2020/09/09 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
工程部经理岗位职责
2013/12/08 职场文书
商超业务员岗位职责
2014/03/12 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2014年护理部工作总结
2014/11/14 职场文书
车间班组长竞聘书
2015/09/15 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL