보이지 않는 요소를 얻기 위한 jquery 메서드 및 애플리케이션-프런트엔드 Q&A-php.cn

네트워크 기술의 발전과 대중화로 인해 점점 더 많은 웹사이트 애플리케이션이 동적 페이지 기술을 채택하기 시작했으며 그중 JavaScript 프레임워크인 jQuery가 가장 널리 사용됩니다. jQuery에서 요소를 가져오는 것은 가장 기본적인 작업 중 하나입니다. 그러나 일부 노드 요소는 일부 스타일 설정이나 위치 제한으로 인해 보이지 않게 될 수 있으며, 이러한 보이지 않는 노드 요소는 실제 개발에서 작업해야 하는 대상 중 하나인 경우가 많습니다. 그렇다면 jQuery를 사용하여 보이지 않는 요소를 얻는 방법은 무엇입니까?

1. 보이지 않는 요소의 유형 분석

jQuery에는 네 가지 일반적인 보이지 않는 요소가 있습니다. 표시가 없음, 가시성이 숨겨짐, 요소 너비 또는 높이가 0 또는 화면 외부에 있음(상단 또는 왼쪽이 너무 크게 전달됨) 또는 너무 작음).

1. 표시가 없습니다

이러한 요소는 HTML 페이지에 존재하지만 페이지에 표시되지 않으며 페이지 레이아웃 공간을 차지하지 않습니다.

예를 들어 HTML의 아래 코드 예제에는 두 개의 div 요소가 있지만 페이지에는 하나의 div만 표시됩니다.

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

로그인 후 복사

2 가시성은 숨겨집니다.

요소의 이 부분은 디스플레이와 유사합니다. 유형은 없음이지만 요소는 보이지 않으며 페이지의 레이아웃 공간을 차지합니다. 예를 들어 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 화면 외부에 있습니다(상단이나 왼쪽이 너무 크거나 너무 작습니다)

요소는 페이지에도 존재하지만 일반적으로 해당 요소를 찾고 작동하려면 JavaScript 코드가 필요합니다.

예를 들어 HTML의 아래 코드 예제에는 세 개의 div 요소가 있지만 페이지에는 div 하나만 표시되고 나머지 두 개는 표시되지 않습니다. 그중 "leftSidedDiv" 요소의 왼쪽 값이 너무 작아 페이지 외부에 있는 반면, "rightSidedDiv" 요소의 왼쪽 값은 너무 커서 비슷한 문제가 발생합니다.

<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. 보이지 않는 요소를 찾는 방법 jQuery를 사용하면

이러한 불일치로 인해 표시 요소가 있으므로 실제 개발 프로세스에서 이를 찾아 보이지 않는 요소의 속성 값 가져오기, 보이지 않는 요소에 대한 새 스타일 설정, 등.

이제 jQuery에서 보이지 않는 요소를 찾는 방법을 알아 보겠습니다. 위의 분석을 바탕으로 다음과 같은 네 가지 방법을 얻을 수 있습니다.

1. 선택기

보이는 요소를 찾는 데 사용하는 것과 동일한 선택기를 사용하여 보이지 않는 요소를 찾을 수 있습니다. 검색 범위는 문서 전체이므로 이 방법은 일정량의 계산 시간을 필요로 합니다. 하지만 장점은 코드가 간단하고 이해하기 쉽다는 것입니다.

예를 들어 화면 외부에 있는 "leftSidedDiv" 요소를 가져오려고 합니다.

var notVisibleEle = $('#leftSidedDiv');

로그인 후 복사

2. 필터 선택기

필터는 특정 속성 조건을 충족하는 요소를 필터링할 수 있습니다.

예를 들어 위치 속성 값이 절대값인 요소를 가져오려고 합니다:

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

로그인 후 복사

3. 보이지 않는 요소의 적용

이제 보이지 않는 요소를 얻는 방법을 이해했으므로 실제 개발 과정에서 유연하게 적용할 수 있습니다. 다음은 몇 가지 구체적인 적용 시나리오입니다.

1. 보이지 않는 요소의 속성을 동적으로 수정합니다.

예를 들어 웹 페이지에서 지정한 div 요소는 원래 보이지 않지만 마우스를 버튼 위로 가져가면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!