是否可以使用jquery返回"突出显示"(如Firebug)css选择器或dom id？

Question

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

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

有没有一个jquery插件可以做到这一点？其他一些聪明的方式？

谢谢!,

乔纳森

Answer 1

我使用了 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;
  });