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的单例模式 (singleton in Javascript)
Jun 11 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 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设计模式之责任链模式的深入解析
2013/06/13 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
js常用DOM方法详解
2017/02/04 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python3中zip()函数使用详解
2018/06/29 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
2014初中数学教研组工作总结
2014/12/19 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL