ホームページ > 記事 > ウェブフロントエンド > jQuery は div の表示、非表示、テキストの充填を実装します。
jQuery は div の表示、非表示、テキストの充填を実装します。
- 善始善终オリジナル
- 2020-08-26 22:25:362134ブラウズ
ネイティブ JavaScript プログラミングを使用すると、多くの欠点があることがわかりました: たとえば、要素を取得するのが不便で、場合によってはトラバースが必要になります。トラバーサルでネストが発生する可能性があり、コードがより複雑になり、耐性が低いです。今日は、jQuery を使用して最初の Web ページを実装する方法を説明します。
(1) HTML レイアウト ページを使用する
1) プロジェクト Pro_01 を作成し、プロジェクトの下に Web ページを作成し、index.html という名前を付けます。
2) HTML 内ページ 3 つのボタンを追加します;
<input type="button" value="显示" id="show" /> <input type="button" value="隐藏" id="hide" /> <input type="button" value="内容填充" id="text"/>
3) HTML ページに 3 つの DIV タグを追加します;
<div></div> <div></div> <div></div>
(2) CSS を使用してページを美しくします
1) この下に作成しますプロジェクト css フォルダー;
2) CSS ファイルを作成し、style.css という名前を付け、index.html の 36cc49f0c466276486e50c850b7e4956 タグの前にファイルをインポートします。
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>3) style.css ファイルの下にページ スタイルを追加します。
- #グローバル スタイル
*{
margin: 0;
padding: 0;
}
- div style
div{
width:500px;
height:100px;
border:1px solid #a5b6c8;
background:#eef3f7;
display: none;
}4) F12 を押してページ効果を参照します。 (3) jQuery ファイルの導入1) 公式 Web サイト (https://jquery.com/download/) から jquery-3.5.1.js ファイルをダウンロードします。 #2) ダウンロードが完了したら、プロジェクトの下に js フォルダーを作成し、ダウンロードした jquery-3.5.1js ファイルを js フォルダーに置きます;
注: この場合に使用される jQuery のバージョンは次のとおりです。 3.5.1 の場合、jQuery ライブラリ ファイルは js フォルダーの下に配置されますが、デバッグを容易にするために相対パスが使用されます。
3) このファイルを、index.html の 36cc49f0c466276486e50c850b7e4956 タグの前に挿入します。
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
(4) エフェクトの実装
1)index.html ページの 36cc49f0c466276486e50c850b7e4956 タグの前に 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 タグを作成します;
(2) 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0タグ内にエントリー関数を記述する
$(document).ready(function(){
});Note:
jQueryエントリー関数とJavaScriptエントリー関数の違い:
- jQuery のエントリ関数は、すべての HTML タグ (DOM) が読み込まれた後に実行されます。
- JavaScript の window.onload イベントは、外部画像などのファイルを含むすべてのコンテンツが読み込まれるまで待機してから実行されます。
- #(3) エントリー関数
-
$('#show').click(function(){ $("div").show(); });## にイベントを登録します。 # Hide
$('#hide').click(function(){ $("div").hide(); }Text Fill
$('#text').click(function(){ $("div").text("内容填充"); });(4) 按F12浏览页面效果。注: ダウンロードして保存したくない場合は、 jQuery を使用すると、CDN (Content Delivery Network) 経由で参照することもできます。 Staticfile CDN、Baidu、Youpaiyun、Sina、Google、Microsoft はすべて、サーバー上に jQuery を搭載しています。サイト ユーザーが国内の場合は、Baidu、Youpaiyun、Sina などの国内 CDN アドレスを使用することをお勧めします。サイト ユーザーが海外の場合は、Google と Microsoft を使用できます。たとえば、Baidu の CDN を使用する場合は、次の方法を使用できます:
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
以上がjQuery は div の表示、非表示、テキストの充填を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。