Point-n-Click JQuery選擇器生成器？

是否有任何插件或其他工具可以讓我指向網頁上的元素並獲取jQuery（或CSS）選擇器查詢？Point-n-Click JQuery選擇器生成器？

我正在尋找非技術人員使用的地方，他們可以在那裏「突出顯示」一個頁面項目，然後獲得適當的jquery語句來正確導航到該元素 - 任何東西都在那裏爲此存在？

2011-12-17 SC28

這不是一個非常具體的問題。有很多選擇器可以用來指向某個元素 - ID，類，屬性，... – pimvdb 2011-12-17 13:05:44

William，請詳細解釋你想實現的內容。我沒有完全得到你想要的。 – Joonas 2011-12-17 13:11:37

這是什麼東西就像你在找什麼？

更新，它可能不是最好的解決辦法，但我餓了^ __ ^：

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

來源

2011-12-17 19:23:32

這是一個開始，但是例如如果目標有一個類名，那麼你應該遞歸查找DOM樹來找到更獨特的東西，所以選擇器就像'$（'＃something-with-an-id' ）.children（'div'）。children（'。'+ evt.target.className）'。 – Jasper 2011-12-17 19:25:55

好點@Jasper，我即將做晚餐，但我可能會寫一個更徹底的解決方案，一旦我回來了（儘管如果你覺得自己可以自由地這樣做）:) – 2011-12-17 19:51:01

我似乎沒有通過閱讀問題足夠徹底，因爲op是要求一個工具/插件。好吧。 – 2011-12-17 20:34:06

兩個Firefox的螢火蟲和Chrome的檢查工具有這個功能。只需右鍵單擊 - >檢查，並列出了一個CSS選擇器結構。

來源

2011-12-17 19:28:50 Vigrond

http://selectorgadget.com

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

SelectorGadget是一個開源的工具，使上覆雜的網站變得輕而易舉CSS選擇器產生和發現。只需安裝 Chrome擴展程序或將書籤拖到書籤欄，然後轉到任意頁面並啓動它。一個盒子將在網站的右下角中打開。點擊您希望選擇器匹配的頁面元素（它將變爲綠色）。然後SelectorGadget將爲該元素生成一個最小的CSS選擇器，並將突出顯示（黃色）與選擇器匹配的所有內容。現在單擊一個突出顯示的元素將其從選擇器中刪除（紅色），或單擊未加亮的元素以將其添加到選擇器中。通過這個選擇和拒絕的過程，SelectorGadget可幫助您根據自己的需求提供完美的CSS選擇器。

我怎麼用這個？

對網頁的工具，如引入nokogiri和美麗的湯刮

生成動態網站

爲檢查工具jQuery選擇的JavaScript生成DOM結構

作爲一種工具，幫助您只使用您的樣式表

的創建者安德魯坎提諾和凱爾麥克斯韋硒或phantomjs測試

。您可以在GitHub上找到當前的版本，請隨時在下面留言。

來源

2015-02-07 23:07:53 user3439968

Point-n-Click JQuery選擇器生成器？

回答

相關問題