Javascript 正在尝试删除jQuery

还有一个site：：对于我的AngularJS应用程序，我真的很想删除jQuery。我仍然需要jQuery，不能只使用AngularJS附带的jQLite，因为jQLite不支持基于类的选择器

querySelectorAll（）的问题是，当我尝试运行此命令时：

el.querySelectorAll（'>.content'）

我明白了：

SyntaxError:未能执行查询：“>span”不是有效的选择器。

---

有没有办法只使用本机DOM方法编写此选择器？

您需要一个父对象才能有一个子对象。也许是这样的

el.querySelectorAll('body > .content')

---

如果您只希望

el

的直接子级具有类

.content

，则可以使用以下方法：

function queryChildren(el, sel) {
    var all = el.querySelectorAll(sel);
    var filtered = [];
    for (var i = 0; i < all.length; i++) {
        if (all[i].parentNode == el) {
            filtered.push(all[i]);
        }
    }  
    return filtered;
}

queryChildren(el, ".content");

函数查询子对象（el、sel）{
var all=el.querySelectorAll（sel）；
var筛选=[]；
对于（变量i=0；i

---

这将运行查询，查找与类名匹配的所有子体，然后将该列表筛选为仅是传入元素的直接子体的子体。

如果您确实被迫使用jQuery查找

。content

第一级子体，请改用XPath，它将执行完全相同的操作：

var xpathQuery = "./*[@class='content'";
xpathQuery += " or starts-with(@class,'content ')";
xpathQuery += " or contains(@class,' content ')";
xpathQuery += " or substring(@class, string-length(@class)-6)=' content']";
var iterator=document.evaluate(xpathQuery , el, null, XPathResult.ANY_TYPE, null );
var contentNode = iterator.iterateNext();

小心使用

/

而不是

/

就像在jQuery选择器中使用

'>'>'

而不是空格

'

我为您创建了一个通用函数：

function findByClassName(el, className, firstLevel) {
    var xpathQuery = firstLevel ? "./" : ".//";
    xpathQuery += "*[@class='" + className + "'";
    xpathQuery += " or starts-with(@class,'" + className + " ')";
    xpathQuery += " or contains(@class,' " + className + " ')";
    xpathQuery += " or substring(@class, string-length(@class)-" + (className.length) + ")=' " + className + "']";

    var iterator = document.evaluate(xpathQuery, el, null, XPathResult.ANY_TYPE, null);
    var nodes = [];
    var node;
    while (node = iterator.iterateNext()) {
        nodes.push(node);
    }
    return nodes;
}

对于您的用例，您应该像这样使用它：

var contentNodes = findByClassName(el, 'content', true);

---

这就是工作原理。

如果您将

querySelectorAll

应用于特定元素，它不应该搜索该元素的子元素，而不是

body

的子元素吗？@Barmar yea，我希望它能找到el DOM元素的直接子元素。然后您应该阅读以下内容：另一方面，您可能需要jQuery。它基本上是一个DOM操作引擎，上面有非常好的AJAX功能，下面是一个非常强大的CSS选择器引擎。该网站中我最喜欢的部分是80%的示例用5-6行JavaScript替换了1行jQuery。删除库是否值得代码膨胀？在我看来，可维护的代码比独立的代码要好得多。您可以始终包括一个健壮的选择器引擎，如

qwery

、

Sizzle

或

Slick

@ryanzec：请查看我的答案，它将帮助您在不使用jQuery的情况下满足您的需求。