1

当我浏览网页以了解有关 jQuery 和 JavaScript 的更多信息时，我意识到我不知道它们是如何工作的。以 slideDown() 方法为例：

$("button").click(function(){
  $("p").slideDown();
});

单击按钮时，它会隐藏所有 p 元素。浏览器在读取这段代码时如何知道该做什么以及如何去做？

jQuery 是一个用 JavaScript 编写的库。但是它做的事情在 JavaScript 中也能做吗？或者 jQuery 的创建者是否也与 Web 浏览器的人们进行了交流以实现更多功能？

简而言之，我的问题是在更基本的层面上：浏览器如何做它们所做的事情以及代码如何让它们做到这一点？

/edit文章“浏览器如何工作：现代 Web 浏览器的幕后”一文为这个主题提供了一些很好的哲学观点。

4

5 回答 5

2

slideUp()、slideDown()、animate() 等只是随着时间的推移很快地改变了一些 CSS 属性。那里没有额外的功能。他们只是 setInterval 并且每次稍微改变元素的高度或位置。

于 2013-11-01T22:41:16.293 回答
2

是的，您可以使用 Javascript 完成所有操作。jQuery 家伙与浏览器作者没有特别的交易。

在这种情况下，它很容易实现。首先 jQuery 找到所有<p>元素并将它们放入一个数组中。在现代浏览器上，这是通过querySelector()javascript 方法实现的；对于较旧的，我怀疑 jQuery 只是枚举所有元素，然后选择正确的元素。

在 jQuery 将所有元素都放入一个数组后，它会启动“slideDown”效果。这可以通过使用 Javascript 计时器（setTimeout()和setInterval()）以及操作诸如此类的 CSS 属性来实现height。

总而言之，jQuery 没有创造任何新东西。你可以用 jQuery 做的所有事情，你也可以用普通的旧 Javascript 做。除了这将需要更多的写作。

于 2013-11-01T22:42:09.503 回答
2

jQuery 是一个 JavaScript 库，所有功能都是通过 JavaScript 实现的。

例如，您的.slideDown()方法可以这样完成：

function slideDown (element, duration, finalheight, callback) {
    var s = element.style;
    s.height = '0px';

    var y = 0;
    var framerate = 10;
    var one_second = 1000;
    var interval = one_second*duration/framerate;
    var totalframes = one_second*duration/interval;
    var heightincrement = finalheight/totalframes;
    var tween = function () {
        y += heightincrement;
        s.height = y+'px';
        if (y<finalheight) {
            setTimeout(tween,interval);
        }
    }
    tween();
}

资料来源：没有 jQuery 的 JavaScript 向下滑动

于 2013-11-01T22:43:40.350 回答
1

是的，它确实做了可以在 javascript 中完成的事情。

如果您想从 jquery 中获取代码来调查它是如何做特定事情的。

上滑和下滑是 jquery animate 的帮手。JQuery animate 可以修改任何 css 属性宽度高度不透明度等。 SlideDown/up 只是修改顶部 css 属性。

必须承认我从来没有费心弄清楚它是如何完成的，我很确定它使用 setInterval 功能来定期修改属性。

http://api.jquery.com/animate/

于 2013-11-01T22:46:17.083 回答
1

简而言之：每个浏览器供应商都实现了功能（针对 DOM、javascript、CSS 等）并通过（现在）Javascript/CSS/HTML 中的标准化 API 公开它。

您可以通过查看jQuery 源代码轻松回答您关于 jQuery 是如何做到这一点的问题。

于 2013-11-01T22:43:57.770 回答