【JQuery】JQuery封装的小例子

一、前言

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

二、封装是什么

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

三、封装方法小例子

【JQuery】JQuery封装的小例子_第1张图片

index.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中有很多的东西都要进行自己的开发,面向对象的开发方式。

你可能感兴趣的:(➤,B/S起步篇,------【JQuery】,jquery,函数,html,库,javascript)