开发者

jQuery selector help - Can I generate a selector from clicking on an element?

I have jQuery, FireFox, Firebug, IE, and IE developer toolbar. When I am examing a page with either FireBug or IE Dev toolbar, I am able to click on an element and it shows me in the dom where the element is etc... Is there anyway to transform that selection into a valid jQuery selector? I know I can use ID, classes, and element relative to other elements etc... but what about when I am looking at some random table cell that doesn't have a class or id etc.. Can I generate a selector on the fly like that? I thought for sure there was. Any thoughts开发者_开发百科 or ideas are always appreciated

Thanks, ~ck in San Diego


There are a couple of free tools that will help you find your selector. One is called Selector Detector and the other is SelectorGadget.

Both are very similar and easy to implement. Just bookmark a javascript link and open it on your site (just like firebug lite). Then click on your element to display its selector.

I just wrote an article comparing the two that includes demos and download links. If you want to read more, check it out here: http://www.heinencreative.com/archives/articles/selector-detector-vs-selectorgadget/


Check out the FireQuery plugin for Firebug.


In Firebug you can write $1 which is the last selected object on the page.


If you're looking to add an attribute to a DOM element i.e. a <td> element with Firebug

  • Right click the <td> element on the page and Inspect Element.
  • On the HTML tab of Firebug Right-click on the tag i.e. <td>
  • Select New Attribute
  • Add an id/class/etc.

...and that's all there is to it.


Typically what I do is load jQuery inside Firebug, wrap it as a grease monkey script.Below is such a script from http://joanpiedra.com/jquery/greasemonkey/

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works
    }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜