jQuery或JS代码，用于获取网页中当前选定的表单项/文本/图像的确切节点数据

jquery or js code to obtain exact node data for currently selected form item/text/image in a web page

本文关键字：表单 文本 图像 数据 节点 代码 JS 用于 获取 网页 jQuery      更新时间：2023-09-26

我想使用 jquery 获取网页上已点击项目的确切详细信息。

该项可以是表单项（如复选框、文本框、文本区域等）或文本部分（在段落或div 或其他中）或列表或图像......

我想到了以下几点——

$(function(){
  $('*')
    .bind('click', function(event) {
        //now obtain details of item that has been clicked on...    
    });
});

现在，我想要确切的详细信息 - 即div id/表单 id/段落 #，即该特定项目的所有详细信息。如何获取此数据？我知道这些数据在 DOM 中可用，但我只是不知道如何在这种特殊情况下获取它......

可能是使用事件的 target 属性的最佳方法。默认情况下，这将返回一个非 jQuery 对象，这不是特别有用，但是将其包装在 $() 中可以解决此问题：

$(function() {
    $(document).bind('click', function(event) {
        var element = $(event.target);
        alert(element.height());    // Get height   
        alert(element.attr('id'));  // Get ID attribute
        // ...
    });
});

如果要修复当前方法，可以在click()处理程序中，可以使用.attr()和友元访问该元素的属性：

$(function() {
    $('*').bind('click', function(event) {
        alert($(this).height());    // Get height   
        alert($(this).attr('id'));  // Get ID attribute
        // ...
    });
});

函数作用域中的$(this)引用单击的元素。在jQuery文档中有一个函数列表，这些函数将在此处和此处返回属性。 $.attr('id')将返回元素的 ID，$.data()将返回data-*属性。

要获取父元素的属性，只需使用 $(this).parent() 。例如，若要获取包含单击的元素的窗体的 ID，请使用 $(this).closest('form').attr('id'); 。一切都是相对于点击的元素（$(this)），所以你可以只使用 DOM 遍历函数。

但是，使用 $('*').bind() 的效率非常低;您将事件处理程序绑定到页面上的每个元素，而实际上您应该使用 .on() （jQuery 1.7+） 委托事件：

$(function() {
    $('body').on('click', '*', function(event) {
        alert($(this).height());    // Get height   
        alert($(this).attr('id'));  // Get ID attribute
        // ...
    });
});

此方法仅将一个事件绑定到<body>而不是将一个事件绑定到页面上的每个元素。

使用页面上点击事件的目标

$(document).click(function(event){ 
  /* store native dom node*/
   var tgt=event.target;
  /* store jQuery object of dom node*/
   var $tgt=$(tgt);
    /* example element details*/
    var details={ id : tgt.id, height: $tgt.height(), tag : tgt.tagName}
    console.log( details)
})

查看event.target，然后可以使用 jQuery 的 .parents() 方法查看每个祖先：

$(document).on('click', function(event) {
     var $t = $(event.target); // the element that was actually clicked
     var $p = $t.parents();    // the target's parents
     var $form = $p.filter('form').first(); // the enclosing form, if it exists
});
相关文章：