Question

使用jquery，使用一个以x开头的url的选择器相当容易。这样的事情：

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

纯javascript中是否有相同的功能？或者最简单的方法是什么？我找到了getElementsByName和getElementsByClassName但是这个案例呢？

Answer 1

我认为querySelectorAll如果您不需要支持IE＆lt; 8（http://caniuse.com/queryselector）

Answer 2

旧的Javascript规范中没有相应的内容，因此您无法使用querySelectorAll，仍然支持旧版浏览器，例如＆lt; IE8。

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

您始终可以使用querySelectorAll等较新功能，并添加“polyfill”以添加对旧版浏览器的支持。 Here's an example

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")会返回您文档中的所有hyerlinks。然后，您可以循环遍历这些结果，并为每个元素通过element.getAttribute("href")检查href属性的值，并检查该字符串值是否以所需的字符串开头，如果确实如此，则将click事件绑定到该元素。

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（结果页）

自定义Javascript href选择器

7 个答案: