隨著網路技術的發展與普及，越來越多的網站應用開始採用動態頁面技術，其中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="' + data + '">');
}
});
},
function() {
$('.imageContainer').empty();
}
);總結：
jQuery取得不可見元素涉及了選擇器、過濾選擇器、隱藏或顯示不可見元素和遍歷文件樹等多種方式。這些方法的靈活運用，在實際的開發中可以更好地滿足我們的需求。
以上是jquery取得不可見元素的方法及應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
