的方法实现代码,jQuery插件的写法分享
分类:关于美高梅

热腾腾的代码:

Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。

一、先从一个简单的实例,不需要带参数的一个方法开始

1、概述

复制代码 代码如下:

Jquery的扩展方法原型是:   

复制代码 代码如下:

先看看html代码

<script type="text/javascript">
$.extend({
testgogo: function (options) {
var defaults = {
name:"Charles",
year:"22",
say:"Sandy is so beautiful!"
};
var opts = $.extend(defaults, options);
alert(defaults.name+"说:"+defaults.say);
}
});
$.testgogo({ });
</script>

extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

//创建一个匿名函数
(function($){
//给jQuery附加一个新的方法(详细见备注1)
$.fn.extend({
//插件的名字
MyFirstName: function() {
//迭代当前匹配元素集合
return this.each(function() {
var obj = $(this);
//自己的代码
});
}
});
美高梅网址,)(jQuery);

复制代码 代码如下:

您可能感兴趣的文章:

  • Jquery中$.ajax()方法参数详解
  • JQuery中$.ajax()方法参数详解
  • jQuery中$.ajax()和$.getJson()同步处理详解
  • jQuery中的$.ajax()方法应用
  • JQuery中$.ajax()方法参数详解及应用
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
  • JQuery的ajax的用法在asp中使用$.ajax()实现
  • jquery $.ajax()取xml数据的小问题解决方法
  • jquery中获得$.ajax()事件返回的值并添加事件的方法
  • jQuery中$.ajax()方法参数解析

也许你对该函数已经有一定的了解。我们再看一个jquery官方的例子()
代码如下:

备注1:理解$.fn.extend和$.extend的区别,大概的说前者是将MyFirstName这个方法合并到jquery的实例对象中,例如$(“#txtmy”).add(3,4)这样调用方法,后者是将MyFirstName这个方法合并到jquery的全局对象中,例如$.add(3,4); 这样调用方法
详细区别见(//www.jb51.net/article/29590.htm)

<ul id="catagory">
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Asp.net</a></li>
    <li><a href="#">Sql Server</a></li>
    <li><a href="#">CSS</a></li>
</ul>

复制代码 代码如下:

二、有参数的

比如我们要实现当光标移动到a标签上时,a标签向右移动一段距离,离开时a位置恢复。实现方法如下:

<!DOCTYPE html>
<html>
<head>
<scriptsrc=";
</head>
<body>
<divid="log"></div>
<script>
var defaults ={validate:false,limit:5,name:"foo"};
var options ={validate:true,name:"bar"};
/* merge defaults and options, without modifying defaults */
var settings =$.extend({},defaults,options); // 在插件开发中经常会用到
varprintObj =typeofJSON !="undefined"?JSON.stringify :function(obj){
vararr =[];
$.each(obj,function(key,val){
varnext =key +": ";
next +=$.isPlainObject(val)?printObj(val):val;
arr.push(next );
});
return"{ "+ arr.join(", ")+" }";
};

复制代码 代码如下:

复制代码 代码如下:

$("#log").append("<div><b>defaults -- </b>"+printObj(defaults)+"</div>");
$("#log").append("<div><b>options -- </b>"+printObj(options)+"</div>");
$("#log").append("<div><b>settings -- </b>"+printObj(settings)+"</div>");
</script>
</body>
</html>

//创建一个匿名函数
(function($){
//给jQuery附加一个新的方法(详细见备注1)
$.fn.extend({
//插件的名字
MyFirstName: function() {
//定义默认参数
Var parms={
Parms1:1,
Parms2:2
}
//合并用户传的参数和默认参数,返回给options(详细见备注2)
var options = $.extend(defaults, options);
//迭代当前匹配元素集合
return this.each(function() {
//把合并后的参数赋值给o
var o= options;
//迭代当前匹配元素
var obj = $(this);
//自己的代码
});
}
});
)(jQuery);

$(document).ready(function() {
    $("#catagory a").hover(function() {
        $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
    }, function() {
        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
    });
});

输出结果为:
defaults -- {"validate":false,"limit":5,"name":"foo"} //这里是原样输出defaults
options -- {"validate":true,"name":"bar"} //这里是原样输出options
settings -- {"validate":true,"limit":5,"name":"bar"} //合并defaults和options , 后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

备注2:var options = $.extend(defaults, options); 意思是把defaults和options合并,如果后者有和前者名称一样的元素,后者覆盖前者,然后合并给defaults,然后defaults赋值给options,如果是var options = $.extend({},defaults, options);那么是把前者和后者合并给{}这个参数,然后赋值给options,defaluts的结构和值都没有变化
详细区别见(//www.jb51.net/article/29591.htm)

现在我们将这个方法进行扩展,写成jQuery插件的形式,以后也能在别的项目中使用,并且可以方便的更改一些属性值,现在我们来看看jQuery插件的写法。

您可能感兴趣的文章:

  • jQuery $.extend()用法总结
  • jQuery插件开发的两种方法及$.fn.extend的详解
  • jQuery.extend 函数详解
  • jQuery.extend()的实现方式详解及实例
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • 模仿JQuery.extend函数扩展自己对象的js代码
  • jquery的extend和fn.extend的使用说明
  • jQuery中extend()和fn.extend()方法详解
  • Jquery中扩展方法extend使用技巧
  • jQuery中extend函数的实现原理详解
  • 详解jQuery插件开发中的extend方法
  • jQuery源码解读之extend()与工具方法、实例方法详解

您可能感兴趣的文章:

  • JQuery插件jcarousellite的参数中文说明
  • Jquery图形报表插件 jqplot简介及参数详解
  • idTabs基于JQuery的根据URL参数选择Tab插件
  • JQuery扩展插件Validate 3通过参数设置错误信息
  • jQuery获取地址栏参数插件(模仿C#)
  • jQuery 获取URL参数的插件
  • jQuery插件制作之全局函数用法实例
  • jquery插件制作 提示框插件实现代码
  • jquery tab插件制作实现代码
  • jQuery插件制作之参数用法实例分析

2、jQuery插件的结构

下边这个结构应该是编写jQuery插件的一个比较好的结构,我将原作者的一些注释进行了相应的翻译。

复制代码 代码如下:

//为避免冲突,将我们的方法用一个匿名方法包裹起来
(function($) {
    //扩展这个方法到jquery
    $.fn.extend({
        //插件名字
        pluginname: function() {
            //遍历匹配元素的集合
            return this.each(function() {
                //在这里编写相应代码进行处理
            });
        }
    });
 //传递jQuery到方法中,这样我们可以使用任何javascript中的变量来代替"$"     
})(jQuery);

接下来,我们给插件中加入一些可以改变的属性,这样用户可以根据自己的需要来做一些更改。同时,我们应提供相应的默认值。

复制代码 代码如下:

(function($){ 
    $.fn.extend({  
 //将可选择的变量传递给方法
        pluginname: function(options) { 
            //设置默认值并用逗号隔开
            var defaults = { 
                padding: 20, 
                mouseOverColor : '#000000', 
                mouseOutColor : '#ffffff' 
            } 
            var options =  $.extend(defaults, options); 
            return this.each(function() { 
                var o = options; 
                //这里编写相应代码
                //可以像下边这样获取变量值
                alert(o.padding); 
            }); 
        } 
    }); 
})(jQuery); 

3、实现jQuery插件

复制代码 代码如下:

(function ($) {
    $.fn.extend({
        //插件名称 - paddingList
        paddingList: function (options) {
            //参数和默认值
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };
            var options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                //将元素集合赋给变量 本例中是 ul对象
                var obj = $(this);
                //得到ul中的a对象
                var items = $("li a", obj);
                //添加hover()事件到a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false表示不添加到动画队列中
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });
            });
        }
    });
})(jQuery);

最后,使用插件的方法如下:

复制代码 代码如下:

//使用插件
$(document).ready(function() {
    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});

作者:朋友的你 来源:jQuery学习

您可能感兴趣的文章:

  • 分享一个自己动手写的jQuery分页插件
  • 基于编写jQuery的无缝滚动插件
  • jquery+css3打造一款ajax分页插件(自写)
  • 自己使用jquery写的一个无缝滚动的插件
  • Jquery插件编写简明教程
  • 写JQuery插件的基本知识
  • jquery分页插件AmSetPager(自写)
  • Jquery插件写法笔记整理
  • 编写自己的jQuery插件简单实现代码
  • 自写的一个jQuery圆角插件
  • jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
  • 跟我一起学写jQuery插件开发方法(附完整实例及下载)
  • 一步一步教你写一个jQuery的插件教程(Plugin)
  • 10分钟学会写Jquery插件实例教程

本文由美高梅网址发布于关于美高梅,转载请注明出处:的方法实现代码,jQuery插件的写法分享

上一篇:ajax入门实例详解,方法参数详解 下一篇:相册集效果,animate实现鼠标放上去显示离开隐藏
猜你喜欢
热门排行
精彩图文