jquery 插件学习（一）

言归正传拉，开始跟我学习吧：）；

1.jquery自定义了 jQuery.extend()和jQuery.fn.extend()方法，其中，jQuery.extend()方法能够创建全局函数或者选择器，而jQuery.fn.extend()能够创建jQuery对象方法。在这里啰嗦讲下：这2个方法，都包含一个参数，改参数仅接受名/值对结构的对象，其中名表示函数或方法名，而值表示函数体。

代码如下:

jQuery.extend({
minValue : function(a,b){
return a>b? b:a;
},
maxValue : function(a,b){
return a<b? b:a;
},
})

代码如下:

<script>
$(function(){
$('input').click(function(){
var a = prompt("请输入一个值");
var b = prompt("请输入一个值");
var c = jQuery.minValue(a,b);
var d = jQuery.maxValue(a,b);
alert("你输入的最小值:"+c+"\n你输入的最大值:"+d);
});
});
<script>

<input type="button" value ="jQuery插件测试" />

在实际开发中，jQuery.extend()方法，为插件方法传递系列选项结构的参数。


代码如下:

function fn(options){
var options = jQuery.extend({name1: value1,name2 :value2,name3 : value3},options);
//函数体
}

调用：
fn（{name1:value2,name2:jine,name3:hx}）;//覆盖新值
fn（{name4:value2,name5:jine,}）;//添加新选项
fn();//保持默认值

未完待续。

赞 (0)

相关推荐

  • jquery 插件学习（二）

    创建全局函数只需通过为jquery对象添加属性即可,而创建jquery对象的方法也可以通过为jquery.fn添加属性来实现,实际上jquery.fn对象就是jquery.prototype原型对象的别名,使用别名更方便引用. demo: 复制代码 代码如下: jQuery.fn.test = function(){ alert('这是 jquery 对象方法 '); } 然后,就可以在任何jquery对象中调用该方法了. 复制代码 代码如下: $(function(){ $('h1').cli

  • jquery 插件学习（三）

    例如: 复制代码 代码如下: $(this).test().hide().height(); 要实现类似的连写行为,就应该在每个插件方法中,返回一个jquery对象,除非方法需要明确返回值.返回的jquery对象通常就是this所引用的对象.如果使用each()方法迭代this,则可以直接返回迭代的结果.针对上一节的示例,进一步修改 复制代码 代码如下: jQuery.fn.test = function(){ return this.each(function(){ //遍历匹配的元素,此处的

  • jquery 插件学习（四）

    针对上面的示例,我们可以调用jquery.fn.extend()方法来创建jquery对象方法.具体代码如下> 复制代码 代码如下: jQuery.fn.extend({ test : function(){ return this.each(function(){ alert(this.nodeName); }) } }); 调用跟上面一样哦 复制代码 代码如下: $('body *').click(function(){ $(this).test().html(this.nodeName).

  • jquery 插件学习（五）

    这节封装插件了,进展怎么样呢? 一般对外发布的插件都应该进行封装,封装的插件还应该符合规范,只有这样写的插件才具有推广价值,并得到其他用户的喜爱. 首先第一步,是定义一个独立域,代码如下所示. 复制代码 代码如下: (function($){ //自定义插件代码 })(jQuery) //封装插件 确定创建插件类型,选择创建方式,例如,创建一个设置元素字体颜色的插件,则应该创建jquery对象方法,考虑到jquery提供了插件扩展方法extend(),调用该方法会更为规范. 复制代码 代码如下:

  • jquery 插件学习（六）

    复制代码 代码如下: ;(function($){ $.extend($.fn,{ color : function(options){ var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.bcolor); $(this).css("background",options.fcolor); })

  • jQuery插件学习教程之SlidesJs轮播+Validation验证

    SlidesJs(轮播支持触屏)--官网(http://slidesjs.com) 1.简介 SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件.支持键盘,触摸,css3转换. 2.代码 <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http:/

  • jquery 插件学习（一）

    言归正传拉,开始跟我学习吧:): 1.jquery自定义了 jQuery.extend()和jQuery.fn.extend()方法,其中,jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()能够创建jQuery对象方法.在这里啰嗦讲下:这2个方法,都包含一个参数,改参数仅接受名/值对结构的对象,其中名表示函数或方法名,而值表示函数体. 复制代码 代码如下: jQuery.extend({ minValue : function(a,b){ ret

  • Jquery 插件学习实例1 插件制作说明与tableUI优化

    Jquery 插件学习实例1 插件制作说明与tableUI优化

    一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. 1.1.jQuery.fn.extend(object): 可以参靠jquery参考手册的连个例子: 复制代码 代码如下: $.fn.extend({ check: function() { return this.each(function()

  • 轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    一.EasyUI创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中.为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点. 本文将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览. 创建树形网格(TreeGrid) <table id="test" title

  • 详解jquery插件jquery.viewport.js学习使用方法

    详解jquery插件jquery.viewport.js学习使用方法

    介绍 Viewport 是一个简单的jQuery插件,为元素添加自定义伪选择器和处理程序,以便在可视窗口内外进行简单的元素检测. 使用方法 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.viewport.js" type="text/javascript"></script&g

随机推荐