ホームページ >ウェブフロントエンド >jsチュートリアル >jquery が要素の非表示または表示効果を実装する方法 (コード例)
jquery が要素の非表示または表示効果を実装する方法 (コード例)
- 青灯夜游オリジナル
- 2018-10-20 14:08:254139ブラウズ
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>レンダリング:
[非表示] ボタンをクリックして、hidden() メソッドを使用します。要素:
 "154001446235636jquery が要素の非表示または表示効果を実装する方法 (コード例)")
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 メソッドを使用すると、それが Hide()、show()、toggle() などのメソッドであっても、最初に jquery.js ファイルを参照する必要があります。
概要: 上記は、要素の非表示または表示効果を実装するための jquery の内容全体です。コードは非常に簡単なので、有料で自分で試すことができます。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、
jQuery ビデオ チュートリアル、JavaScript ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。
以上がjquery が要素の非表示または表示効果を実装する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。