小议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便是一个封装得非常好的类，比如我们用 语句　$("#btn1") 会生成一个 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

 

posted @   程序员的文娱情怀  阅读(195)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！
点击右上角即可分享
微信分享提示