JQuery-Methode und Anwendung zum Abrufen unsichtbarer Elemente

Mit der Entwicklung und Popularisierung der Netzwerktechnologie haben immer mehr Website-Anwendungen begonnen, dynamische Seitentechnologie zu übernehmen, wobei das JavaScript-Framework jQuery das am weitesten verbreitete ist. In jQuery ist das Abrufen von Elementen einer der grundlegendsten Vorgänge. Einige Knotenelemente können jedoch aufgrund bestimmter Stileinstellungen oder Positionsbeschränkungen unsichtbar werden. Diese unsichtbaren Knotenelemente sind häufig eines der Ziele, an denen wir in der tatsächlichen Entwicklung arbeiten müssen. Wie erhält man mit jQuery unsichtbare Elemente?

1. Typanalyse unsichtbarer Elemente

In jQuery gibt es vier häufig vorkommende unsichtbare Elemente: Anzeige ist keine, Sichtbarkeit ist ausgeblendet, Elementbreite oder -höhe ist 0 oder es liegt außerhalb des Bildschirms (oben oder links wird zu groß übergeben). oder zu klein).

1. Anzeige erfolgt nicht

Diese Elemente sind auf der HTML-Seite vorhanden, werden jedoch nicht auf der Seite angezeigt und belegen keinen Platz im Seitenlayout.

Im folgenden Codebeispiel in HTML ist beispielsweise nur ein div-Element auf der Seite sichtbar:

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

2 Die Sichtbarkeit ist ausgeblendet

Dieser Teil des Elements ähnelt der Anzeige Art von none, aber das Element ist unsichtbar und nimmt Platz im Layout auf der Seite ein. Im folgenden Codebeispiel in HTML gibt es beispielsweise zwei Div-Elemente, beide belegen den Layoutbereich auf der Seite, aber eines ist sichtbar und das andere unsichtbar:

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

3 Elementbreite oder -höhe ist 0

In diesem Fall hat das vom Element belegte Layout keinen Einfluss auf das Layout der Seite. Da die Breite oder Höhe jedoch 0 ist, können wir das Element nicht direkt finden und bedienen.

Zum Beispiel sind im folgenden Codebeispiel in HTML zwar drei div-Elemente vorhanden, aber nur zwei divs auf der Seite sichtbar und die anderen beiden sind unsichtbar. Die Breite und Höhe des „notVisibleDiv“-Elements sind beide 0, daher ist es unsichtbar und kann nicht über gewöhnliche Selektoren gefunden werden:

<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 Es liegt außerhalb des Bildschirms (oben oder links ist zu groß oder zu klein)

These Elemente sind in Sie sind auch auf der Seite vorhanden, erfordern jedoch normalerweise JavaScript-Code, um sie zu finden und zu bedienen.

Zum Beispiel ist im folgenden Codebeispiel in HTML zwar drei div-Elemente vorhanden, aber nur ein div ist auf der Seite sichtbar und die anderen beiden sind unsichtbar. Unter anderem ist der linke Wert des Elements „leftSidedDiv“ zu klein und liegt außerhalb der Seite, während der linke Wert des Elements „rightSidedDiv“ zu groß ist und ähnliche Probleme auftreten:

<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. So finden Sie unsichtbare Elemente mit jQuery

Aufgrund dieser Inkonsistenzen sind sichtbare Elemente vorhanden. Daher müssen wir sie im eigentlichen Entwicklungsprozess möglicherweise finden und bestimmte Vorgänge ausführen, z. B. den Attributwert unsichtbarer Elemente abrufen, neue Stile für unsichtbare Elemente festlegen. usw.

Jetzt lernen wir, wie man unsichtbare Elemente in jQuery findet. Basierend auf der obigen Analyse können wir die folgenden vier Methoden erhalten:

1. Selektor

Sie können denselben Selektor verwenden, um unsichtbare Elemente zu finden, wie Sie ihn verwenden, um sichtbare Elemente zu finden. Da der Suchbereich das gesamte Dokument umfasst, erfordert diese Methode eine gewisse Berechnungszeit. Der Vorteil ist jedoch, dass der Code einfach und leicht verständlich ist.

Zum Beispiel möchten wir das Element „leftSidedDiv“ außerhalb des Bildschirms platzieren:

var notVisibleEle = $('#leftSidedDiv');

2 Filterauswahl: Der Filter kann Elemente herausfiltern, die bestimmte Attributbedingungen erfüllen.

Zum Beispiel möchten wir das Element abrufen, dessen Positionsattributwert absolut ist:

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

3. Unsichtbare Elemente ausblenden oder anzeigen

Dies entspricht dem Verschieben des unsichtbaren Elements in einen kontrollierbaren Bereich und dem anschließenden Abrufen des Attributwerts.

Zum Beispiel möchten wir das Element „notVisibleDiv“ mit einer Breite und Höhe von 0 erhalten:

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

4 Durchlaufen des Dokumentbaums

jQuery kann durch Durchlaufen unsichtbare Elemente im Dokumentbaum finden. Dieser Ansatz führt zu einer besseren Leistung, da nur ein Teil des Dokumentbaums und nicht der gesamte Dokumentbaum durchlaufen werden muss.

Zum Beispiel möchten wir alle Off-Screen-Elemente erhalten:

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

3. Anwendung unsichtbarer Elemente

Nachdem wir nun verstanden haben, wie man unsichtbare Elemente erhält, können wir es flexibel im eigentlichen Entwicklungsprozess anwenden. Nachfolgend finden Sie einige spezifische Anwendungsszenarien.

1. Ändern Sie die Attribute unsichtbarer Elemente dynamisch

Zum Beispiel war das auf der Webseite angegebene div-Element ursprünglich unsichtbar, aber wenn die Maus über eine Schaltfläche bewegt wird, muss das div angezeigt werden, und wenn die Maus danach bewegt wird Nach der Entfernung muss dieser Zustand wiederhergestellt werden.

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

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

2. Ermitteln Sie die Größe unsichtbarer Elemente

Zum Beispiel müssen wir die Größe des Zielknotens ermitteln und ihn in der schwebenden Ebene abdecken

<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. Holen Sie sich die Attribute unsichtbarer Elemente und bedienen Sie sie Wenn Sie beispielsweise mit der Maus über eine bestimmte Navigation fahren, können Sie die Bildadresse unter der entsprechenden Navigation abrufen und das Bild dann über eine Ajax-Anfrage auf der Seite anzeigen.

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

Zusammenfassung:

Das Abrufen unsichtbarer Elemente durch jQuery umfasst mehrere Methoden wie Selektoren, Filterselektoren, Ausblenden oder Anzeigen unsichtbarer Elemente und Durchlaufen des Dokumentbaums. Durch die flexible Anwendung dieser Methoden können wir unsere Anforderungen in der tatsächlichen Entwicklung besser erfüllen.

Das obige ist der detaillierte Inhalt vonJQuery-Methode und Anwendung zum Abrufen unsichtbarer Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!