HTML5 แนะนำคุณสมบัติและการปรับปรุงใหม่มากมายซึ่งหนึ่งในนั้นคือความหมาย HTML5 เพิ่มองค์ประกอบใหม่เพื่อเพิ่มความหมาย ตอนนี้เราใช้เพียง 2 ส่วนหัวและส่วนท้าย แท็ก <header> กำหนดส่วนหัว (ข้อมูลแนะนำ) ของเอกสารและแท็ก <footer> กำหนดส่วนท้ายของส่วนหรือเอกสาร โดยทั่วไปองค์ประกอบนี้จะมีชื่อของผู้สร้างวันที่สร้างเอกสารและ/หรือข้อมูลการติดต่อ
[แท็กความหมายให้ข้อมูลที่มีความหมายใน HTML ไม่เพียง แต่กำหนดเอฟเฟกต์ภาพ -
สถานที่ที่ดีที่สุดในการวางรหัส JavaScriptมีเหตุผลว่าทำไมเราถึงวางรหัส JavaScript หลังจากเนื้อหาหน้าทั้งหมดก่อนแท็ก </body> แทนที่จะอยู่ในพื้นที่ <head> </head>
โดยทั่วไปแล้วเบราว์เซอร์โหลดและแสดงเนื้อหาจากบนลงล่าง หากวางรหัส JavaScript ไว้ในพื้นที่ส่วนหัวเนื้อหาของเอกสาร HTML จะไม่ถูกโหลดจนกว่าจะมีการโหลดรหัส JavaScript ทั้งหมด ในความเป็นจริงการโหลดและการแสดงผลทั้งหมดจะถูกบล็อกหากเบราว์เซอร์โหลดรหัส JavaScript ในหน้า นี่คือเหตุผลที่เราใส่รหัส JavaScript ในตอนท้ายของเอกสารเพื่อให้เราสามารถให้ประสิทธิภาพที่สูงขึ้น
เมื่อแปลหนังสือเล่มนี้เวอร์ชัน jQuery ล่าสุดคือ 1.7 (คำดั้งเดิมคือ: ในช่วงเวลาของการเขียนหนังสือเล่มนี้เวอร์ชัน jQuery ของ TheLatest คือ 1.4.4 JQuery มีรุ่นขั้นต่ำและเวอร์ชันการพัฒนาคุณสามารถเลือกได้ตามที่คุณต้องการ) นี่คือเหตุผลที่ชื่อของไฟล์ jQuery ในตัวอย่างรหัสของเราคือ jQuery-1.7.min.js หมายเลขเวอร์ชันนี้อาจไม่ทำงานตามที่คุณใช้ แต่การใช้งานเหมือนกันเว้นแต่ jQuery มีการปรับเปลี่ยนที่สำคัญเพื่อให้เวอร์ชันใหม่ไม่เข้ากันได้อีกต่อไป
เรียกใช้รหัสของเราเมื่อหน้าพร้อมเราต้องตรวจสอบให้แน่ใจว่าหน้าพร้อมก่อนเรียกใช้รหัส JavaScript ของเรา มิฉะนั้นเราจะได้รับข้อผิดพลาดเมื่อเราพยายามเข้าถึงองค์ประกอบที่ไม่ได้โหลด jQuery ให้วิธีการให้เราเพื่อให้แน่ใจว่าหน้าถูกโหลด รหัสมีดังนี้:
jQuery (เอกสาร) .ready (function () {
// codehere
-
อันที่จริงเราแค่ต้องเขียนสิ่งนี้:
$ (function () {
// codehere
-
แท็ก $ นี้เป็นตัวย่อของ jQuery เมื่อเราโทร (คำว่าเป็นความหมายของการโทร, zhuangability) $ (บางสิ่ง) เรากำลังโทรหา jqery (บางอย่าง)
$ (function_callback) เป็นตัวย่ออีกตัวสำหรับ ReadyEvent
มันเหมือนกับรหัสต่อไปนี้:
$ (เอกสาร) .ready (function_callback);
ในทำนองเดียวกันเช่นเดียวกับต่อไปนี้:
jQuery (ducment). พร้อม (function_callbak);
แบบทดสอบ1. ตำแหน่งใดที่เหมาะสมที่สุดสำหรับการวางรหัส JavaScript?
. ก่อนแท็ก <head>
ข. แทรกเข้าไปในกลางขององค์ประกอบ <head> </head>
ค. หลังจากแท็ก <body>
d. </body> ก่อนแท็ก
สร้างองค์ประกอบของเกม Pingpong
เราพร้อมที่จะสร้างเกม Pingpong
ขยับ
1. เราจะดำเนินการต่อด้วยตัวอย่างการติดตั้ง jQuery ของเราและเปิด index.html ในตัวแก้ไข
2. จากนั้นใช้โหนด div ในร่างกายเพื่อสร้างแพลตฟอร์มเกมด้วย 2 จังหวะและลูกบอลในแพลตฟอร์มเกม:
<divid = "game">
<divid = "สนามเด็กเล่น">
<divid = "paddlea" class = "paddle"> </div>
<divid = "paddleb" class = "paddle"> </div>
<divid = "ball"> </div>
</div>
</div>
3. ตอนนี้เราได้สร้างวัตถุเกมและตอนนี้ให้สไตล์แก่พวกเขา ใส่รหัสลงในองค์ประกอบหัว:
<style>
#playground {
ความเป็นมา:#e0ffe0;
ความกว้าง: 400px;
ความสูง: 200px;
ตำแหน่ง: ญาติ;
ล้น: ซ่อน;
-
#ลูกบอล{
ความเป็นมา: #FBB;
ตำแหน่ง: สัมบูรณ์;
ความกว้าง: 20px;
ความสูง: 20px;
ซ้าย: 150px;
ด้านบน: 100px;
แนวชายแดน: 10px;
-
.paddle {
ความเป็นมา: #BBF;
ซ้าย: 50px;
ด้านบน: 70px;
ตำแหน่ง: สัมบูรณ์;
ความกว้าง: 30px;
ความสูง: 70px;
-
#paddleb {
ซ้าย: 320px;
-
</style>
4. ในส่วนสุดท้ายเราวางตรรกะ JavaScript ไว้ด้านหลังการอ้างอิง jQuery เราเขียนลงในไฟล์แยกต่างหากเพราะรหัสของเราจะใหญ่ขึ้นเรื่อย ๆ ดังนั้นเราจำเป็นต้องสร้างโฟลเดอร์ชื่อ HTML5/"> HTML5Games.pingpong.js
5. หลังจากเราได้เตรียมไฟล์ JavaScript แล้วเราต้องเชื่อมต่อไฟล์ HTML ของเรา วางรหัสต่อไปนี้ไว้ที่ด้านหน้าของแท็ก </body> ของไฟล์ index.html:
<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 ลูกในเกมของเรา นอกจากนี้เรายังเริ่มต้นตำแหน่งของ 2 ไม้โดยใช้ jQuery
[นั่นคือทั้งหมดวันนี้และส่วนต่อไปคือเกี่ยวกับฟังก์ชัน jQuery Selector และ CSS หากคุณมีข้อผิดพลาดหรือคำถามใด ๆ โปรดฝากข้อความถึงฉัน]
การเห็นความคิดเห็นของคุณเป็นแรงจูงใจที่ยิ่งใหญ่ที่สุดของฉัน!