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");

Answer 2

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

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

Answer 3

以下將工作。它可以通過使用原生瀏覽器實現getElementsByClassName()進行優化，在該實現中，將列表過濾爲僅具有「懸停」類的元素。

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