Menyembunyikan elemen dalam jQuery ialah konsep yang sangat penting Sebelum menggunakan jQuery untuk menyembunyikan elemen, anda perlu terlebih dahulu memahami atribut elemen yang bersembunyi dalam gaya CSS, seperti paparan, keterlihatan, kelegapan dan atribut lain. Antaranya, display:none menyembunyikan sepenuhnya elemen dan tidak menduduki aliran dokumen, visibility:hidden menyembunyikan elemen tetapi masih menduduki aliran dokumen, dan kelegapan mengubah ketelusan elemen tanpa menjejaskan kedudukan elemen yang menduduki dokumen.

Sistem pengendalian untuk tutorial ini: Sistem Windows 10, versi jQuery 3.6.4, komputer Dell G3.

jQuery ialah perpustakaan JavaScript yang sangat popular yang memudahkan traversal dokumen HTML, pengendalian acara, animasi dan operasi Ajax. Elemen tersembunyi adalah konsep yang sangat penting dalam jQuery Artikel ini akan menghuraikan penggunaan elemen tersembunyi jQuery dari pelbagai aspek seperti gaya CSS, fungsi jQuery, kaedah, pemerolehan, kawalan, pertimbangan dan pemilihan.

1. Gaya CSS

Sebelum menggunakan jQuery untuk menyembunyikan elemen, anda perlu terlebih dahulu memahami atribut elemen yang bersembunyi dalam gaya CSS, seperti paparan, keterlihatan, kelegapan dan sifat-sifat lain. Antaranya, display:none bermaksud elemen tersembunyi sepenuhnya dan tidak menduduki aliran dokumen, dan visibility:hidden bermaksud elemen tersembunyi tetapi masih menduduki aliran dokumen. Kelegapan mengubah ketelusan elemen dan tidak menjejaskan kedudukan elemen dalam dokumen.

2. Fungsi jQuery

jQuery menyediakan beberapa fungsi asas untuk menyembunyikan elemen, seperti fungsi .hide() dan .show(). Fungsi .hide() digunakan untuk menyembunyikan elemen padanan dan fungsi .show() digunakan untuk memaparkan unsur padanan.

3. Cara menyembunyikan elemen dalam jQuery

Terdapat banyak cara untuk menyembunyikan elemen dalam jQuery Anda boleh memilih kaedah yang berbeza mengikut keperluan sebenar, seperti menggunakan CSS gaya dan fungsi jQuery.

Gaya CSS dan fungsi jQuery

/* 使用display屬性來隱藏元素 */
$(element).css("display", "none");
/* 使用display屬性來顯示元素 */
$(element).css("display", "block");
/* 使用visibility屬性來隱藏元素 */
$(element).css("visibility", "hidden");
/* 使用visibility屬性來顯示元素 */
$(element).css("visibility", "visible");
/* 使用opacity屬性來改變元素的透明度 */
$(element).css("opacity", "0");
/* 使用opacity屬性來恢復元素的透明度 */
$(element).css("opacity", "1");
/* 使用.hide()函數(shù)來隱藏元素 */
$(element).hide();
/* 使用.show()函數(shù)來顯示元素 */
$(element).show();

Kelas

Tentukan kelas elemen tersembunyi dalam CSS, dan kemudian gunakan jQuery untuk menambah atau memadam kelas untuk menyembunyikan atau menunjukkan unsur.

/* 在CSS中定義隱藏元素的類 */
.hide { display: none; }
/* 使用addClass()函數(shù)來添加該類 */
$(element).addClass("hide");
/* 使用removeClass()函數(shù)來刪除該類 */
$(element).removeClass("hide");

4. Mendapatkan elemen tersembunyi jQuery

Dalam pembangunan sebenar, adalah perlu untuk mendapatkan elemen tersembunyi dan melaksanakan operasi yang berkaitan. Anda boleh menggunakan fungsi berikut yang disediakan oleh jQuery untuk mendapatkan elemen tersembunyi: .is(":hidden"), .not(":visible"), .filter(":hidden"), dsb.

Gunakan fungsi .is() untuk menentukan sama ada elemen itu tersembunyi

/* 判斷元素是否被隱藏 */
if ($(element).is(":hidden")) {
    // 隱藏時的操作
} else {
    // 顯示時的操作
}

Gunakan fungsi .not() untuk menapis elemen bukan tersembunyi

/* 獲取非隱藏的元素 */
var visibleElements = $("div").not(":hidden");

Gunakan Fungsi .filter() untuk menapis elemen Tersembunyi

/* 獲取隱藏的元素 */
var hiddenElements = $("div").filter(":hidden");

5. jQuery mengawal paparan dan penyembunyian

Dalam pembangunan sebenar, anda mungkin perlu mengawal acara untuk dipaparkan dan disembunyikan elemen, yang boleh disediakan oleh jQuery Fungsi berikut dilaksanakan: .toggle(), .fadeIn(), .fadeOut(), dsb.

Gunakan fungsi .toggle() untuk menukar keadaan elemen

/* 在按鈕點擊時切換元素的顯示狀態(tài) */
$("#toggleBtn").click(function() {
    $("div").toggle();
});

Gunakan fungsi .fadeIn() untuk pudar dalam elemen

/* 在按鈕點擊時淡入元素 */
$("#fadeInBtn").click(function() {
    $("div").fadeIn();
});

Gunakan .fadeOut () berfungsi untuk memadamkan elemen

/* 在按鈕點擊時淡出元素 */
$("#fadeOutBtn").click(function() {
    $("div").fadeOut();
});

6. jQuery menentukan paparan dan menyembunyikan

Dalam pembangunan sebenar, anda mungkin perlu menentukan sama ada elemen sedang dipaparkan atau tersembunyi. Anda boleh menggunakan kaedah berikut untuk mencapainya.

Gunakan fungsi .is() untuk menentukan sama ada elemen disembunyikan

/* 判斷元素是否被隱藏 */
if ($(element).is(":hidden")) {
    // 元素是隱藏的
} else {
    // 元素是顯示的
}

Gunakan fungsi .css() untuk mendapatkan atribut paparan elemen

/* 獲取元素的display屬性 */
var display = $(element).css("display");
if (display == "none") {
    // 元素是隱藏的
} else {
    // 元素是顯示的
}

7. Paparan Sembunyikan jQuery

Dalam pembangunan sebenar, anda mungkin perlu menyembunyikan atau menunjukkan elemen di bawah keadaan tertentu Anda boleh menggunakan kaedah berikut untuk mencapainya.

Gunakan fungsi .hide() untuk menyembunyikan elemen

/* 在條件成立時隱藏元素 */
if (condition) {
    $(element).hide();
}

Gunakan fungsi .show() untuk memaparkan elemen

/* 在條件成立時顯示元素 */
if (condition) {
    $(element).show();
}

Gunakan fungsi .toggle() untuk tukar keadaan elemen

/* 在按鈕點擊時切換元素的顯示狀態(tài) */
$("#toggleBtn").click(function() {
    $("div").toggle();
});

8 Pilih elemen

Dalam pembangunan sebenar, anda perlu memilih elemen yang ditentukan untuk melaksanakan operasi yang berkaitan. Anda boleh menggunakan fungsi berikut yang disediakan oleh jQuery untuk pemilihan: .eq(), .siblings(), .next(), .prev(), dsb.

Gunakan fungsi .eq() untuk memilih elemen dengan subskrip yang ditentukan

/* 選取第1個div元素 */
var firstDiv = $("div").eq(0);

Gunakan fungsi .siblings() untuk memilih elemen adik beradik

/* 選取div元素的同級元素 */
var siblings = $("div").siblings();

Gunakan . next() fungsi untuk memilih elemen adik beradik seterusnya

/* 選取div元素的下一個兄弟元素 */
var nextElement = $("div").next();

menggunakan fungsi .prev() untuk memilih elemen adik beradik sebelumnya

/* 選取div元素的上一個兄弟元素 */
var prevElement = $("div").prev();

Atas ialah kandungan terperinci Apakah elemen tersembunyi dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!