目に見えない要素を取得するための jquery メソッドとアプリケーション

ネットワーク技術の発展と普及に伴い、動的ページ技術を採用する Web サイト アプリケーションが増えてきました。その中で最も広く使用されているのが JavaScript フレームワーク jQuery です。 jQuery では、要素の取得は最も基本的な操作の 1 つです。ただし、一部のノード要素はスタイル設定や位置の制限により非表示になる場合があり、実際の開発ではこれらの非表示のノード要素が操作対象の 1 つとなることがよくあります。では、jQuery を使用して非表示の要素を取得するにはどうすればよいでしょうか?

1. 不可視要素の型分析

jQuery には、4 つの一般的な不可視要素があります: 表示なし、可視性が非表示、要素の幅または高さが 0、またはそれ自体 オフスクリーン (上)または左が大きすぎるか小さすぎる）。

1. 表示はありません

これらの要素は HTML ページ内に存在しますが、ページ上には表示されず、ページ レイアウト スペースを占有しません。

たとえば、次の HTML コード例では、2 つの div 要素がありますが、ページ上に表示される div は 1 つだけです:

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

2、可視性は非表示です

要素のこの部分は表示なしタイプに似ていますが、要素は非表示であり、ページのレイアウト スペースを占有します。たとえば、HTML の次のコード例では、2 つの div 要素があり、両方の div がページ上のレイアウト スペースを占有していますが、一方は表示され、もう一方は非表示になっています。

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

3、要素の幅または高さが 0

この場合、要素が占めるレイアウトはページのレイアウトに影響しませんが、幅または高さが 0 であるため、要素を直接検索して操作することはできません。

たとえば、以下の HTML のコード例では、3 つの div 要素がありますが、ページ上に表示されるのは 2 つの div だけで、他の 2 つは表示されません。 「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 コード例では、3 つの div 要素がありますが、ページ上に表示されるのは 1 つの div のみで、他の 2 つは非表示です。このうち、「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 で目に見えない要素を見つける方法を学びましょう。上記の分析に基づいて、次の 4 つの方法が得られます:

1. セレクター

同じセレクターを使用して、目に見えない要素を検索し、目に見える要素を見つけることができます。この方法では検索範囲が文書全体となるため、ある程度の計算時間がかかります。ただし、コードがシンプルで理解しやすいという利点があります。

たとえば、画面の外側にある要素「leftSidedDiv」を取得したいとします:

var notVisibleEle = $('#leftSidedDiv');

2. フィルター セレクター

フィルターは、特定の属性を満たす要素をフィルターで除外できます。条件。

たとえば、position 属性値が絶対である要素を取得したいとします:

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. 非表示の要素の属性を動的に変更する

たとえば、Web ページで指定した 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 中国語 Web サイトの他の関連記事を参照してください。