jquery获取不可见元素的方法及应用

PHPz

发布时间：2023-04-06 08:54:44

1716人浏览过

来源于php中文网

原创

随着网络技术的发展与普及，越来越多的网站应用开始采用动态页面技术，其中javascript框架jquery是应用得最为广泛的一种。在jquery中，获取元素是最基础的操作之一。但是有些节点元素由于一些样式设置或者位置限制，可能会让其变成不可见状态，而正是这些不可见节点元素，往往是我们在实际开发中需要对其进行操作的目标之一。那么如何使用jquery获取不可见元素呢？

一、不可见元素的类型分析

在jQuery中，常见的不可见元素有四种：display为none、visibility为hidden、元素宽度或高度为0、或者本身处于屏幕外（top或left过大或过小）。

1、 display为none

这部分元素在HTML页面中是存在的，但却并不会在页面中显示，也不占据页面布局空间。

例如下面HTML中的代码示例，虽然有两个div元素，但在页面中只有一个div是可见的：

这是一个可见的div元素
这是一个不可见的div元素

2、visibility为hidden

这部分元素跟display为none类型差不多，不过该元素不可见并且还会占据页面的布局空间。例如下面HTML中的代码示例，虽然有两个div元素，但在页面中两个div都占据了布局空间，只不过一个是可见的，一个是不可见的：

这是一个可见的div元素
这是一个不可见但占据布局空间的div元素

3、元素宽度或高度为0

这种情况下元素占据的布局不会影响页面的布局，但因宽度或高度为0，所以我们无法直接找到和操作该元素。

例如下面HTML中的代码示例，虽然有三个div元素，但在页面中只有两个div是可见的，其它两个都是不可见的。其中“notVisibleDiv”元素的宽度和高度均为0，因而不可见且无法通过普通的选择器查找到：

这是一个可见的div元素
这是一个宽高都为0的不可见div元素
这是一个宽高都为0的、本身就在页面之外的不可见div元素

4、本身处于屏幕外（top或left过大或过小）

这些元素在页面中同样是存在的，但通常需要通过JavaScript代码才能找到并操作它们。

例如下面HTML中的代码示例，虽然有三个div元素，但在页面中只有一个div是可见的，另外两个都是不可见的。其中“leftSidedDiv”元素的left值太小，处于页面之外，而“rightSidedDiv”元素的left值太大，也出现类似问题：

这是一个可见的div元素
这是一个left值过小的不可见div元素
这是一个left值过大的不可见div元素

二、jQuery查找不可见元素的方法

由于有这些不可见的元素，所以在实际开发过程中，我们可能需要查找它们并进行某些操作，例如获取不可见元素的属性值、给不可见元素设置新样式等。

现在让我们来学习在jQuery中查找不可见元素的方法。根据上文分析，我们可以得到以下四种方法：

1、选择器

可以使用与查找可见元素相同的选择器来查找不可见元素。由于查找范围是整个文档，所以这种方法需要耗费一定的计算时间。但优点是代码简单易懂。

例如，我们想获取位于屏幕外的元素“leftSidedDiv”：

var notVisibleEle = $('#leftSidedDiv');

2、过滤选择器

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

下载

过滤器可以筛选出满足特定属性条件的元素。

例如，我们想获取position属性值为absolute的元素：

var notVisibleEle = $('div').filter(function() {
    return $(this).css('position') == 'absolute';
});

3、隐藏或显示不可见元素

这相当于把不可见元素挪到一个可控范围内，然后再获取属性值。

例如，我们想获取宽和高都为0的元素“notVisibleDiv”：

var hoverEleWidth = $('#notVisibleDiv').show().width();
var hoverEleHeight = $('#notVisibleDiv').show().height();
$('#notVisibleDiv').hide();

4、遍历文档树

jQuery可以通过遍历的方式来找到文档树中的不可见元素。这种方法可以获得更好的性能，因为只需要遍历部分文档树而非整个文档树。

例如，我们想获取所有屏幕外的元素：

$('#containerDiv').find('*').filter(function() {
    return $(this).position().left < 0 || $(this).position().left > $(document).width();
});

三、不可见元素的应用

了解了如何获取不可见元素，我们可以在实际开发过程中灵活应用。下面是一些具体的应用场景。

1、动态修改不可见元素属性

例如，我们在网页中被指定的div元素，原本是不可见状态，而当鼠标悬停在某个按钮上时，这个div需要显示，又当鼠标移开后，这个状态又要还原。

这是一个鼠标悬停时显示的div元素

// 鼠标悬停时显示隐藏
$('#hoverBtn').hover(
    function() {
        $('#hoverDiv').show();
    },
    function() {
        $('#hoverDiv').hide();
    }
);

2、检测不可见元素大小

例如，我们需要获取目标节点的大小，并将其涵盖到浮层中

这是一个宽高都为0的不可见元素
这是一个浮层容器，将会包裹住目标节点

// 获取目标节点大小
var targetWidth = $('.targetEle').show().width();
var targetHeight= $('.targetEle').show().height();

// 填充浮层中内容并显示
var popupContent = '目标节点的大小为宽：' + targetWidth + 'px，高：' + targetHeight + 'px';
$('.popupBox').html(popupContent).show();

$('.targetEle').hide();

3、获取不可见元素属性并进行操作

例如，当鼠标在某个导航上悬停时，能够获取到对应导航下的图片地址，然后通过Ajax请求，将图片展示在页面上。

导航项1
导航项2
导航项3

// 鼠标悬停时操作
$('.navItem').hover(
    function() {
        var picUrl = $(this).data('pic-url');
        $.ajax({
            url: picUrl,
            success: function(data) {
                $('.imageContainer').html('');
            }
        });
    },
    function() {
        $('.imageContainer').empty();
    }
);