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 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
详解JavaScript 事件流
Sep 02 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调用三种数据库的方法(3)
2006/10/09 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Python编程中装饰器的使用示例解析
2016/06/20 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
python 用struct模块解决黏包问题
2020/11/07 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
绩效管理实施方案
2014/03/19 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
客户经理岗位职责
2015/01/31 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
学习党史心得体会2016
2016/01/23 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python