jquery method and application for obtaining invisible elements

With the development and popularization of network technology, more and more website applications have begun to adopt dynamic page technology, among which the JavaScript framework jQuery is the most widely used one. In jQuery, getting elements is one of the most basic operations. However, some node elements may become invisible due to some style settings or position restrictions, and it is these invisible node elements that are often one of the targets we need to operate on in actual development. So how to get invisible elements using jQuery?

1. Type analysis of invisible elements

In jQuery, there are four common invisible elements: display is none, visibility is hidden, element width or height is 0, or itself Off screen (top or left is too large or small).

1. display is none

These elements exist in the HTML page, but they are not displayed on the page and do not occupy the page layout space.

For example, in the code example below in HTML, although there are two div elements, only one div is visible on the page:

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

2, visibility is hidden

This part of the element is similar to the display-none type, but the element is invisible and takes up the layout space of the page. For example, in the code example below in HTML, although there are two div elements, both divs occupy the layout space on the page, but one is visible and the other is invisible:

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

3, The element width or height is 0

In this case, the layout occupied by the element will not affect the layout of the page, but because the width or height is 0, we cannot directly find and operate the element.

For example, in the code example below in HTML, although there are three div elements, only two divs are visible on the page, and the other two are invisible. The width and height of the "notVisibleDiv" element are both 0, so it is invisible and cannot be found through ordinary selectors:

<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. It is outside the screen (top or left is too large or too small)

These elements also exist in the page, but usually JavaScript code is required to find and operate them.

For example, in the code example below in HTML, although there are three div elements, only one div is visible on the page, and the other two are invisible. Among them, the left value of the "leftSidedDiv" element is too small and is outside the page, while the left value of the "rightSidedDiv" element is too large, and similar problems occur:

<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>

2. How to find invisible elements with jQuery

Because there are these invisible elements, during the actual development process, we may need to find them and perform certain operations, such as getting the attribute values ​​of invisible elements, setting new styles for invisible elements, etc.

Now let’s learn how to find invisible elements in jQuery. Based on the above analysis, we can get the following four methods:

1. Selector

You can use the same selector to find invisible elements to find visible elements. Since the search scope is the entire document, this method requires a certain amount of calculation time. But the advantage is that the code is simple and easy to understand.

For example, we want to get the element "leftSidedDiv" located outside the screen:

var notVisibleEle = $('#leftSidedDiv');

2. Filter selector

The filter can filter out elements that meet specific attribute conditions.

For example, we want to get the element whose position attribute value is absolute:

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

3. Hide or show invisible elements

This is equivalent to moving the invisible element to a Within the controllable range, and then obtain the attribute value.

For example, we want to get the element "notVisibleDiv" with a width and height of 0:

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

4. Traversing the document tree

jQuery can find the document by traversing Invisible elements in the tree. This approach results in better performance because only part of the document tree needs to be traversed rather than the entire document tree.

For example, we want to get all off-screen elements:

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

3. Application of invisible elements

After understanding how to get invisible elements, we can actually develop Flexible application in the process. Below are some specific application scenarios.

1. Dynamically modify the attributes of invisible elements

For example, the div element we specified in the web page was originally invisible, but when the mouse hovers over a button, This div needs to be displayed, and when the mouse is moved away, this state needs to be restored.

<div id="hoverDiv" style="display:none;">这是一个鼠标悬停时显示的div元素</div>
<button id="hoverBtn">悬停按钮</button>

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

2. Detect the size of invisible elements

For example, we need to get the size of the target node and cover it in the floating layer

<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. Get the invisible element Element attributes and operations

For example, when the mouse hovers over a certain navigation, the image address under the corresponding navigation can be obtained, and then the image can be displayed on the page through an Ajax request.

<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();
    }
);

Summary:

JQuery obtaining invisible elements involves multiple methods such as selectors, filtering selectors, hiding or showing invisible elements, and traversing the document tree. The flexible application of these methods can better meet our needs in actual development.

The above is the detailed content of jquery method and application for obtaining invisible elements. For more information, please follow other related articles on the PHP Chinese website!