HTML5では、多くの新機能と改善が導入されています。その1つはセマンティクスです。 HTML5は、セマンティクスを強化するための新しい要素を追加します。現在、ヘッダーとフッターの2つだけを使用しています。 <header>タグはドキュメントのヘッダー（紹介情報）を定義し、<footer>タグはセクションまたはドキュメントのフッターを定義します。通常、この要素には、作成者の名前、ドキュメントの作成日、および/または連絡先情報が含まれます。
[セマンティックタグは、視覚効果を定義するだけでなく、HTMLで意味のある情報を提供します。 ]
JavaScriptコードを配置するのに最適な場所<ヘッド> </head>領域ではなく、</body>タグの前にすべてのページコンテンツの後にJavaScriptコードを配置する理由があります。
通常、ブラウザはコンテンツを上から下にロードしてレンダリングします。 JavaScriptコードがヘッドエリアに配置されている場合、すべてのJavaScriptコードがロードされるまでHTMLドキュメントの内容はロードされません。実際、ブラウザがページにJavaScriptコードをロードすると、すべてのロードとレンダリングがブロックされます。これが、より高いパフォーマンスを提供できるように、ドキュメントの最後にJavaScriptコードを配置する理由です。
この本を翻訳するとき、最新のjQueryバージョンは1.7です（元の単語は次のとおりです。この本を書くのは1.4.4です。JQueryには最小バージョンと開発バージョンがあり、好きなように選択できます）。これが、コードの例のjQueryファイルの名前がjquery-1.7.min.jsである理由です。このバージョン番号は、使用しても機能しない場合がありますが、JQueryが新しいバージョンを後方互換にしないようにする大きな変更がない限り、使用法は同じです。
ページの準備ができたら、コードを実行しますJavaScriptコードを実行する前に、ページの準備ができていることを確認する必要があります。それ以外の場合は、ロードされていない要素にアクセスしようとするとエラーが発生します。 jQueryは、ページがロードされていることを確認する方法を提供します。コードは次のとおりです。
jQuery（document）.ready（function（）{
// CodeHere。
}）;
実際、これを書く必要があります：
$（function（）{
// CodeHere。
}）;
この$タグは、jQueryの略語です。私たちが呼び出すとき（単語はコール、Zhuangabilityの意味です）$（何か）、私たちは実際にjqery（何か）を呼び出しています。
$（function_callback）は、ReadyEventのもう1つの略語です。
次のコードと同じです。
$（document）.ready（function_callback）;
同様に、以下と同じです。
jQuery（ducment）.ready（function_callbak）;
クイズ1. JavaScriptコードの配置に最も適した場所はどれですか？
a。 <head>タグの前
b。 <head> </head>要素の中央に挿入します。
c。 <body>タグの後
d。</body>タグの前
ピンポンゲームの要素を作成します
ピンポンゲームを作成する準備ができています。
動きます
1. jqueryインストールの例を継続し、編集者でindex.htmlを開きます。
2。その後、ボディのDivノードを使用して、ゲームプラットフォームに2つのビートとボールを備えたゲームプラットフォームを作成します。
<divid = "game">
<divid = "playground">
<divid = "paddlea" class = "paddle"> </div>
<divid = "paddleb" class = "paddle"> </div>
<divid = "ball"> </div>
</div>
</div>
3.ゲームオブジェクトを作成し、スタイルを提供しました。コードをヘッド要素に入れます：
<style>
＃遊び場{
背景：＃e0ffe0;
幅：400px;
高さ：200px;
位置：相対;
オーバーフロー：隠し;
}
＃ボール{
背景：#FBB;
位置：絶対;
幅：20px;
高さ：20px;
左：150px;
トップ：100px;
ボーダーラジウス：10px;
}
。パドル{
背景：#BBF;
左：50px;
上：70px;
位置：絶対;
幅：30px;
高さ：70px;
}
#paddleb {
左：320px;
}
</style>
4。最後の部分では、JavaScriptロジックをjQueryリファレンスの後ろに配置します。コードが大きくなり、大きくなるため、別のファイルに書き込みます。したがって、html5/"> html5games.pingpong.jsという名前のフォルダーを作成する必要があります。
5. JavaScriptファイルを準備したら、HTMLファイルに接続する必要があります。 index.htmlファイルの</body>タグの前に次のコードを配置します。
<scriptsrc = "js/jquery-1.7.min.js"> </script>
<scriptsrc = "js/html5games.pingpong.js"> </script>
[翻訳者のフレンドリーなヒント：試してみてください
<scriptsrc = "js/jquery-1.4.4.js"/>
<scriptsrc = "js/html5games.pingpong.js"/>
仕様に応じて書くことで多くのトラブルが回避されることがわかります]
6.ゲームロジックをhtml5games.pingpong.jsに入れます。ラケットの初期化の唯一のロジックは次のとおりです。
// codeinside $（function（）{} willrunafterthedomisloadedand
準備ができて
$（function（）{
$（ "＃paddleb"）。css（ "top"、 "20px"）;
$（ "＃paddlea"）。css（ "top"、 "60px"）;
}）;
7.次に、結果をブラウザでテストしましょう。 index.htmlファイルをブラウザで開くと、次のスクリーンショットに似たスクリーンショットが表示されます。
どうしたの？ゲームには2つのラケットと1つのボールがあります。また、jQueryを使用して2つのラケットの位置を初期化しました。
[それが今日すべてであり、次の部分はjQueryセレクターとCSS関数に関するものです。エラーや質問がある場合は、メッセージを残してください]
あなたのコメントを見ることは私の最大の動機です！