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 打印内容方法小结
Nov 04 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
vue实现记事本功能
Jun 26 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php和html的区别点详细总结
2019/09/24 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Python编程修改MP3文件名称的方法
2017/04/19 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
个人简历自我评价
2014/01/06 职场文书
社区消防工作实施方案
2014/03/21 职场文书
安全例会汇报材料
2014/08/23 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
表扬稿范文
2015/01/17 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Python 中 Shutil 模块详情
2021/11/11 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python