Question

是否有任何插件或其他工具可以让我指向网页上的元素并返回jquery（或css）选择器查询？

我正在寻找非技术人员可以使用的东西，以便他们可以“突出显示”页面项目，然后获取适当的jquery语句以“正确”导航到该元素 - 存在的任何东西对此？

Answer 1

Firefox的Firebug和Chrome的检查工具都具有此功能。只需右键单击 - >检查，它就会列出一个CSS选择器结构。

Answer 2

https://chrome.google.com/webstore/detail/selectorgadget/mhjhnkcfbdhnjickkkdbjoemdmbfginb

SelectorGadget是一个开源工具，可以创建CSS选择器   在复杂的站点上生成和发现轻而易举。只需安装   Chrome扩展程序或将书签拖到书签栏，   然后转到任何页面并启动它。右下方会打开一个方框   的网站。单击您想要的页面元素   选择器匹配（它将变为绿色）。然后SelectorGadget   为该元素生成一个最小的CSS选择器，并将突出显示   （黄色）选择器匹配的所有内容。现在点击一下   突出显示要从选择器中删除它的元素（红色），或单击   一个未突出显示的元素，将其添加到选择器。通过这个   选择和拒绝的过程，SelectorGadget可以帮助你挺身而出   使用完美的CSS选择器满足您的需求。

我怎么能用这个？



使用Nokogiri和Beautiful Soup等工具进行网页抓取



为动态网站生成jQuery选择器



作为检查JavaScript生成的DOM结构的工具



作为一种工具，可帮助您仅设置页面上的特定元素的样式   你的样式表



用于硒或幻影测试


由Andrew Cantino和Kyle Maxwell创建。你可以找到当前的   GitHub上的版本，请随时留下评论。

Answer 3

这是你想要的吗？

更新了，它可能不是最好的解决方案，但我很饿^ __ ^：

var root = document.body;
var listen = function(element, evt, func){
    if(element.addEventListener)
        element.addEventListener(evt, func, false);
    else if(element.attachEvent)
        element.attachEvent('on'+evt, func);
};

var buildchain = function(element, chain){
    if(element == document.body){
        return true;
    }
    else if(element.id != ""){
        chain.push("#" + element.id);
        return true;
    }
    else if(element.className != "")
        chain.push("." + element.className);
    else
        chain.push("" + element.tagName);
    buildchain(element.parentNode, chain);
}

var buildstring = function(){
    var str = "$('" + chain[chain.length-1] + "')";
    for(var i = chain.length-2; i >= 0; i--){
        str += (".children('" + chain[i] + "')");
    }
    return str;
}
listen(root, 'click', function(evt){
    chain = [];
    buildchain(evt.target, chain);
    var s = buildstring();
    alert(s);
});

Answer 4

如果您不想使用jquery并需要选择器与document.querySelector（）一起使用，我会进行一些修改

const root = document.body;
const listen = function(element, evt, func){
    if(element.addEventListener)
        element.addEventListener(evt, func, false);
    else if(element.attachEvent)
        element.attachEvent('on'+evt, func);
};

const buildchain = function(element, chain){
    if(element == document.body){
        return true;
    }
    else if(element.id != ""){
        chain.push("#" + element.id);
        return true;
    }
    else if(element.className != ""){
        let strclass = ""
        element.className.split(" ").map((value) => {
            if (value) {
                strclass += "." + value
            }
        })
        chain.push(strclass);
    }
    else {
        chain.push("" + element.tagName);
    }
    buildchain(element.parentNode, chain);
}

var buildstring = function(){
    let str
    if (chain[chain.length-1]) {
        str = chain[chain.length-1];
    }
    for(let i = chain.length-2; i >= 0; i--){
        if (chain[i]) {
            str += (" " + chain[i]);
        }
    }
    return str;
}
listen(root, 'click', function(evt){
    chain = [];
    buildchain(evt.target, chain);
    var s = buildstring();
    alert(s);
});

Point-n-Click JQuery选择器生成器？

4 个答案: