jquery が要素の非表示または表示効果を実装する方法 (コード例)-jsチュートリアル-php.cn

jquery が要素の非表示または表示効果を実装する方法 (コード例)

青灯夜游

リリース： 2018-10-20 14:08:25

オリジナル

4110 人が閲覧しました

jquery は要素の非表示または表示効果をどのように実装しますか?この記事では、jquery で要素の非表示と表示を設定する方法を紹介し、要素の非表示と表示の切り替え効果を実現する方法を理解します。困っている友人は参考にしていただければ幸いです。

jquery で要素の非表示と表示効果を実装するには、次の 2 つの方法があります。

1. 要素の非表示と表示には、hide() メソッドと show() メソッドを使用します。 ##2、 toggle() メソッドを使用して要素の非表示と表示を行います。

これら 2 つのメソッドが要素の非表示と表示をどのように実装するかを見てみましょう。

hide() メソッドと show() メソッドは要素の非表示と表示を実装しますjquery の Hide() メソッドは要素を非表示にするために使用されます

jquery の show() メソッドは、要素を表示するために使用されます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		    $(".btn1").click(function(){
		        $("p").hide();
		    });
		    $(".btn2").click(function(){
		        $("p").show();
		    });
		});
		</script>
	</head>
	<body>
		<p>这是一段测试文字。</p>
		<button class="btn1">Hide--隐藏</button>
		<button class="btn2">Show--显示</button>
	</body>

</html>

ログイン後にコピー

レンダリング:

jquery が要素の非表示または表示効果を実装する方法 (コード例) [非表示] ボタンをクリックして、hidden() メソッドを使用します。要素:

jquery が要素の非表示または表示効果を実装する方法 (コード例) # [表示] ボタンをクリックすると、show() メソッドを使用して非表示の要素を表示できます:

jquery が要素の非表示または表示効果を実装する方法 (コード例)

toggle() メソッドは要素の非表示と表示を実装します (非表示と表示の切り替え) toggle() メソッドは要素の表示状態を切り替えることができます。 : 要素の非表示または表示を切り替えます。

toggle() メソッドは、要素を非表示にするか表示するかを決定します。選択した要素が表示されている場合、これらの要素は非表示になります。選択した要素が非表示になっている場合、これらの要素は表示されます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		    $(".btn").click(function(){
		        $("p").toggle();
		});
		</script>
	</head>
	<body>
		<p>这是一段测试文字。</p>
		<button class="btn">toggle()</button>
	</body>
</html>

ログイン後にコピー

レンダリング:

jquery が要素の非表示または表示効果を実装する方法 (コード例) 注: jquery メソッドを使用すると、それが Hide()、show()、toggle() などのメソッドであっても、最初に jquery.js ファイルを参照する必要があります。