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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
全面了解js中的script标签
Jul 04 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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 HTML代码串 截取实现代码
2009/06/29 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
PHP5函数小全(分享)
2013/06/06 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
新闻内页-JS分页
2006/06/07 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
5种Python单例模式的实现方式
2016/01/14 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
接待员岗位责任制
2014/02/10 职场文书
项目建议书范文
2014/05/12 职场文书
贷款承诺书范文
2014/05/19 职场文书
工地质量标语
2014/06/12 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
西双版纳导游词
2015/02/03 职场文书
工程部岗位职责
2015/02/10 职场文书