递易科技网
您的当前位置:首页Jquery扩展方法_jquery

Jquery扩展方法_jquery

来源:递易科技网


网上搜索了信息在编写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:
代码如下:


于是翻出了前年的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);
}
});
};

以上函数调用如下:
代码如下:

1
2
3
4
5
6
All
Check












1
1
1


$("#a_All").__toggleCheck("a_");
$("#a_All1").__toggleCheck("a_");
$("#tb").__setRepeaterStyle("tr", "rowStyle", "hoverStyle");

递易科技网还为您提供以下相关内容希望对您有帮助:

怎样安装Dreamweaver的jquery扩展

1、下载好jquery扩展的MXP文件:jQuery_API.mxp。打开已安装好的dreamweaver编辑器,找到安装扩展的菜单,这里有三种途径可选:① 在dreamweaver的菜单栏找到“命令”→“扩展管理”② 在dreamweaver的菜单栏找到“帮助”→“扩展管理”③ 在windows的开始菜单找到dreamweaver

2. jQuery.extend() 方法解读

jQuery.extend方法解读如下:一、目的与功能 目的:jQuery.extend方法的主要目的是为了允许用户自定义扩展插件,提升jQuery框架的内部性能,同时也是其社区影响力和插件丰富性的重要原因之一。 功能:该方法不仅可以让用户为jQuery本身扩展功能,还可以为其实例对象扩展插件。二、主要特性 参数的灵活性:jQuery.e...

jquery插件实现的方法有哪些

jquery插件的扩展方法有两种 全局静态方法 (function($) { $.pluginName = function(options) { ... };})(jQuery);$.pluginName(options);对象级 (function($) { $.fn.pluginName = function( options ) { this == element ... };})(jQuery);$(element).pluginName...

怎样安装Dreamweaver的jquery扩展

1、打开软件建立任意项目。2、然后点击页面上方的命令-扩展管理。3、最后点文件,弹出安装扩展即可。

怎样安装Dreamweaver的jquery扩展

工具:dreamweaver jQuery_API.mxp 操作系统:1、打开dreamweaver,选择命令菜单下的扩展管理 2、选择安装新扩展,选择jquery进行安装 3、如果安装成功,就会看到下回执单所显示

有关jquery插件:$.fn.名称和$.fn.extend(扩展函数)的区

在jQuery中,$.fn和$.extend用于扩展jQuery的静态方法或属性。使用$.xtend,传入一个参数将该对象扩展到jQuery的静态方法或属性;传入两个对象则复制第二个对象上的方法和属性到第一个对象。同时,设置第一个参数为true或false可选择是否进行深度拷贝,默认为false。.fn.extend与$.extend相似,前者在只...

jQuery.extend 函数代码详解

一、Jquery的扩展方法原型是:复制代码 代码如下:extend(dest,src1,src2,src3...);它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:复制代码 代码如下:var newSrc...

如何封装jquery插件

一、jquery的插件机制 为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。1. jQuery.extend() 方法有一个重载。jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用jQuery....

如何写一个jquery 插件

jquery插件开发模式 jquery插件一般有三种开发方式:通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第一种$.extend()相对简单,一般很少能够开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。第二种则是一般插件开发用到的...

jQuery.extend和jQuery.fn.extend的区别

一.$.extend():此方法是用来扩展jQuery类,此方法是全局性,直接用jQuery类即可引用,例如:.extend({minValue:function(a,b){return a<b?a:b;}}).minValue(5.6);也可以把这类函数称作为工具函数,不直接操作DOM元素,而是操作Javascript的非元素对象,或者执行其他非对象的特定操作。更多相关$....

显示全文

猜你还关注