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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
javascript 动态创建表格
Jan 08 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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去除头尾空格的2种方法
2015/03/16 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python 异常处理实例详解
2014/03/12 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
python中正则表达式的使用方法
2018/02/25 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
PyQt5实现简易电子词典
2019/06/25 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
技术学校毕业生求职信分享
2013/12/02 职场文书
农民工创业典型事迹
2014/01/25 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
司法建议书范文
2014/05/13 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
2016春节放假通知范文
2015/08/18 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
MySQL 使用索引扫描进行排序
2021/06/20 MySQL