小议jQuery插件开发

1.写在前面：

　　大家都知道PHP专注后台与数据库的交互，前端页面中是js的天下，而jQuery作为使用最广泛，最简单有效的js的框架。深受大家的喜欢。

　　而js作为一门面向对象的开发语言，它独特的语法和函数式的写法，也是妙趣横生。使用jQuery进行插件的开发，就能将一些js的函数封装在一个对象中，并对其扩展，提高了开发的效率，体现了面向对象的优越性。

2.下面是正题：

　　主要有两种形式的jQuery的插件形式：

　　1）对象的形式扩展插件 $.fn.extend

　　2）函数的形式扩展插件 $.extend

　　这里我们直接给出两个例子：

　　1）对象形式的插件实现的功能是鼠标点击Input输入框时，弹出其Value值

　　2）函数形式的插件实现的功能是鼠标移出Input输入框时，弹出其title值

　　大家可以仔细揣摩，两者的不同，在此基础上，写出功能更强大，更健壮的jQuery的插件

　　代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="input" name="name" value="我喜欢jQuery" title="我喜欢js">
<script src="http://www.eol.cn/js/global/jQuery_latest.min.js">
</script>
<script>

/*************编写插件***********/

*1. 对象的形式扩展插件 $.fn.extend 调用 $("#idname").functionName();

*/
(function($){
    $.fn.extend({
       showVal : function(){
        var $this = $(this);
        $this.click(function () {//点击时显示里面的数值
            alert($this.val());

        })

   }

})(jQuery);

*2. 函数的形式扩展插件 $.extend 调用 $.functionName();

$.extend({
       showTitle : function(){

        $('#input').mouseout(function () {//鼠标移出时弹窗
            var $this = $(this);
            alert($this.attr('title'));

        })

}

})

})(jQuery)

$(function(){

$("#input").showVal();//1. 对象的形式扩展插件 $.fn.extend 调用 $("#idname").functionName();
$.showTitle();//2. 函数的形式扩展插件 $.extend 调用 $.functionName();

})
</script>
</body>
</html>

总结：

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend(object); 给jQuery对象添加方法。
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

1) jQuery.fn.extend(object);

fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {//....　

//......

};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如我们用语句　$("#input") 会生成一个 jQuery类的实例。

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

上面的列子中 $("#input")　为一个jQuery实例，当它调用成员方法 showVal()后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

2) jQuery.extend(object);　

为jQuery类添加添加类方法，可以理解为添加静态方法。如：

$.extend({

add:function(a,b){return a+b;}

});

便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，$.add(3,4); //return 7

by djp

转载于:https://www.cnblogs.com/newbalanceteam/p/4984928.html

小议jQuery插件开发相关推荐

jQuery插件开发 - 其实很简单
[前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...
jquery 插件开发的作用域及基础
2019独角兽企业重金招聘Python工程师标准>>> 之前一直有开发jquery插件的冲动,所以一直想学习如何进行插件开发,最近一个项目需要使用图片上传组件及自动无限下拉组件,百度 ...
jQuery插件开发学习笔记
今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载.笔者今天详细 ...
jQuery插件开发（一）：jQuery类方法
一.jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1.基于jQuery对象的插件 2.基于jQuery类的插件二.基于jQuery类的插件 1.什么是jQuery类的插件? j ...
jQuery插件开发的两种方法及$.fn.extend的详解
2019独角兽企业重金招聘Python工程师标准>>> 作者: 字体:[增加减小] 类型:转载时间:2014-01-16 我要评论 jQuery插件开发分为两种:1 类级别.2 ...
【转载】jQuery插件开发精品教程，让你的jQuery提升一个台阶
jQuery插件开发精品教程,让你的jQuery提升一个台阶要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
jQuery插件开发中$.extend和$.fn.extend辨析
jQuery插件开发分为两种: 1 类级别类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...
JQuery学习使用笔记 -- JQuery插件开发
内容转载自 http://www.css88.com/archives/4821 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最 ...
掌握jQuery插件开发，这篇文章就够了
2019独角兽企业重金招聘Python工程师标准>>> 在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先 ...

小议jQuery插件开发

小议jQuery插件开发相关推荐

最新文章

热门文章