kaedah jquery dan aplikasi untuk mendapatkan elemen yang tidak kelihatan

Dengan pembangunan dan pempopularan teknologi rangkaian, semakin banyak aplikasi tapak web telah mula menggunakan teknologi halaman dinamik, antaranya rangka kerja JavaScript jQuery adalah yang paling banyak digunakan. Dalam jQuery, mendapatkan elemen adalah salah satu operasi paling asas. Walau bagaimanapun, sesetengah elemen nod mungkin menjadi tidak kelihatan disebabkan oleh beberapa tetapan gaya atau sekatan kedudukan, dan elemen nod tidak kelihatan inilah yang sering menjadi salah satu sasaran yang perlu kita kendalikan dalam pembangunan sebenar. Jadi bagaimana untuk mendapatkan elemen yang tidak kelihatan menggunakan jQuery?

1. Jenis analisis unsur halimunan

Dalam jQuery, terdapat empat elemen halimunan biasa: paparan tiada, keterlihatan tersembunyi, lebar atau tinggi elemen ialah 0, atau sendiri di luar skrin (atas atau kiri terlalu besar atau kecil).

1. Paparan tiada

Elemen ini wujud dalam halaman HTML, tetapi ia tidak dipaparkan pada halaman dan tidak menempati ruang reka letak halaman.

Sebagai contoh, dalam contoh kod di bawah dalam HTML, walaupun terdapat dua elemen div, hanya satu div kelihatan pada halaman:

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

2 Keterlihatan disembunyikan

Bahagian elemen ini serupa dengan jenis paparan tiada, tetapi elemen ini tidak kelihatan dan akan menduduki ruang reka letak halaman. Sebagai contoh, dalam contoh kod di bawah dalam HTML, walaupun terdapat dua elemen div, kedua-dua div menduduki ruang susun atur pada halaman, tetapi satu kelihatan dan satu lagi tidak kelihatan:

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

3. The lebar atau tinggi elemen ialah 0

Dalam kes ini, susun atur yang diduduki oleh elemen tidak akan menjejaskan reka letak halaman, tetapi kerana lebar atau tinggi ialah 0, kami tidak boleh mencari dan mengendalikan elemen secara langsung .

Sebagai contoh, dalam contoh kod di bawah dalam HTML, walaupun terdapat tiga elemen div, hanya dua div kelihatan pada halaman dan dua lagi tidak kelihatan. Lebar dan tinggi elemen "notVisibleDiv" kedua-duanya adalah 0, jadi ia tidak kelihatan dan tidak boleh ditemui melalui pemilih biasa:

<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 di luar skrin (atas atau kiri terlalu besar atau terlalu kecil) )

Elemen ini juga wujud dalam halaman, tetapi biasanya anda perlu menggunakan kod JavaScript untuk mencari dan mengendalikannya.

Sebagai contoh, dalam contoh kod di bawah dalam HTML, walaupun terdapat tiga elemen div, hanya satu div kelihatan pada halaman dan dua lagi tidak kelihatan. Antaranya, nilai kiri elemen "leftSidedDiv" adalah terlalu kecil dan berada di luar halaman, manakala nilai kiri elemen "rightSidedDiv" terlalu besar, dan masalah serupa berlaku:

<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 . Bagaimana untuk mencari elemen halimunan dengan jQuery

Oleh kerana terdapat unsur halimunan ini, semasa proses pembangunan sebenar, kita mungkin perlu mencarinya dan melaksanakan operasi tertentu, seperti mendapatkan nilai atribut unsur halimunan, menetapkan gaya baharu untuk unsur halimunan, dsb.

Sekarang mari belajar cara mencari elemen halimunan dalam jQuery. Berdasarkan analisis di atas, kita boleh mendapatkan empat kaedah berikut:

1. Pemilih

boleh menggunakan pemilih yang sama untuk mencari elemen yang tidak kelihatan. Memandangkan skop carian ialah keseluruhan dokumen, kaedah ini memerlukan masa pengiraan tertentu. Tetapi kelebihannya ialah kodnya ringkas dan mudah difahami.

Sebagai contoh, kami ingin mendapatkan elemen "leftSidedDiv" yang terletak di luar skrin:

var notVisibleEle = $('#leftSidedDiv');

2 Pemilih penapis

Penapis boleh menapis unsur-unsur itu memenuhi elemen syarat atribut tertentu.

Contohnya, kita ingin mendapatkan elemen yang nilai atribut kedudukannya adalah mutlak:

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

3 Sembunyikan atau tunjukkan elemen tidak kelihatan

Ini bersamaan dengan memindahkan elemen halimunan kepada julat yang boleh dikawal, dan kemudian dapatkan nilai atribut.

Sebagai contoh, kami ingin mendapatkan elemen "notVisibleDiv" dengan lebar dan ketinggian 0:

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

4 Melintasi pepohon dokumen

jQuery boleh melintasi Cari unsur halimunan dalam pepohon dokumen. Pendekatan ini menghasilkan prestasi yang lebih baik kerana hanya sebahagian daripada pepohon dokumen yang perlu dilalui dan bukannya keseluruhan pepohon dokumen.

Sebagai contoh, kami ingin mendapatkan semua elemen luar skrin:

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

3 Penerapan elemen halimunan

Selepas memahami cara mendapatkan unsur halimunan, kita boleh. Aplikasi fleksibel dalam proses pembangunan sebenar. Di bawah ialah beberapa senario aplikasi khusus.

1 Ubah suai atribut unsur halimunan secara dinamik

Sebagai contoh, elemen div yang kami nyatakan dalam halaman web pada asalnya tidak kelihatan, tetapi apabila tetikus menuding pada butang, Div ini perlu dipaparkan, dan apabila tetikus dialihkan, keadaan ini perlu dipulihkan.

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

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

2 Kesan saiz elemen yang tidak kelihatan

Sebagai contoh, kita perlu mendapatkan saiz nod sasaran dan menutupnya ke dalam lapisan terapung

<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 Dapatkan atribut unsur halimunan dan lakukan operasi

Sebagai contoh, apabila tetikus melayang di atas navigasi tertentu, anda boleh mendapatkan alamat imej di bawah navigasi yang sepadan, dan kemudian. membuat permintaan Ajax Gambar dipaparkan pada halaman.

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

Ringkasan:

jQuery mendapatkan unsur halimunan melibatkan berbilang kaedah seperti pemilih, penapisan pemilih, menyembunyikan atau menunjukkan unsur halimunan dan melintasi pepohon dokumen. Aplikasi fleksibel kaedah ini dapat memenuhi keperluan kita dengan lebih baik dalam pembangunan sebenar.

Atas ialah kandungan terperinci kaedah jquery dan aplikasi untuk mendapatkan elemen yang tidak kelihatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!