Apakah elemen tersembunyi dalam jquery

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()函数来隐藏元素 */
$(element).hide();
/* 使用.show()函数来显示元素 */
$(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()函数来添加该类 */
$(element).addClass("hide");
/* 使用removeClass()函数来删除该类 */
$(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

/* 在按钮点击时切换元素的显示状态 */
$("#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

/* 在按钮点击时切换元素的显示状态 */
$("#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!