是否有可能返回；突出显示“；（像Firebug）css选择器还是带jquery的dom id？

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

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

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

谢谢

乔纳森

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

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

---

有一些“favlet”（添加到收藏夹中的脚本）可以做类似的事情。这里有一个：因为favlet只是一个普通的老javascript，所以您可以在页面中使用它的代码。单击“Mouseover DOM Inspector”链接查看效果。

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

---

请在此处尝试：

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

---

与其将处理程序绑定到页面上的每个元素，不如将其绑定到主体并使用事件委托。我使用它来突出显示，请参阅我关于如何获得css路径的答案。谢谢你的帮助。代码很短，确实如此。顺便说一句，这个bookmarklet在简单的JavaScript中实现了你想要的功能：（以防你需要它）我是不是在14分钟内得到了3个答案？！太棒了！

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