jQuery插件解析

简单的插件demo

 //sample:扩展jquery对象的方法,bold()用于加粗字体。
        (function ($) {
            $.fn.extend({
                "bold": function () {
                    ///<summary>
                    /// 加粗字体
                    ///</summary>
                    return this.css({ fontWeight: "bold" });
                }
            });
        })(jQuery);调用$(function(){  $.("p").bold();});

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

jQuery.extend()

一、类级别($.extend)

 

    类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。

    开发扩展其方法时使用$.extend方法,即jQuery.extend(object);

jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子:

//扩展jQuery对象本身
        jQuery.extend({
            "minValue": function (a, b) {
                ///<summary>
                /// 比较两个值,返回最小值
                ///</summary>
                return a < b ? a : b;
            },
            "maxValue": function (a, b) {
                ///<summary>
                /// 比较两个值,返回最大值
                ///</summary>
                return a > b ? a : b;
            }
        });
        //调用
        var i = 100; j = 101;
        var min_v = $.minValue(i, j); // min_v 等于 100
        var max_v = $.maxValue(i, j); // max_v 等于 101

二、 对象级别

对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了。

开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="jquery-1.7.2.js"></script>
<script>

$(function(){
//定义一闭包个区域 防止插件污染
(function($){
//使用jq插件机制的扩展方法$.fn.extend()编写插件
$.fn.extend({
"bold":function(){
return this.css(‘fontWeight‘,‘bold‘);
},
"bkred":function(){
return this.css(‘background‘,‘red‘);
},
"size_a":function(options){
var options=$.extend(defanlts,options||{});//默认参数和传参进行合并
this.css({
‘width‘:options.width,
‘height‘:options.height
});
return this;//为了可以链式调用,需要把对象返回,否则报错
}
});
//设置默认值-默认参数
var defanlts = {
‘width‘:‘100px‘,
‘height‘:‘100px‘
};
})($);

$(".p").bold().css(‘fontSize‘,‘50px‘).css(‘margin‘,0);
$(".p").bkred().on(‘click‘,function(){
alert(‘我是p元素‘)
});
$("#box").size_a({‘width‘:300,‘height‘:200}).on(‘click‘,function(){
$(this).css(‘background‘,‘red‘);
});
});
</script>
</head>

<body>
<div class="box" id="box">123</div>
<p class="p">我</p>
<p>我</p>
</body>
</html>

如有不解请参考http://jingyan.baidu.com/album/e75aca85550216142edac63b.html?picindex=1

http://www.cnblogs.com/joey0210/p/3408349.html#

 
时间: 2024-10-17 01:31:53

jQuery插件解析的相关文章

jQuery插件之ajaxFileUpload详细解析

功能:ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: url                         上传处理程序地址. fileElementId 需要上传的文件域的ID,即<input type="file">的ID. secureuri   是否启用安全提交,默认为false. dataType   服务器返回的数据类型.可以为xml,script,jso

一步一步写jQuery插件

转载自:http://www.cnblogs.com/joey0210/p/3408349.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下

jquery学习(四)-如何书写自定义的jquery插件

来自锋利的jquery第二版 下面我们开始介绍如何通过现有的方法和函数,封装出既符合自己需求,有高效的插件. Jquery插件公分为3类,分别为:封装对象方法的插件.封装全局函数的插件.自定义选择器插件,在介绍插件的三种类型之前,我们先来了解书写插件的基本要点(这里转自aspwzmuma和锋利的jquery): a.插件的文件命名推荐遵循jQuery.[插件名].js的规则,以便于与其他的js文件的区分,如新插件文件jquery.newplugin.js. b.对象级别插件,所有的方法都应依附于

jquery插件的写法

一.JQuery的插件主要分为3种: 1.封装对象方法的插件. 如JQuery的parent()方法,appendTo()方法,addClass()方法等. 2.封装全局函数的插件. 如JQuery.ajax(),JQuery.trim()方法 3.选择器插件. 二.JQuery的插件机制: i.JQuery提供了两个用于扩展JQuery功能的方法,jQuery.fn.extend()方法和jQuery.extend()方法.前者用于扩展前面的提到的第一种插件,后者用于扩展后两种插件.这两个方法

写JQuery 插件 什么?你还不会写JQuery 插件

http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简

【jQuery】学习jQuery插件的使用与写法(表单验证插件-validation)

最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示:实时验证. 三种不同的写法 1.1 确认哪个表单需要被验证,引入jquery.validate.js插件 <script type="text/javascript"> $(document).ready(function(){ $("#commentForm&qu

jQuery 插件autocomplete

jQuery 插件autocomplete 应用 项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用

如何编写JQuery 插件详解

转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式

JQuery插件编写之定制版选择器

很多人是因为jQuery的强大选择器而爱上它的(没错,我就是特别讨厌原生JS的FindElementById),但是何尝不想把一些经常用的链式操作组合写成一个选择器呢?! 从机制上来讲,jQuery的选择符解析器首先会使用一组正则表达式来解析选择器,然后对解析出来的每个选择符执行选择器函数,最后根据true或false来决定是否保留元素. 比如说: $('div:gt(1)') 在jQuery的源文件中是由jQuery.expr[":"] = jQuery.expr.pseudos 对