随着网络技术的发展与普及，越来越多的网站应用开始采用动态页面技术，其中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中文网其他相关文章！
