méthode jquery et application pour obtenir des éléments invisibles

Avec le développement et la vulgarisation de la technologie réseau, de plus en plus d'applications de sites Web ont commencé à adopter la technologie des pages dynamiques, parmi lesquelles le framework JavaScript jQuery est le plus largement utilisé. Dans jQuery, obtenir des éléments est l’une des opérations les plus élémentaires. Cependant, certains éléments de nœud peuvent devenir invisibles en raison de certains paramètres de style ou de restrictions de position, et ce sont ces éléments de nœud invisibles qui sont souvent l'une des cibles sur lesquelles nous devons opérer dans le développement réel. Alors comment obtenir des éléments invisibles en utilisant jQuery ?

1. Analyse de type des éléments invisibles

Dans jQuery, il existe quatre éléments invisibles courants : l'affichage n'est aucun, la visibilité est masquée, la largeur ou la hauteur de l'élément est de 0, ou il est en dehors de l'écran (le haut ou la gauche est passé trop grand). ou trop petit).

1. L'affichage est nul

Ces éléments existent dans la page HTML, mais ils ne sont pas affichés sur la page et n'occupent pas l'espace de mise en page.

Par exemple, dans l'exemple de code ci-dessous en HTML, bien qu'il y ait deux éléments div, un seul div est visible sur la page :

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

2 La visibilité est masquée

Cette partie de l'élément est similaire à l'affichage. type aucun, mais l'élément est invisible et occupe de l'espace de mise en page sur la page. Par exemple, dans l'exemple de code ci-dessous en HTML, bien qu'il y ait deux éléments div, les deux div occupent l'espace de mise en page sur la page, mais l'un est visible et l'autre est invisible :

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

3. La largeur ou la hauteur de l'élément est de 0

Dans ce cas, la mise en page occupée par l'élément n'affectera pas la mise en page de la page, mais comme la largeur ou la hauteur est de 0, nous ne pouvons pas trouver et utiliser directement l'élément.

Par exemple, dans l'exemple de code ci-dessous en HTML, bien qu'il y ait trois éléments div, seuls deux divs sont visibles sur la page et les deux autres sont invisibles. La largeur et la hauteur de l'élément "notVisibleDiv" sont toutes deux égales à 0, il est donc invisible et ne peut pas être trouvé via les sélecteurs ordinaires :

<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 Il est en dehors de l'écran (le haut ou la gauche est trop grand ou trop petit)

Ceux-ci. les éléments sont présents. Ils existent également sur la page, mais nécessitent généralement du code JavaScript pour les trouver et les exploiter.

Par exemple, dans l'exemple de code ci-dessous en HTML, bien qu'il y ait trois éléments div, un seul div est visible sur la page et les deux autres sont invisibles. Parmi eux, la valeur gauche de l'élément "leftSidedDiv" est trop petite et se trouve en dehors de la page, tandis que la valeur gauche de l'élément "rightSidedDiv" est trop grande, et des problèmes similaires se produisent :

<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. Comment trouver des éléments invisibles avec jQuery

En raison de ces incohérences sur les éléments visibles, donc dans le processus de développement réel, nous devrons peut-être les trouver et effectuer certaines opérations, telles que l'obtention des valeurs d'attribut des éléments invisibles, la définition de nouveaux styles pour les éléments invisibles, etc.

Apprenons maintenant à trouver des éléments invisibles dans jQuery. Sur la base de l'analyse ci-dessus, nous pouvons obtenir les quatre méthodes suivantes :

1. Sélecteur

Vous pouvez utiliser le même sélecteur pour rechercher des éléments invisibles. Le périmètre de recherche portant sur l’ensemble du document, cette méthode nécessite un certain temps de calcul. Mais l’avantage est que le code est simple et facile à comprendre.

Par exemple, nous voulons obtenir l'élément "leftSidedDiv" situé à l'extérieur de l'écran :

var notVisibleEle = $('#leftSidedDiv');

2. Sélecteur de filtre

Le filtre peut filtrer les éléments qui répondent à des conditions d'attribut spécifiques.

Par exemple, nous voulons obtenir l'élément dont la valeur d'attribut de position est absolue :

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

3. Masquer ou afficher les éléments invisibles

Cela équivaut à déplacer l'élément invisible vers une plage contrôlable, puis à obtenir la valeur de l'attribut.

Par exemple, nous voulons obtenir l'élément "notVisibleDiv" avec une largeur et une hauteur de 0 :

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

4 Parcours de l'arborescence du document

jQuery peut trouver des éléments invisibles dans l'arborescence du document en parcourant. Cette approche se traduit par de meilleures performances car seule une partie de l’arborescence des documents doit être parcourue au lieu de l’intégralité de l’arborescence des documents.

Par exemple, nous voulons obtenir tous les éléments hors écran :

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

3. Application d'éléments invisibles

Maintenant que nous comprenons comment obtenir des éléments invisibles, nous pouvons l'appliquer de manière flexible dans le processus de développement réel. Vous trouverez ci-dessous quelques scénarios d'application spécifiques.

1. Modifier dynamiquement les attributs des éléments invisibles

Par exemple, l'élément div que nous avons spécifié dans la page Web était à l'origine invisible, mais lorsque la souris survole un bouton, le div doit être affiché, et lorsque la souris après suppression, cet état doit être restauré.

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

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

2. Détecter la taille des éléments invisibles

Par exemple, nous devons obtenir la taille du nœud cible et le recouvrir dans la couche flottante

<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 Obtenir les attributs des éléments invisibles et les utiliser

Pour. Par exemple, lorsque la souris est allumée. Lors du survol d'une certaine navigation, vous pouvez obtenir l'adresse de l'image sous la navigation correspondante, puis afficher l'image sur la page via une requête 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();
    }
);

Résumé :

JQuery pour obtenir des éléments invisibles implique plusieurs méthodes telles que des sélecteurs, le filtrage des sélecteurs, le masquage ou l'affichage d'éléments invisibles et la traversée de l'arborescence du document. L'application flexible de ces méthodes peut mieux répondre à nos besoins en matière de développement réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!