我总是在Javascript中看到这段奇怪的代码

Question

我不是 Javascript 专家，但我所知道的旧 Javascript 只是一堆简单的函数和变量，如下所示：

function doSomething(){
    var data = "test";
    return data;
}

但最近我看到一些像这样的 Javascript 代码：

$(document).ready(function(){
    $("#about").hide();
    $(".tababout").collapser({
        target: '#about',
        effect: 'slide',
        changeText: false,
    });
});

这到底是什么？它叫什么？它更容易并且所有浏览器都支持吗？我需要更多有关此的信息。

Answer 1

您正在查看的是jQuery。它是一个外部库，但它支持大多数（如果不是全部）浏览器。如果您要使用它，则需要下载它并将其包含在您的项目中，请参阅下载 jQuery。

Answer 2

这只是普通的旧 JavaScript：

var $ = function(sel) {
    return new init(sel);
};

function init(sel) {
    if (sel.nodeName) {
        this[0] = sel;
        this.length = 1;
    } else {
        var elems = document.querySelectorAll(sel);
        for (var i = 0; i < elems.length; i++) {
            this[i] = elems[i];
        }
        this.length = elems.length;
    }
    return this;
};
init.prototype.ready = function(fn) {
    _ready(fn);
    return this;
};
function _ready(fn) {
    if (!document.body) {
        setTimeout(function(){_ready(fn);}, 0);
    } else {
        fn();
    }
}
init.prototype.hide = function() {
    this.each(function() {
        this.style.display = 'none';
    });
    return this;
};
init.prototype.show = function() {
    this.each(function() {
        this.style.display = 'block';
    });
    return this;
};
init.prototype.each = function(fn) {
    for (var i = 0; i < this.length; i++) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};

---

$("#about").hide().each(function(i,el) {

    setTimeout( function(){$(el).show()}, 2000 );

});

演示：http://jsfiddle.net/JGWUs/3/