jQuery - 不是純JavaScript

Question

我怎么能寫下面的jQuery - 不...

$(".hover").not(".selected");

...在純JavaScript中？

Answer 1

allItems = document.getElementsByTagName('*');
goodItems = [];
for(i=0;i<allItems.length;i++){
    if(
        allItems[i].className && 
        (' '+allItems[i].className.replace(/\s+/g, ' ')+' ').indexOf(' '+'hover'+' ') != -1 && 
        (' '+allItems[i].className.replace(/\s+/g, ' ')+' ').indexOf(' '+'selected'+' ') == -1
    )
        goodItems.push(allItems[i]);
}

如果你經常需要這些類選擇，你應該考慮將它們保存為函數，或者甚至復制一些jQuery行為，以便能夠執行像$(".hover").not(".selected");這樣的東西$(".hover").not(".selected");

Answer 2

以下將有效。 它可以通過使用getElementsByClassName()的本機瀏覽器實現進行優化，其中存在將列表過濾為僅具有“hover”類的元素。

function hasClass(el, cssClass) {
    return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}

var matchingElements = [];
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length, el; i < len; ++i) {
    el = allElements[i];
    if (hasClass(el, "hover") && !hasClass(el, "selected")) {
        matchingElements.push(el);
    }
}

Answer 3

您還可以使用以下函數按類名獲取元素。

excludeClass是一個可選參數，如果只定義includeClass參數，此函數仍然有效。

function getElementsByClassName(includeClass, excludeClass) {
    var elements = []; var el = document.getElementsByTagName('*');
    var regexp1 = new RegExp("\\b" + includeClass + "\\b");
    var regexp2 = new RegExp("\\b" + (excludeClass ? excludeClass : "") + "\\b");
    for (var i = 0; i < el.length; i++) {
        if (regexp1.test(el[i].className) && !regexp2.test(el[i].className)) { elements.push(el[i]); }
    }
    return elements;
}