Question

我是JavaScript和JQuery的新手，我正在阅读教程。

我只想问一下，JavaScript中的以下内容是什么：

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

我在问这个问题，因为我想知道他们为什么说JQuery让事情变得更容易。提前谢谢！

Answer 1

This可以告诉您如何在没有jquery的情况下执行$(document).ready()。

This可以告诉您如何操作$('p')和this可以告诉您如何附加click事件。

This是$(this).hide()或$(this).show()的对等。

我只想说，jquery会做很多工作来确保你的代码符合浏览器标准。这节省了大量工作，试图使其与每个浏览器兼容。

Answer 2

好吧，基本上，你可以用这个js代码做同样的事情（注意，所有浏览器都不支持DOMContentLoaded事件）：

document.addEventListener("DOMContentLoaded", function(event){
    var ps = document.getElementsByTagName("p");
    for(var key in ps){
        ps[key].onclick = function(){
            this.style.display = "none";
        }
    }
});

但是jQuery做的远远不止于此（因此DOMContentLoaded事件与$（document）.ready不完全相同）。例如，它会检查兼容性问题。只有$（document）.ready（）后面的代码如下所示:( source here）

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}

Answer 3

这是您与＆＃34; p＆＃34;的基本互动。 document.getElementsByTagName('p')[0].addEventListener("click",function() { this.style.display = "none"; });

关于＆＃34;文件就绪功能＆＃34;它比看起来要复杂得多

Answer 4

当完全读取DOM时，您要求jQuery在$(document).ready(function(){.....}内执行代码。

在javascript中，您可以通过以下事件获得相同的结果：

 document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

如果您将脚本放在</body>标记之前，那么您实际上并不需要这样做，这样您就可以完全一样！

以前的javaScript代码和$(document).ready(function(){.....}与稍后发生的window.load事件不同，此时所有内容（完整的css，图像）也已加载。

JavaScript等价吗？

4 个答案: