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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
通过修改referer下载文件的方法
May 11 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
js简单时间比较的方法
Aug 02 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Python如何读取文件中图片格式
2020/01/13 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
校友会欢迎辞
2014/01/13 职场文书
小学庆六一活动总结
2014/08/28 职场文书
临时租车协议范本
2014/09/23 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript