Análise do princípio do JQuery - versão simples manuscrita do JQuery

Conheça o primeiro e depois o segundo;

Índice

Antes disso, revise o conhecimento do objeto JavaScript:

Por que você precisa de JQuery

No código JS que escrevemos anteriormente, muitas vezes encontramos document.getElementById, etc. para obter objetos de elemento. Quando um grande número de objetos de elemento precisa ser obtido, muitos códigos semelhantes serão escritos repetidamente. a quantidade de escrita de código, Para melhorar a eficiência do desenvolvimento de JavaScript, um grande homem escreveu um jQuery;

O conceito de jQuery:

jQuery é uma biblioteca JavaScript popular que simplifica a programação JavaScript e fornece muitas funções e recursos úteis. Ele torna mais fácil lidar com a travessia de documentos HTML e manipulação de eventos, efeitos de animação, AJAX, etc. no desenvolvimento da Web, usando sintaxe concisa e encapsulando operações complexas.

jQuery fornece aos desenvolvedores da web uma API cross-browser que lhes permite escrever facilmente um código JavaScript eficiente. Você pode introduzir arquivos jQuery em HTML e, em seguida, usar a API jQuery para selecionar e manipular elementos de página, manipular eventos, enviar solicitações Ajax, criar efeitos de animação e muito mais. O jQuery simplifica tarefas comuns, como manipulação de DOM, manipulação de eventos, AJAX e animação, tornando o desenvolvimento da Web mais rápido e conveniente.

Devido às suas vantagens de fácil aprendizado e uso, forte escalabilidade e boa compatibilidade, o jQuery se tornou uma das bibliotecas JavaScript mais populares e é amplamente utilizado em vários tipos de sites e aplicativos da web.

Vantagens do jQuery:

Escrever manipulação complexa de DOM e código de manipulação de eventos usando JavaScript nativo pode ser tedioso e demorado. E o jQuery permite que os desenvolvedores concluam essas operações com mais rapidez e eficiência, fornecendo uma API fácil de usar.

A URL JQuery escrita por uma grande pessoa: Se você quiser usá-la, basta adicionar o seguinte código ao código:

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

O código escrito antes de usar o Ajax para obter efeitos dinâmicos de atualização de página:

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)
        }
    }

Pode-se ver que o código é muito complicado, e as mesmas coisas aparecem muito;

Use jQuery para obter as funções acima:

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

A partir disso podemos ver o poder do JQuery; para aprender o princípio do JQuery, escrevi uma versão simples do JQuery à mão para aprofundar meu entendimento:

Antes disso, revise o conhecimento do objeto JavaScript:

JQuery simples escrito por mim:

    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()