HTML tag selector in jQuery_问答_开发者_运维开发者技术经验分享

This question is a bit open ended as I'm not sure it's possible or where to start with it.

If you are familiar with the Web Developer Toolbar for Firefox you will know the CSS > View Style Information tool where you can mouse around a web page and it will select the <h1>, <div> or whatever html tag you are hovering over.

I'd like to recreate this in with jQuery if possible. Hovering over a part of a web page will return the current HTML tag as $(this).

Where do I start? Is this possible?

I want to do this in order to assign custom CSS to it, in order to display it later. e.g

<p class="somename">kjsadhsfdj  jhfdhj</p>

thanks for the great answers below, not sure which to mar开发者_开发技巧k as correct as they are all good!

started with this:

$(document).ready(
    function() {
        $("*").hover(
            function(obj)
            {
                $(this).css("border","1px solid red");
                $(this).click(
                    function()
                    {
                        console.log($(this));
                    }
                );
            },
            function(obj)
            {
                $(this).css("border","0");
            }
        )
    }
);

but it's also selecting all of the parent tags...

Start with .hover(). It has examples and everything.

Update:

Actually, this is better.

$("*")
    .mouseover(function(e) {
        $(e.target).addClass('somename');
    })
    .mouseout(function(e) {
        $(e.target).removeClass('somename');
});

Obviously inside a document ready function.

Yeah it's possible, have a look at FireBugLite, it's basically a simple version of FireBug implemented 100% in javascript.

As to where you would start, I whipped up something simple here that logs the current element when you move the mouse over it, it should help you out! :)

$(document).ready(function(){
    bind($('html'));
});

function bind(jq){
    jq.mouseenter(function(){
        console.log($(this));
    });
    var kids = jq.children();
    if(kids.length > 0){
       kids.each(function(){
            bind($(this));            
        });
    }
}

Here is a proof-of-concept, nothing fancy. The key is to use the hover function along with add/removeClas.

<html>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $("*:not('html, body')").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); });
            });
        </script>
        <style type="text/css">
            .hover { border: 1px solid #ff00ff; }
            strong.hover { border-color: red; }

        </style>
    </head>

    <body>
        <p>Hello, <strong>StackOverflow</strong>!</p>
        <div style="width: 300px; float: left;">
            <span>This is a left-floating div</span>
        </div>
        <div style="width: 300px; float: right;">
            <span>This is a right-floating div</span>
        </div>
    </body>

</html>

Edit:

Changed selector to *:not('html, body') since you probably don't want to highlight html or body elements.

If you want to highlight elements different, defince your css classes like this:

strong.hover { border-color: green; }
span.hover { border-color: red; }

This ought to get you started:

$(document).ready(
    function() {
        $("*").hover(
            function(obj)
            {
                $(this).addClass("hovering");
                return false; //Prevent parent elements from changing too
            },
            function(obj)
            {
                $(this).removeClass("hovering");
                return false; //Prevent parent elements from changing too
            }
        )
    }
);

The first function adds whatever CSS class you want to elements you're hovering over, and the second removes that class. For example, 'hovering' could be this to add a border around it:

.hovering
{
    border: solid 1px red;
}

div.hovering
{
    border: solid 1px blue;
}

h1.hovering
{
    border: solid 1px green;
}

You could change the behavior for different element types by using

$("div").hover(...
$("h1").hover(...

Also, as alexn stated, you can use $("* not(html, body, etc)") to prevent certain element types from getting the hover functions added to them.

You can do something like

 $(a, h1, h2, h3, div).mouseover(function(){
    //$(this) get the element details and get all elements of this type and add a class to all of them to highlite.
 })

You could start with something like this

jQuery('h1, h2').hover(function(){console.log(this); this.addClass('redBorder')},function(){this.removeClass('redBorder');})

You could select more tags or * for everything

HTML tag selector in jQuery

Update:

精彩评论

关注公众号

热门标签

图文推荐

HTML tag selector in jQuery

Update:

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：