Html5 introduces many new features and improvements, one of which is semantics. Html5 adds new elements to enhance semantics. We are now using only 2, header and footer. The <header> tag defines the header (introduction information) of the document, and the <footer> tag defines the footer of the section or document. Typically, this element will contain the creator's name, the date of creation of the document, and/or contact information.
[Semantic tags provide meaningful information in HTML, not just define visual effects. ]
The best place to place JavaScript codeThere is a reason why we place JavaScript code after all page content before the </body> tag, rather than in the <head></head> area.
Typically, browsers load and render content from top to bottom. If JavaScript code is placed in the head area, the contents of the Html document will not be loaded until all JavaScript code is loaded. In fact, all loading and rendering are blocked if the browser loads the JavaScript code in the page. This is why we put JavaScript code at the end of the document so that we can provide higher performance.
When translating this book, the latest jQuery version is 1.7 (the original words are: Atthetime of writing this book, thelatest jQuery version is 1.4.4. JQuery has min version and development version, you can choose as you like). This is why the name of the jQuery file in our code example is jquery-1.7.min.js. This version number may not work as you use, but the usage is the same unless jQuery has major modifications to make the new version no longer backward compatible.
Run our code once the page is readyWe need to make sure the page is ready before running our JavaScript code. Otherwise, we will get an error when we try to access elements that are not loaded. jQuery provides us with a method to ensure that the page is loaded. The code is as follows:
jQuery(document).ready(function(){
//codehere.
});
In fact, we just need to write this:
$(function(){
//codehere.
});
This $ tag is the abbreviation of jQuery. When we call (the word is the meaning of call, zhuangability) $(something), we are actually calling jQery(something).
$(function_callback) is another abbreviation for readyevent.
It is the same as the following code:
$(document).ready(function_callback);
Similarly, the same as the following:
jQuery(ducment).ready(function_callbak);
Quiz1. Which location is most suitable for placing JavaScript code?
a. Before the <head> tag
b. Insert into the middle of the <head></head> element.
c. After the <body> tag
d.</body>Before tag
Create elements of PingPong game
We're ready to create a PingPong game.
Get moving
1. We will continue with our jQuery installation example and open index.html in the editor.
2. Then, use the DIV node in the body to create a game platform, with 2 beats and a ball in the game platform:
<divid="game">
<divid="playground">
<divid="paddleA"class="paddle"></div>
<divid="paddleB"class="paddle"></div>
<divid="ball"></div>
</div>
</div>
3. We have now built the game objects and now give them styles. Put the code into the head element:
<style>
#playground{
background:#e0ffe0;
width:400px;
height:200px;
position:relative;
overflow:hidden;
}
#ball{
background:#fbb;
position:absolute;
width:20px;
height:20px;
left:150px;
top:100px;
border-radius:10px;
}
.paddle{
background:#bbf;
left:50px;
top:70px;
position:absolute;
width:30px;
height:70px;
}
#paddleB{
left:320px;
}
</style>
4. In the last part, we place the JavaScript logic behind the jQuery reference. We write it into a separate file because our code will get bigger and bigger. Therefore, we need to create a folder named HTML5/">html5games.pingpong.js.
5. After we have prepared the JavaScript files, we need to connect them to our HTML file. Place the following code in front of the </body> tag of the index.html file:
<scriptsrc="js/jquery-1.7.min.js"></script>
<scriptsrc="js/html5games.pingpong.js"></script>
[Translator's friendly tip: Try it
<scriptsrc="js/jquery-1.4.4.js"/>
<scriptsrc="js/html5games.pingpong.js"/>
You will find that writing according to the specifications will avoid a lot of trouble]
6. We put the game logic into html5games.pingpong.js. Here is our only logic now, initializing the racket:
//codeinside$(function(){}willrunaftertheDOMisloadedand
ready
$(function(){
$("#paddleB").css("top","20px");
$("#paddleA").css("top","60px");
});
7. Now let's test our results in the browser. Open the index.html file in the browser, we should see a screenshot similar to the following screenshot:
what happened?There are 2 rackets and 1 ball in our game. We also initialized the position of 2 rackets using jQuery.
[That's all today, and the next part is about jQuery selector and CSS function. If you have any errors or questions, please leave me a message]
Seeing your comments is my greatest motivation!