jQuery Tutorials
Getting Started / Your First jQuery Script
Subtitles of the Movie (jQuery / Getting Started / Your First jQuery Script)
Before we get into the finer points of jQuery, let's do a quick review of the basics. Many of the basics we will review here are covered in good detail in VTCs excellent Quick Start jQuery course by Rick Martin. If you new to jQuery, I highly recommend this course as we will not dwell too long on the basics, so that way I have time to cover more advanced jQuery topics. Before we begin be sure to create a workspace for practicing the code as we go through the lessons. Depending on your environment and what type of development you usually do, this might mean creating a new website in your development environment or IDE such as Dreamweaver or Eclipse. If you are a PHP developer or working with another server side scripting language, you might want to set up a virtual server, an Apache, IIS or whatever web server you use to practice or develop code. Once you have this done, we are ready to move onto the next step. The first thing we need to do is to download jQuery from jQuery.com. You can do this by clicking the downloads link on jQuery.com and follow the instructions to download. jQuery is contained in one single JavaScript file which you would save to the web folder you created in the previous step. Many developers like to keep all JavaScript files in a folder called JS or Script or you may save it in your projects root directory. Once you have your jQuery.JS file saved to your web directory, create a new HTML document and save it as basics.html and insert the line of code as shown here between the head tags of your HTML. Be sure to check that the path to the jQuery file is correct. In this example we have named the file jQuery.JS and it is saved in the JS folder under our root directory. Modify the content of this source attribute as needed to make sure it points to jQuery's correct location on your machine. It is also possible to link directly to the publicly hosted jQuery file. If you wish to do this, you may also find the URL for the latest version on the jQuery website download page. There are some disadvantages to this approach however, so the recommended method is to refer to a copy of the file on your machine. We are now going to demonstrate how to trigger jQuery code when a web page is ready. One very common and old fashioned way to trigger JavaScript events when a document is ready, is to simply call the script from the HTML body tags on load attribute as shown here on the first line. Another common way to do this is to use the Window.Onload event which is a great improvement but still has some disadvantages. The problem with either of these methods is that all of the images need to be loaded before the script will run. This can take sometimes, a very long time, especially if we are working with a very graphically rich page or one that needs to display banner ads or other slow loading content. Sometimes we are counting on our JavaScript to manipulate the appearance of a page, so we can end up displaying some things that should initially be hidden for example and there are many other reasons that we would want our JavaScript to be executed before all the media elements are loaded as well. jQuery improves on these methods by providing the Ready Function which checks to see when the HTML document or technically speaking the DOM or Document Object Model is loaded but does not wait for external elements such as images so our code will run much sooner when working with pages that contain a lot of images and other media. In this example, we show a typical use of document ready used with an anonymous function that displays the JavaScript alert. The vast majority of jQuery functions and plug-ins will be initialized using the Document Ready Function. Go ahead and add the above code highlighted in bold to your basics.html file, right before the closing head tag. Go ahead and test your file by opening it in your web browser. You should see the familiar looking JavaScript alert box displaying the famous hello world message, as soon as you view the page. If you do not see an alert box, go back to your code and double check that the path and spelling to your jQuery.JS file is correct in your script tag.
Tutorial Information
| Course: | jQuery |
| Author: | John Fontana |
| SKU: | 34277 |
| ISBN: | 978-1-61866-020-6 |
| Release Date: | 2011-11-18 |
| Duration: | 7 hrs / 102 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
