【JQuery】JQuery封装的小例子

淩亂°似流年 2022-07-10 05:58 254阅读 0赞

# 一、前言 #

JQuery是一个JS函数库，可以简单标记被添加到网页中。这个js库封装了各种选择器，可以捕获我们使用的html页面的节点。然后对html进行操作。

# 二、封装是什么 #

我们可以通过封装一些我们常用的方法或者模块，来提高我们自己的手法，提高我们自己的提高效果，所以我们就需要可以提高我们的效率，这样我们就是可以把更好的分析一下。

# 三、封装方法小例子 #

![这里写图片描述][SouthEast]

## index.html ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <script src="js/jquery-1.7.1.min.js" ></script>
    
        <script src="js/saygoodbye.js"></script>
        <body>
            <input type="button" value="点击" onclick="jQuery.saygoodbye()" />
        </body>
    </html>

## saygoodbye.js ##

这里小编提供两种方法

方法一 ：这种方法也是可以达到效果的，但是用户喜欢用的$符号去哪里了？可以看看方法二来学习一下。

jQuery.saygoodbye = function(){ 
        alert("Good bye");
        $("body").hide();
    }

方法二：我们定义一个匿名函数，并且闭包，出入一个JQuery参数进去，就完成了jquery的定义。

;(function($){ 
    $.saygoodbye = function(){ 
        alert("Good bye");
        $("body").hide();
    };
    })(jQuery)

## TIP ##

我们一般在写一个公共方法时会在前面定义一个“；”，在网上看到有人说这是书写的习惯，其实这是一个容错机制，有点sql中GO的意思，就是把上面的代码跟自己的这个拓展插件给分开，因为插件是被引入到页面，如果这个插件上面有错误，且别人忘记以“；”结尾，那么我们写的这个函数或者插件就会收到影响，所以要加上一个分号；

## 借鉴博客： ##

[封装两个简单的jquery组件][jquery]

[jQuery 插件封装的方法][jQuery]

[使用jQuery封装实用函数][jQuery 1]

[jquery封装使用的两种方法][jquery 1]

[用jquery写的代码，怎么封装？][jquery 2]

# 四、小结 #

其实这个思想还是很不错的，学习过程中每每要对自己的思考进行分析，梳理。加油！另外我们发现JQuery中有很多的东西都要进行自己的开发，面向对象的开发方式。

[SouthEast]: /images/20220709/3388b133f2934002a32631d9864681bf.png
[jquery]: http://blog.csdn.net/sara_xie/article/details/52151339
[jQuery]: http://www.jb51.net/article/97493.htm
[jQuery 1]: http://www.cnblogs.com/liminjun88/p/3933088.html
[jquery 1]: http://wenku.baidu.com/link?url=2r8vRkbS3TYow856PVE7zlSWOaLKe309T6jYFoF1GU8ekAb4Cm5Ul97QNnWApHPHfoXezfFVVpbFPUMpLjeZXV6kXiJpy3paGsw6Tzc2MLe
[jquery 2]: http://bbs.csdn.net/topics/380237632