javascript - 自定义 Javascript href 选择器

Question

使用 jquery，使用 url 以 x 开头的选择器相当容易。像这样的东西：

$("a[href*=#test]").click(function(e) {
        e.preventDefault();
        alert('works');
});

纯javascript中是否有等价物？或者最简单的方法是什么？我找到了 getElementsByName 和 getElementsByClassName 但是这种情况呢？

Answer 1

如果您不需要支持 IE < 8 ( http://caniuse.com/queryselector ) ，我认为querySelectorAll应该可以解决问题

Answer 2

旧的 Javascript 规范中没有等价物，所以你不能使用querySelectorAll，并且仍然支持旧的浏览器，比如 <IE8.

您要做的是使用getElementsByTagName，然后通过检查每个href属性来过滤结果。如果您检查 JQuery 源代码，我想您会发现它或多或少就是这样做的。

---

您始终可以使用更新的功能，例如querySelectorAll，并包含“polyfill”以添加对旧浏览器的支持。 这是一个例子。

if (!document.querySelectorAll) {
    document.querySelectorAll = function(selector) {
        var doc = document,
            head = doc.documentElement.firstChild,
            styleTag = doc.createElement('STYLE');
        head.appendChild(styleTag);
        doc.__qsaels = [];

        styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";
        window.scrollBy(0, 0);

        return doc.__qsaels;
    }
}

Answer 3

这篇文章有一些关于这方面的重要信息。 http://remysharp.com/2013/04/19/i-know-jquery-now-what/

纯Javascript

var $ = document.querySelectorAll.bind(document);
Element.prototype.on = Element.prototype.addEventListener;

$('#somelink')[0].on('touchstart', handleTouch);

但我不认为它支持旧的 IE，你可能无法做你想要的选择器

---

然而，

如果您只是在寻找轻量级的东西，您可以单独使用Sizzle引擎，而无需使用 jquery。

仅重4k。

Answer 4

//Only searches anchor tags
function getElementsByHref(href) {
    var els = document.getElementsByTagName("a");
    var result = [];    
    for (i=0;i<els.length;i++) {
        if (els[i].getAttribute("href") == href) result.push(els[i]);
    }
    return result;
}

Answer 5

您可以使用 document.querySelector (或 querySelectorAll)

如果你想要一个href以'test'开头的链接，你可以使用 -

document.querySelectorAll("a[href^=test]');

Answer 6

var hyperlinks = document.getElementsByTagName("a")将返回文档中的所有超链接。然后，您可以遍历这些结果，并为每个元素检查 href 属性的值，element.getAttribute("href")并检查该字符串值是否以所需的字符串开头，如果确实如此，则将单击事件绑定到该元素。

Answer 7

您也可以使用此过程：

var a = document.getElementsByTagName('a');
for (var i=0; i<a.length; i++){
    if ((a[i].id && a[i].id.toLowerCase().indexOf('test') !== 0) {
        continue; // id not starts with 'test'
    }
    if (a[i].addEventListener) {
        a[i].addEventListener('click', handler, false);
    } else {
        a[i].attachEvent('onclick', handler);
    }
}

function handler(e){
    e = e || window.event; // for IE8/7 backward compatibility
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        event.returnValue = false; // for IE8/7 backward compatibility
    }
    alert('works');
}

http://jsfiddle.net/VcVpM/19/（代码）
http://jsfiddle.net/VcVpM/19/show（结果页）