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中文網其他相關文章！