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

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

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

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

1、 display为none

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

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

<div id="visibleDiv">这是一个可见的div元素</div>
<div id="hiddenDiv" style="display:none;">这是一个不可见的div元素</div>

2、visibility为hidden

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

<div id="visibleDiv">这是一个可见的div元素</div>
<div id="hiddenDiv" style="visibility:hidden;">这是一个不可见但占据布局空间的div元素</div>

3、元素宽度或高度为0

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

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

<div id="visibleDiv">这是一个可见的div元素</div>
<div id="zeroSizeDiv" style="width:0;height:0;">这是一个宽高都为0的不可见div元素</div>
<div id="notVisibleDiv" style="position:absolute;width:0;height:0;">这是一个宽高都为0的、本身就在页面之外的不可见div元素</div>

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

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

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

<div id="visibleDiv">这是一个可见的div元素</div>
<div id="leftSidedDiv" style="position:absolute;left:-9999px;">这是一个left值过小的不可见div元素</div>
<div id="rightSidedDiv" style="position:absolute;left:9999px;">这是一个left值过大的不可见div元素</div>

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

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

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

1、选择器

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

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

var notVisibleEle = $('#leftSidedDiv');

2、过滤选择器

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

例如，我们想获取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 id="hoverDiv" style="display:none;">这是一个鼠标悬停时显示的div元素</div>
<button id="hoverBtn">悬停按钮</button>

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

2、检测不可见元素大小

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

<div class="targetEle" style="width:0;height:0;">这是一个宽高都为0的不可见元素</div>
<div class="popupBox" style="display:none;">这是一个浮层容器，将会包裹住目标节点</div>

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

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

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

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

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

<div class="navItem" data-pic-url="https://www.example.com/pic.jpg">导航项1</div>
<div class="navItem" data-pic-url="https://www.example.com/pic2.jpg">导航项2</div>
<div class="navItem" data-pic-url="https://www.example.com/pic3.jpg">导航项3</div>
<div class="imageContainer"></div>

// 鼠标悬停时操作
$('.navItem').hover(
    function() {
        var picUrl = $(this).data('pic-url');
        $.ajax({
            url: picUrl,
            success: function(data) {
                $('.imageContainer').html('<img src="&#39; + data + &#39;">');
            }
        });
    },
    function() {
        $('.imageContainer').empty();
    }
);

总结：

jQuery获取不可见元素涉及到了选择器、过滤选择器、隐藏或显示不可见元素和遍历文档树等多种方式。这些方法的灵活运用，在实际的开发中可以更好地满足我们的需求。

以上是jquery获取不可见元素的方法及应用的详细内容。更多信息请关注PHP中文网其他相关文章！