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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
详解vue路由
2020/08/05 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
Python基于内置函数type创建新类型
2020/10/22 Python
python中_del_还原数据的方法
2020/12/09 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
电气专业推荐信范文
2013/11/18 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
综合内勤岗位职责
2014/04/14 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2016年父亲节寄语
2015/12/04 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
Java中try catch处理异常示例
2021/12/06 Java/Android
postgresql中如何执行sql文件
2023/05/08 PostgreSQL