首页 前端知识 JQuery原理剖析——自己手写简易版JQuery

JQuery原理剖析——自己手写简易版JQuery

2024-03-21 15:03:22 前端知识 前端哥 306 889 我要收藏

知其一后知其二;

目录

为什么需要JQuery

jQuery的概念:

在此之前回顾JavaScript对象知识:

自己手写的简易JQuery:


为什么需要JQuery

在我们之前写的JS代码中经常会遇见document.getElementById等等获取元素的对象,当大量的元素对象需要被获取时,就会有很多相似的代码被重复书写为此,为了减少代码的书写量、提高JavaScript开发效率,牛人写了一个jQuery;

jQuery的概念:

        jQuery是一种流行的JavaScript库,它简化了JavaScript编程,并提供了许多有用的功能和特性。它通过使用简洁的语法和封装复杂的操作,使得在网页开发中处理HTML文档遍历和事件处理、动画效果、AJAX等变得更加容易。

        jQuery为Web开发者提供了一个跨浏览器的API,可以让他们轻松地编写高效的JavaScript代码。可以在HTML中引入jQuery文件,然后使用jQuery API选择和操作页面元素、处理事件、发送Ajax请求、创建动画效果等。jQuery简化了DOM操作、事件处理、AJAX和动画等常见任务,让Web开发变得更加快捷和便捷。

        由于其易学易用、可扩展性强、兼容性好等优点,jQuery已经成为了最受欢迎的JavaScript库之一,并被广泛应用于各种类型的网站和Web应用程序中。


jQuery优点:

使用原生JavaScript编写复杂的DOM操作和事件处理代码会非常繁琐和耗时。而jQuery通过提供简单易用的API,使得开发者可以更快速、高效地完成这些操作。

牛人写的JQuery网址:如想使用只需在代码中加入一下代码:

<script type="text/javascript" src=".././jQuery/jquery-3.6.0.min.js"></script>

之前写的使用Ajax实现页面动态刷新效果的代码:

window.onload=function () {
        document.getElementById("btn1").onclick=function () {
            //1.创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("div1").innerText=this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            let value = document.getElementById("ipt1").value;
            xhr.open("get","/ajax/ajaxrequest1?value="+value,true)
            xhr.send()
        }
        document.getElementById("btn2").onclick=function () {
            //1.创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("div2").innerText=this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            xhr.open("post","/ajax/ajaxrequest1",true)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            let value1 = document.getElementById("ipt1").value;
            xhr.send("username="+value1)
        }
    }

可以看出,代码很复杂,相同的东西出现很多;

使用jQuery实现以上功能:

$(function () {
        $("#btn").click(function () {
            $.ajax({
                methodType: "post",
                url: "/ajax/ajaxrequest3",
                date: "username=zhangsan",
                asuyc: true,
                success: function (jsonst) {
                    $("#div").html(jsonst.username)
                }
            })
        })
    })

由此可以看出JQuery的强大;为此学习JQuery的原理,自己手写了个简易版的JQuery,加深理解:

在此之前回顾JavaScript对象知识:

自己手写的简易JQuery:

    function JQuery(selector) {
        if (typeof selector == "string") {
            if (selector.charAt(0) == "#") {
                // var doc = document.getElementById(selector.substring(1))
//去掉var 使得doc升级为全局变量
                doc = document.getElementById(selector.substring(1))
//在没将doc升级为全局变量之前是无法调用封装进来的函数的,因为函数只能被对象调用,所以出现以下代码
                return new JQuery()
            }
        }
        if (typeof selector == "function") {
            window.onload = selector
        }
        this.html = function (htmlstr) {
            //定义全局变量doc
            doc.innerHTML = htmlstr
        }
        this.click = function (fun) {
            doc.onclick = fun
        }
        this.getvalue = function () {
            return doc.value
        }
//将Ajax封装成静态函数;
        JQuery.ajax = function (jsonstr) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        var jsonobj = JSON.parse(this.responseText);
                        jsonstr.success(jsonobj)
                    } else {
                        alert(this.status)
                    }
                }
            }
            // var jsonstr = JSON.parse(jsonstr);错误代码,
            if (jsonstr.methodType.toUpperCase() == "POST") {
                xhr.open("post", jsonstr.url, jsonstr.async)
                xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
                xhr.send(jsonstr.date)
            }
            if (jsonstr.methodType.toUpperCase() == "GET") {
                xhr.open("get", jsonstr.url + "?" + jsonstr.date, jsonstr.async)
                xhr.send()
            }

        }
    }
    $ = JQuery
//如果没有以下代码,在调用Ajax时会报错,因为在此之前并没有在执行开始的return new JQuery(),
//所以并没有创建对象,所以无法调用
    new JQuery()
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4053.html
标签
ajax
评论
会员中心 联系我 留言建议 回顶部
复制成功!