jqueryの隠し要素とは何ですか

jQuery での要素の非表示は非常に重要な概念です。jQuery を使用して要素を非表示にする前に、まず CSS スタイルの非表示要素のプロパティ (表示、可視性、不透明度、その他のプロパティなど) を理解する必要があります。その中で、display:none は要素を完全に非表示にしてドキュメント フローを占有せず、visibility:hidden は要素を非表示にするがドキュメント フローを占有し、opacity はドキュメントを占有する要素の位置に影響を与えることなく要素の透明度を変更します。

このチュートリアルのオペレーティング システム: Windows 10 システム、jQuery 3.6.4 バージョン、Dell G3 コンピューター。

jQuery は、HTML ドキュメントの走査、イベント処理、アニメーション、および Ajax 操作を簡素化する、非常に人気のある JavaScript ライブラリです。 jQuery において隠し要素は非常に重要な概念ですが、この記事では jQuery の隠し要素の使い方を CSS スタイル、jQuery の関数、メソッド、取得、制御、判断、選択など多方面から詳しく解説します。

1. CSS スタイル

jQuery を使用して要素を非表示にする前に、まず、表示、可視性、不透明度など、非表示の要素に関する CSS スタイルのプロパティを理解する必要があります。およびその他のプロパティ。このうち、display:none は要素が完全に非表示でドキュメント フローを占有しないことを意味し、visibility:hidden は要素が非表示だがドキュメント フローを占有することを意味します。不透明度は要素の透明度を変更しますが、ドキュメント内の要素の位置には影響しません。

2. jQuery 関数

jQuery は、.hide() 関数や .show() 関数など、要素を非表示にするための基本的な関数をいくつか提供します。 .hide() 関数は一致する要素を非表示にするために使用され、.show() 関数は一致する要素を表示するために使用されます。

3. jQuery で要素を非表示にする方法

jQuery で要素を非表示にする方法は多数あり、CSS を使用するなど、実際のニーズに応じてさまざまな方法を選択できます。スタイルと jQuery 関数、クラス メソッド。

CSS スタイルと 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();

クラス

CSS で非表示要素のクラスを定義し、jQuery を使用してクラスを追加または削除して、非表示または表示します。要素。

/* 在CSS中定义隐藏元素的类 */
.hide { display: none; }
/* 使用addClass()函数来添加该类 */
$(element).addClass("hide");
/* 使用removeClass()函数来删除该类 */
$(element).removeClass("hide");

4. jQuery の隠し要素の取得

実際の開発では、隠し要素を取得し、関連する操作を行う必要があります。 jQuery が提供する次の関数を使用して、非表示要素を取得できます: .is(":hidden")、.not(":visible")、.filter(":hidden") など。

.is() 関数を使用して要素が非表示かどうかを判断します

/* 判断元素是否被隐藏 */
if ($(element).is(":hidden")) {
    // 隐藏时的操作
} else {
    // 显示时的操作
}

.not() 関数を使用して非表示でない要素を除外します

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

.filter() 関数を使用して非表示の要素を除外します

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

5. jQuery コントロールの表示と非表示

実際の開発では、イベントの表示と非表示を制御する必要がある場合があります。 jQuery によって提供できる要素 次の関数が実装されています: .toggle()、.fadeIn()、.fadeOut() など。

.toggle() 関数を使用して要素の状態を切り替えます

/* 在按钮点击时切换元素的显示状态 */
$("#toggleBtn").click(function() {
    $("div").toggle();
});

.fadeIn() 関数を使用して要素をフェードインします

/* 在按钮点击时淡入元素 */
$("#fadeInBtn").click(function() {
    $("div").fadeIn();
});

.fadeOut を使用します() 要素をフェードアウトする関数

/* 在按钮点击时淡出元素 */
$("#fadeOutBtn").click(function() {
    $("div").fadeOut();
});

6. jQuery は表示と非表示を決定します

実際の開発では、要素が現在表示されているかどうかを判断する必要がある場合があります。これを実現するには、次のメソッドを使用できます。

.is() 関数を使用して要素が非表示かどうかを判断します

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

.css() 関数を使用して要素の表示属性を取得します

/* 获取元素的display属性 */
var display = $(element).css("display");
if (display == "none") {
    // 元素是隐藏的
} else {
    // 元素是显示的
}

7. jQuery の表示と非表示

実際の開発では、特定の条件下で要素を非表示または表示する必要がある場合がありますが、これを実現するには次の方法を使用します。

.hide() 関数を使用して要素を非表示にします

/* 在条件成立时隐藏元素 */
if (condition) {
    $(element).hide();
}

.show() 関数を使用して要素を表示します

/* 在条件成立时显示元素 */
if (condition) {
    $(element).show();
}

.toggle() 関数を使用して要素を切り替えますelement state

/* 在按钮点击时切换元素的显示状态 */
$("#toggleBtn").click(function() {
    $("div").toggle();
});

8. 要素の選択

実際の開発では、関連する操作を実行するために指定された要素を選択する必要があります。 jQuery が提供する関数 .eq()、.siblings()、.next()、.prev() などを選択に使用できます。

.eq() 関数を使用して、指定された添え字を持つ要素を選択します。

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

.siblings() 関数を使用して、兄弟要素を選択します。

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

を使用します。 next() 関数を使用して次の兄弟要素を選択します

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

.prev() 関数を使用して前の兄弟要素を選択します

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

以上がjqueryの隠し要素とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。