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