beginning_jquery.pdf

(3418 KB) Pobierz
For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
Contents at a Glance
Foreword ...........................................................................................................................xiii
About the Author ................................................................................................................
xv
About the Technical Reviewer ..........................................................................................
xvii
Acknowledgments .............................................................................................................
xix
■
Chapter 1: JavaScript You Need to Know ..........................................................................1
■
Chapter 2: The Basics of jQuery ......................................................................................15
■
Chapter 3: Traversing the DOM ........................................................................................29
■
Chapter 4: DOM Manipulation with jQuery ......................................................................43
■
Chapter 5: An Introduction to Events...............................................................................59
■
Chapter 6: More Events ...................................................................................................71
■
Chapter 7: Animation .......................................................................................................83
■
Chapter 8: Ajax with jQuery...........................................................................................103
■
Chapter 9: Writing a jQuery Plug-in...............................................................................121
■
Chapter 10: More jQuery Plug-ins .................................................................................139
■
Chapter 11: A jQuery Image Slider ................................................................................157
Index .................................................................................................................................179
v
Chapter 1
JavaScript You Need to Know
jQuery is a framework that’s built on top of JavaScript, not a language in its own right. It is possible to write jQuery
with barely any knowledge of JavaScript, but it’s not something I would recommend. If you want to be able to
confidently write jQuery plug-ins for your site, or alter plug-ins others have written, you need to be familiar with basic
JavaScript. This is why I’m starting with JavaScript that you need to know. This chapter will cover:
•฀
•฀
•฀
•฀
•฀
•฀
JavaScript scripts on a web page
Variables and objects in JavaScript
JavaScript functions
Conditionals
Looping over arrays and objects
Debugging JavaScript
If you are familiar with JavaScript, you might feel like skipping this chapter. That’s fine, but please consider
skimming it first to ensure that you are comfortable with everything covered. Resist the temptation to skip to the
jQuery parts—because you will struggle with it. Trust me, in a couple of chapters’ time, this will all seem worth
it. Many developers I’ve helped online have dived into jQuery eagerly before becoming stuck due to a lack of
understanding the language jQuery is built on. When you’re writing jQuery, you’re writing JavaScript, but using the
jQuery library. I cannot stress how important it is that you make sure the content covered in this chapter is content
that you are comfortable with before moving on. I suggest that you try out the code as you go through. Don’t fool
yourself into thinking you understand it because you’ve read it; there is no substitute for typing out the code yourself.
To run the code, I recommend JS Console (www.jsconsole.com), a tool by Remy Sharp that allows you to execute
JavaScript and see the results. You can enter the code in the top bar and hit Enter to see the results. This is really useful
for short lines of code. Figure
1-1
shows an example of JS Console.
1
CHAPTER 1
■
JAVASCRIPT YOU NEED TO KNOW
Figure 1-1.
Running the code alert (“Jack”) and viewing the results on JS Console
For larger pieces of code, it’s best to set up an
index.html
page and include your JavaScript file in there. I’ll
explain how to do that in the next section of this chapter. Throughout this chapter, I will often use the alert function to
demonstrate the value of a certain variable. This is purely used for demonstration of concepts. In real life when I need
to check the variable, I don’t ever use alerts—I use a browser’s JavaScript console. The reason for using alerts for basic
examples is that it’s much easier to get started with. There’s no need to load up the developer tools, which take time to
get accustomed to. Once you progress into more complex code, you will spend time exploring the developer tools. At
the end of this chapter, I’ll show you exactly how I do that, before moving on to jQuery.
Using JavaScript on a Web Page
When you have a basic web page and wish to add some JavaScript to run, you have two options. First, you can add
your code inline, within a
script
tag, like so:
<script type="text/javascript">
//write code here
</script>
Or, you can create an external JavaScript file with the
.js
file extension and then load it in, again through the
script
tag:
<script type="text/javascript" src="path/to/your/file.js"></script>
Note that you have to close the
script
tag. Even though there’s nothing between it, it’s not a self-closing tag.
Within your JS file, you are free to write JavaScript.
Within a typical HTML file, there are typically two places people use to load their external JS files. The first is
within the
head,
and the second is just before the closing
</body>
tag. In the past, scripts were always loaded into the
head
element, but with performance and page loading speeds more critical than ever, it’s often recommended to place
your scripts at the bottom of your page. This is an approach I side with, too.
The browser renders the page from top to bottom, and when it comes across your scripts, it pauses rendering
the page to load in your JS. Thus, the page loads slower (or, more importantly, feels that way to the user) because the
2

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin