After you have decided which approach you want to take — either downloading a library or using a hosted version of jQuery — you need to set it up in your Web page. The jQuery library can be included within script tags and live in between the <head></head> tags of your HTML document, or you can include the jQuery library before your closing </body> tag. You must include any CSS (cascading style sheets) before the jQuery library and jQuery custom code because you want to ensure that all CSS is applied to the DOM (Document Object Model) before you try to change it with jQuery.
You should always include a doctype in your HTML pages. Failing to include a doctype causes all sorts of erratic behavior within your Web browser and causes your Web page to fail the validation suite check. It helps to ensure that your code works across all browsers. jQuery won't always render correctly if a doctype is not present on the page. CSS also renders incorrectly when a doctype is not present on the page.
All of the examples in this book use the HTML 5 doctype to ensure progressive enhancement and graceful degradation with older Web browsers. (See Chapter 1 if you need a reminder of what progressive enhancement and graceful degradation are.) The doctype for HTML5 is very simple to set up compared to previous doctypes, which are hard to remember. The following code is the doctype for HTML 5:
<!DOCTYPE html>
The following example is a very basic HTML document that outlines how to include your jQuery at the top of the page. Always include all CSS fi les fi rst to ensure that the page has rendered correctly before you try to manipulate the DOM:
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Example</title>
<link href="css/global.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//script goes here
</script>
</head>
<body>
</body>
</html>
Alternatively, you can also include your jQuery library at the bottom of the page. This can sometimes increase the speed at which your page loads because the JavaScript doesn't get hung up on loading at the top while the rest of the page continues to load. Also, this way, the entire DOM is guaranteed to load before the JavaScript is applied.
<html>
<head>
<title>My jQuery Example</title>
<link href="css/global.css"/>
</head>
<body>
<h1>Hello jQuery!</h1>
<div id="page-container">
<p>You can place your jQuery at the end of the page too!</p>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//script goes here
</script>
</body>
</html>
If you are using the Google-hosted version of the jQuery include, instead of including a relative path, insert the direct path to the library provided by Google:
<html>
<head>
<title>My jQuery Example</title>
<link href="css/global.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
//script goes here
</script>
</head>
<body>
</body>
</html>
0 comments:
Post a Comment