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中this的使用说明
Sep 06 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
基于Vant UI框架实现时间段选择器
Dec 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
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
python实现打砖块游戏
2020/02/25 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
十一个高级MySql面试题
2014/10/06 面试题
自荐信格式
2013/12/01 职场文书
合同专员岗位职责
2013/12/18 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
大学生受助感言
2015/08/01 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript