一、jQuery简介

1、什么是jQuery?

jQuery全称javaScript Query，是js的一个框架，本质上仍是js

2、jQuery的特点

支持各种主流的浏览器
使用特别简单
拥有便捷的插件扩展机制和丰富的插件

3、jQuery官网

jQuery官网链接：jQuery官网

二、jQuery的封装原理

1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖

2、使用对象封装，将代码封装到对象中，但是对象如果被覆盖，则全部失效，风险极高

//声明对象
var bjsxt={};
bjsxt,test=function(){
    alert("我是test:外部引用声明");
}

3、使用工厂模式，将代码进行封装，但是并没有解决问题

//使用工厂模式
function getBjsxt(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂1");
    }
    return bjsxt;
}

4、将封装的函数名字去除，避免覆盖，但是函数没有办法调用了

function(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂1");
    }
    return bjsxt;
}

5、匿名自调用，可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取

//匿名自调用
(function(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂2");
    }
    alert("匿名自调用");
    return bjsxt;
})()

6、闭包原理：在全局中不能够获取函数体内的数据,使用更大作用域的变量来记录小作用域变量的值

//闭包原理
样例1：
(function(obj){
    obj.test=function(){
        alert("工厂3");
    }
    alert("闭包原理");
})(window)


样例2：
function testA(){
    function test2(){
         test2.name = "张三";
         var n = 999;
         alert(bjsxt);
         return n;
    }
    return test2;
}

7、完整代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>jQuery之封装原理</title>
    <script src="js/my.js" type="text/javascript" charset="utf-8"></script>
    <script>
        function test(){
            alert("test1");
        }
        var bjsxt = 123;

        //闭包原理：在全局中不能够获取函数体内的数据,使用更大作用域的变量来记录小作用域变量的值
        function testA(){
            function test2(){
                test2.name = "张三";
                var n = 999;
                alert(bjsxt);
                return n;
            }
            return test2;
        }

    </script>
</head>
<body>
    <h3>jquery的封装原理</h3>
    <hr/>
    <input type="button" name="" id="" value="测试test" onclick="bjsxt.test()"/>
</body>
</html>

对应的js文件

//声明对象
var bjsxt={};
bjsxt,test=function(){
    alert("我是test:外部引用声明");
}

//使用工厂模式
function getBjsxt(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂1");
    }
    return bjsxt;
}

//匿名自调用
(function(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂2");
    }
    alert("匿名自调用");
    return bjsxt;
})()

//闭包原理
(function(obj){
    obj.test=function(){
        alert("工厂3");
    }
    alert("闭包原理");
})(window)
# jquery # javascript # 前端
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

协同进化：AIGC、Agent和MCP如何相互促进共同发展

avatar MCP技术社区
cover

【CodeBuddy + 自制MCP】给AI装上翅膀，快速绘制思维导图

avatar MCP技术社区

如何将普通HTTP API接口改造为MCP服务器

创建.proto通过本文的四步改造法，你可获得：✅ 配置更新延迟降低90%✅ 网络带宽消耗减少70%✅ 服务端资源占用下降60%✅ 原生支持百万级节点连接升级到MCP不仅是协议转换，更是配置分发模式的架构进化。立即行动，让你的微服务配置管理进入实时推送时代！更多Istio进阶技巧请关注专栏【Service Mesh深度实践】

avatar MCP技术社区