Question

单击“使用FireBug单击要检查的页面上的元素”箭头时，它会在目标元素周围放置一个蓝色边框，并返回DOM Id。

我正在构建一个应用程序，该功能将很棒添加。在单击将DOM Id或CSS选择器返回到应用程序时，能够将鼠标悬停在元素上并突出显示目标。

是否有一个jquery插件可以实现这个魔力？其他一些聪明的方式？

谢谢！，

乔纳森

Answer 1

$("*").mouseenter(function() {
  $(".highlighted").addClass("unhighlighted").removeClass("highlighted");
  $(this).addClass("highlighted");
});

$("*").mouseleave(function() {
  $(this).removeClass("highlighted").parents(".unhighlighted").first().addClass("highlighted");
});

JSFiddle

Answer 2

轻松完成。您感兴趣的是target：

$(document).ready(function() {
    $(document).click(function(e) {
        alert(e.target);
        $(".highlight").removeClass("highlight");
        $(e.target).addClass("highlight");
        var id = e.target.id; // or $(e.target).attr('id');
    });
});

在此处试试：http://jsfiddle.net/3Yw4x/1/

Answer 3

我使用了tster提供的内容，为了获得cssPath，我编写了以下$.fn.cssPath函数，该函数返回css选择器以便将来引用此元素。到目前为止它的工作很棒。

          $.fn.cssPath = function() {
            var currentObject = $(this).get(0);        
            cssResult = "";
             while (currentObject.parentNode) {
              if(currentObject.id) {
                cssResult = currentObject.nodeName + '#' + currentObject.id + " " + cssResult;
                break;
              } else if(currentObject.className) {
                cssResult = currentObject.nodeName + '.' + currentObject.className + " " + cssResult;            
              } else {
                cssResult = currentObject.nodeName + " " + cssResult;            
              }
              currentObject = currentObject.parentNode;
            }
            return cssResult.toLowerCase();
          }

   $("*").mouseenter(function() {
      $(".highlight").removeClass("highlight");
      $(this).addClass("highlight");        
   });

  $("*").bind('click',function(event){
    var value = $(this).cssPath();
    $('#web_page_filter',top.document).val(value);
    return false;
  });

Answer 4

有一些“favlets”（你添加到收藏夹的脚本）做类似的事情。这是一个：http://slayeroffice.com/?c=/content/tools/modi.html因为favlet只是一个普通的旧javascript，你可以在你的页面中使用它的代码。单击“Mouseover DOM Inspector”链接以查看效果。

是否可以使用jquery返回“突出显示”（如Firebug）css选择器或dom id？

4 个答案: