如何自己封装一个JQuery

最新推荐文章于 2024-08-30 10:02:47 发布

一枚编程弱鸡

最新推荐文章于 2024-08-30 10:02:47 发布

阅读量310

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_66808283/article/details/131683172

版权

本文介绍了如何将jQuery的核心功能封装成一个简洁的库，详细阐述了实现过程，适合前端开发者学习理解jQuery的工作原理。

摘要由CSDN通过智能技术生成

如何自己封装一个JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        function JQuery(selector){
   
            //如果selector参数是string类型，则进入该方法
            if (typeof selector == "string") {
   
                //如果selector第一个元素是#，表示是获取某个部件（该位置就是：工具id获取元素）
                //实际上就是document.getElementById("id")改写成：$("id")
                if (selector.charAt(0) == "#") {
   
                    //第一种前面var是局部，后面没有var可以全局使用，这里是为了后面的return domObj改成JQuery
                    // var domObj=document.getElementById(selector.substring(1));
                    domObj=document.getElementById(selector.substring(1));
                    // return domObj
                    //返回JQyery对象,这样就可以直接调用JQuery类里的其他方法了
                    return new JQuery()
                }
            }

            //如果selector是一个方法，则执行这个语句（页面加载完毕之后，注册回调函数：window.onload）：
            // 实际上就是：window.οnlοad=function(){}改写为：$(function(){})
            if (typeof selector == "function") {
   
                window.onload=selector
            }

            //定义一个html函数，代替domObj.innerHTML=""
            this.html=function (htmlStr){
   
                domObj.innerHTML=htmlStr
            }

            //定义clicked对象，代替:domObj.οnclick=function(){}
            this.click=function (<