IntroductionWelcome| 00:00 | (Music playing.)
| | 00:03 | Hi! I am Joe Marini.
| | 00:05 | I would like to welcome you
to jQuery Essential Training.
| | 00:07 | In this course, I'll show how to use
jQuery, a free JavaScript Library, to
| | 00:11 | dramatically reduce the amount of code
that you to write in order to build web
| | 00:15 | pages that are modern responsive and
automatically work across browsers.
| | 00:19 | You'll see how jQuery can be used to
extract information from web pages using a
| | 00:24 | variety of simple CSS like statements.
| | 00:26 | We'll explore how jQuery makes the
creation of content manipulation and event
| | 00:31 | handling code work across browsers.
| | 00:33 | I'll show you how to use jQuery to
provide advanced user interface elements
| | 00:36 | to your website users, and build smooth
effects that used to require plug-ins to accomplish.
| | 00:40 | Whether you are new to writing
JavaScript code or a grizzled veteran web
| | 00:45 | developer looking to improve your
productivity and reduce browser specific code,
| | 00:49 | you'll find jQuery to be a
great tool to create web pages that are
| | 00:52 | polished, professional, and engaging.
| | 00:55 | There is a reason they call
jQuery the "write less, do more" library.
| | 00:59 | So if you are ready to take your
websites to the next level of interactivity,
| | 01:02 | while dramatically reducing the amount
of code you have to write in order to get there,
| | 01:06 | then let's get started
with jQuery Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you are a premium member of lynda.
com Online Training Library, or if you are
| | 00:06 | watching this tutorial on a DVD-ROM,
then you have access to the exercise files
| | 00:12 | used throughout this title.
| | 00:14 | So let me open the exercise_files folder.
| | 00:17 | The exercise files are laid
out according to the chapter.
| | 00:21 | So for each chapter, I have included the
exercise files I have used in that chapter.
| | 00:27 | So let's take a look at an example.
| | 00:30 | Essentially the exercise files
follow a couple of different conventions.
| | 00:34 | In some cases you'll see that I have got
exercise files labeled _start and _finished.
| | 00:40 | In that case, the finished version
contains the fully working example, which
| | 00:45 | you can open in your browser and look at, or
open in your code editor to see how it works.
| | 00:51 | And the start version contains the
starting point for writing the code necessary
| | 00:56 | to get to the finished state.
| | 00:58 | So if you want to open the start
version and follow along with me in each one
| | 01:03 | of the tutorials, you can write the code
along with me and arrive at the finished state.
| | 01:08 | Other files are simply complete
examples that we deconstruct during the lesson,
| | 01:13 | so that you can see how they work.
| | 01:15 | For example, this file here is
already in the finished state.
| | 01:18 | There is no starting state, and for
that particular lesson we simply open the
| | 01:22 | file in the code editor and examine how it
was written and why things work the way they do.
| | 01:29 | Now if you are a monthly subscriber or
an annual subscriber to lynda.com,
| | 01:33 | you don't have access to these exercise files.
| | 01:36 | But you can follow along from
scratch or using your own assets.
| | 01:41 | Okay, let's get started.
| | Collapse this transcript |
|
|
1. Overview of jQueryWhat is jQuery?| 00:01 | Okay so, if you are ready as I am to
write less and do more, then let's just
| | 00:06 | dive right in and get started
with jQuery Essential Training.
| | 00:10 | Let's start by talking about what jQuery is.
| | 00:13 | jQuery is a freely available Open Source
JavaScript Library and its purpose in
| | 00:18 | life is essentially to simplify the
task of creating modern web pages that are
| | 00:23 | highly interactive and responsive,
essentially full of all the Web 2.0 goodness
| | 00:28 | that you see all over the internet today.
| | 00:31 | It works across all the modern browsers.
| | 00:33 | One of the great things about jQuery
is that it abstracts away a lot of the
| | 00:38 | browser-specific features, which
allows you to concentrate on the design and
| | 00:44 | finished result that you are trying to
achieve rather than spending all your
| | 00:47 | time trying to figure out how to
achieve various effects and features within
| | 00:51 | individuals browsers.
| | 00:53 | So jQuery focuses on
doing a few things very well.
| | 00:57 | For example, jQuery makes it really
easy to get and manipulate page content.
| | 01:04 | Now normally you do this using the
Document Object Model or the DOM.
| | 01:08 | If you are not familiar with the DOM,
then lynda.com has a great title known as
| | 01:13 | JavaScript Essential Training by Dori
Smith, and you can go check that out to
| | 01:17 | learn more about the DOM.
| | 01:18 | jQuery makes that really simple.
| | 01:19 | jQuery also makes it really simple to
work with the modern browser event model,
| | 01:26 | and again this is a key part of
building modern Web 2.0 applications.
| | 01:32 | Finally, jQuery adds a pretty
sophisticated effects library that you can use
| | 01:37 | to achieve a lot of sophisticated
transitions and effects that you see in
| | 01:42 | modern websites today, things like
image fades and animations and events and
| | 01:46 | that kind of stuff.
| | 01:48 | If you take a look at how most modern
web development is done today, there are a
| | 01:53 | couple of scenarios that seems
to pop up over and over again.
| | 01:56 | They typically follow a
couple of very common patterns.
| | 01:59 | The first pattern is usually when the
page loads in the browser, there is a
| | 02:03 | bunch of setup that you have to do,
and this is usually in response to the
| | 02:08 | window load event, and jQuery provides
a really efficient way of handling this.
| | 02:13 | The second scenario that pops up
a lot looks something like this.
| | 02:16 | There is an event that happens on the browser.
| | 02:18 | The user clicks on something or they
type a key or they move the mouse over
| | 02:22 | something, and that sets off a
reaction, something along the lines of,
| | 02:26 | you retrieve the content from the page,
then you do some kind of manipulation on it.
| | 02:30 | Maybe you animate it somehow and then
you put the content back in the page.
| | 02:34 | Now this may not be followed exactly,
but the pattern is essentially along these
| | 02:39 | lines where the user does something,
and in response to that event you have to
| | 02:43 | somehow get content and manipulate it.
| | 02:45 | And jQuery makes these
scenarios really, really easy.
| | 02:49 | Some of the benefits of using jQuery are first,
jQuery leverages your existing knowledge of CSS.
| | 02:57 | So if you are already familiar with CSS,
then you will see this throughout the course.
| | 03:01 | You'll find yourself writing syntax
that looks a lot like CSS code, which makes
| | 03:05 | it really easy to pick up some
of the jQuery's best features.
| | 03:08 | jQuery is also built from the
ground up to work with sets of elements.
| | 03:14 | This is something that Document Object
Model in JavaScript is not designed to do
| | 03:18 | very well. jQuery makes it second nature.
| | 03:21 | In fact, many times you won't even
realize that you are writing code that just
| | 03:25 | by default works across sets of elements.
| | 03:27 | jQuery also allows you to perform
multiple operations on a set of elements
| | 03:32 | with just one line of code, and this
is a very powerful feature known as
| | 03:36 | Statement Chaining.
| | 03:37 | You'll see this again and
again throughout the course.
| | 03:39 | It really simplifies the way that you
work with JavaScript and elements in
| | 03:43 | the page and it's one of the
jQuery's best features and we'll see that
| | 03:47 | throughout the course.
| | 03:48 | Now as I mention before, jQuery hides
away a lot of the various browser quirks
| | 03:53 | and this allows you to
concentrate on your end result.
| | 03:56 | So you don't spend a lot of time trying
to figure out how to achieve each effect
| | 04:01 | within each individual browser.
| | 04:02 | You simply write to the jQuery
interface and jQuery handles all of the
| | 04:07 | individual browser features behind the scenes.
| | 04:10 | Finally jQuery is really extensible.
| | 04:12 | There are a lot of plug-ins available that
perform all kinds of web development tasks.
| | 04:18 | In fact, it's pretty easy to learn how to write
your own, but in many cases you won't have to.
| | 04:23 | The jQuery website contains hundreds
of plug-ins that have written by other people,
| | 04:27 | that you can just freely
download and use in your own pages.
| | 04:31 | jQuery is currently compatible with
modern versions of all the main browsers
| | 04:36 | that are in use today.
| | 04:38 | So you can use jQuery across Internet
Explorer, Safari, Chrome, Firefox and Opera.
| | 04:44 | You can see that it works with all the current
versions going back in some cases pretty far.
| | 04:49 | So you can see jQuery works with IE 6 and later.
| | 04:53 | But there are some known issues with
some of the browsers and I have listed
| | 04:56 | those here in the table.
| | 04:57 | So you can see which browsers work
well with jQuery and which ones don't.
| | 05:01 | But the main point here is that all the
main browsers that are being used today,
| | 05:05 | this should cover the vast majority of all the
browsers that your code is going to encounter.
| | 05:10 | Okay, so now that we have seen what
jQuery is, let's jump over the jQuery site
| | 05:15 | and take a look at some of the features
and see how to download and install it.
| | Collapse this transcript |
| Downloading and installing jQuery| 00:00 | Okay, let's begin by taking a look at
how we download and install jQuery onto
| | 00:04 | our computer so we can use it.
| | 00:06 | So, here I am on the jquery.com website,
and I am going to go over here to the
| | 00:11 | big Download jQuery button and click on it.
| | 00:14 | Now, there are two different versions of jQuery.
| | 00:17 | There is the compressed production
version, and then there is the uncompressed
| | 00:22 | development version.
| | 00:24 | Essentially what you do is you
usually download both of these and you use
| | 00:27 | the Development version while you're
doing your development, and then when
| | 00:31 | you're ready to upload your finished
project to your web server, you use
| | 00:35 | compressed production version.
| | 00:37 | And the reason you do that is because
the compressed, production version is
| | 00:41 | minified and compressed, and it's a
lot faster to download to your user's
| | 00:47 | computer than the
uncompressed development version.
| | 00:50 | The uncompressed development version is
also a lot more readable, so if you're
| | 00:53 | debugging, you can step
through the code a lot easier.
| | 00:56 | So, essentially what you do is you click on
the link for the one you want to download.
| | 01:00 | So for example, to download the
compressed production one, I'll just
| | 01:03 | simply click on this link.
| | 01:05 | Now what might happen when you do this,
is you might get a screen full of code
| | 01:09 | like this depending on the browser that
you are using, and the reason for this
| | 01:12 | is because the browser doesn't recognize the
.js file as something that needs to be downloaded.
| | 01:17 | So, what we need to do in
this case is let's just go back.
| | 01:20 | In this case, what I am going to do is I am
going to right-click on this link right here.
| | 01:24 | I am going to choose Save as, and then
I am going to save it as a JavaScript
| | 01:29 | file, where I want to put the result.
| | 01:33 | And in this case, I am going to put it
into the Exercise Files folder for the course.
| | 01:38 | You can see I have already got the
uncompressed development version, and I am
| | 01:42 | going to go ahead and save the minified
version, which has this .min extension
| | 01:47 | on it, and so I'll
choose Save and it comes down.
| | 01:51 | So, same thing for other browsers.
| | 01:53 | Let's go ahead over to
Firefox to see the same thing.
| | 01:56 | Okay, so here we are in Firefox.
| | 01:58 | I am going to click Download, and
I am going to click on production.
| | 02:01 | You can see the same thing happened
here. What happened was Firefox doesn't
| | 02:05 | recognize the .js as something to download.
| | 02:07 | So again, same story. Just simply
right-click or if you're on a Mac you can
| | 02:12 | Ctrl+Click and you get the
same experience. All right!
| | 02:14 | So now that we have got jQuery
downloaded, we can move on and start coding.
| | Collapse this transcript |
| Creating a simple jQuery-enabled page| 00:01 | So, now that we have downloaded jQuery
and saved it to our hard drive, we are
| | 00:04 | going to create a simple jQuery enabled page.
| | 00:07 | And for the first jQuery example, we
are going to keep things pretty simple.
| | 00:12 | So our example page is going to do three things.
| | 00:14 | It's going to include a reference to
the jQuery library that we just downloaded
| | 00:19 | and then we are going to write an event
handler and that event handler is going
| | 00:21 | to respond to the page loading up in
the browser window and it will display an
| | 00:27 | alert that indicates the event
handler was in fact called and jQuery is
| | 00:32 | therefore working and doing its thing.
| | 00:35 | So, before we do that, let's take a
look at how you do this without jQuery.
| | 00:39 | Typically, code that you want to
have executed when the page is loaded is
| | 00:43 | written something like what you see here.
| | 00:46 | So what I have done is write a runOnLoad
function and that displays an alert and
| | 00:52 | you can see I am triggering
that off the window.onload event.
| | 00:57 | Now the problem with this is that the
window's onload event only fires after
| | 01:01 | all of the page content has been downloaded
including any images that you have in the page.
| | 01:07 | It's also a lot harder to add multiple
independent onload functions because if
| | 01:13 | you want to have more than one function
run on the window onload event, you have
| | 01:18 | to cram them all into this one
function here or you have to use the DOM event
| | 01:24 | model to do that, which is
different among browsers.
| | 01:26 | Now jQuery provides a way to run the
code when the DOM of the page is actually
| | 01:31 | ready, regardless of whether all of
the content such as images has been
| | 01:36 | downloaded, and that's
called the document.ready event.
| | 01:40 | It also makes it a lot easier to write
modular independent on-load functions,
| | 01:46 | and jQuery will just chain them together.
| | 01:48 | So, let's see how to do this the jQuery way.
| | 01:50 | To do this in jQuery, you write a
document.ready event handler and it's written
| | 01:55 | like the code you see here.
| | 01:57 | So, this little dollar sign character,
that's the jQuery object and you can
| | 02:02 | write the dollar sign, you can write
jQuery and call functions off of that.
| | 02:06 | However, most of the jQuery code you'll
probably see in practices written using
| | 02:10 | this dollar sign character right
here and that's where all of jQuery's
| | 02:13 | functionality is accessed from.
| | 02:15 | So what I am doing here is writing the
jQuery object and calling the function
| | 02:19 | with a parameter of document and then
.ready, and I am passing it this anonymous
| | 02:24 | function that will display an
alert when the page is loaded.
| | 02:29 | Now if you are not familiar with
anonymous functions, I cover this subject in my
| | 02:34 | course titled Practical and Effective
JavaScript, which is also available here
| | 02:38 | on lynda.com, so you might want to
check out that title to learn a little bit
| | 02:42 | more about anonymous functions.
| | 02:44 | However, you can also just
do this the old fashioned way.
| | 02:47 | You can write an independent function,
give it a name, and then pass the name
| | 02:51 | of that function here.
| | 02:52 | I am just doing it this way because it's a
bit more succinct and concise to do it this way.
| | 02:57 | So, this function calls an alert.
| | 02:59 | It says hey, the page just loaded.
| | 03:00 | So, this code will now execute when the
DOM of the page has loaded and is ready
| | 03:06 | for use rather than just waiting for all
the page content to finish downloading.
| | 03:11 | And as I said before, another
advantage of this approach is that you can call
| | 03:15 | this document.ready function multiple
times with individual functions that
| | 03:20 | you want executed and jQuery will just chain
each one together to be called in succession.
| | 03:25 | So that allows you to write much more
modular code to run when the page gets
| | 03:30 | loaded and they can be contained
within separate JavaScript files and so on.
| | 03:35 | So now that we've seen what we are going to
do, let's jump over to the code and do that.
| | 03:40 | If you have access to the exercise files,
this is the folder they are contained
| | 03:44 | in and you can see that what I have done
is I have taken the jQuery file that we
| | 03:49 | downloaded and placed it at the root of
the exercise files because all of these
| | 03:53 | guys are going to be using this file right here.
| | 03:56 | This is that Visual Studio
documentation file that I talked about earlier.
| | 04:00 | You don't need to download
this if you are not using it.
| | 04:02 | I just happen to be using it so I put
it at the same level as the jQuery file.
| | 04:06 | So, let's go into the folder for this
chapter and you'll see a couple of example files.
| | 04:15 | This one here is called FirstjQueryPage_
start and that's the beginning of this lesson.
| | 04:21 | If you'd like, you can go ahead and
jump ahead to look at the finished version
| | 04:24 | to see how the code looks and run it
in your browser or you can just follow
| | 04:27 | along with me as we edit the file.
| | 04:30 | So, I am going to go ahead
and jump over to my code editor.
| | 04:34 | So, here we are in my editor and I
happen to be using a free version of Visual
| | 04:40 | Web Developer 2008 Express and you can
freely download that from Microsoft if
| | 04:45 | you are running on Windows, but there
is a bunch of other tools you can use.
| | 04:48 | It doesn't really matter which text
editor you are using as long as you are
| | 04:51 | comfortable with it.
| | 04:52 | So, what I am going to do is insert a
script reference to the jQuery library.
| | 04:58 | So, I am going to go ahead and type
script and the type is JavaScript and source
| | 05:10 | is equal to, I am just going to type
the little relative URL to back up to that
| | 05:14 | jQuery library which is
located up at the root level.
| | 05:18 | So that's jquery-1.3.2.js.
| | 05:27 | Now at the time I am recording this,
1.3.2 is the most current version but you
| | 05:31 | might have a later version.
| | 05:32 | So, that's what we do there.
| | 05:34 | Okay, so now I have included the jQuery library.
| | 05:36 | So now what I need to do
is write the script code.
| | 05:39 | So, writing right in the script tag
down here and this one is going to be inline,
| | 05:43 | so I am just gong to type, type= "
text/JavaScript" and now I am going to
| | 05:49 | write dollar sign, that's the jQuery
object, and I am going call the document
| | 05:55 | keyword .ready and I am
going to pass that a function.
| | 06:02 | Okay, and inside the function, I am
going to say alert ("The page just loaded!").
| | 06:15 | Okay, so now I am ready to preview
this in the browser and again depending on
| | 06:20 | the tool you are using, you know, this
will be different for you or you can just
| | 06:23 | go up to the file system and load the
page up in the browser, but I am going to
| | 06:26 | do it from right here. Choose View in
Browser and you can see that the page
| | 06:30 | comes up and sure enough the alert
shows up, says "Hey, the page just loaded!"
| | 06:34 | So, that's what happens in IE.
| | 06:37 | Let's go back and take a
look at what happens in Firefox.
| | 06:39 | Okay, so here I am going to go to
back up and choose Browse With, and we
| | 06:44 | have got Firefox right there. Say
Browse and you can see that there's Firefox
| | 06:53 | and the same thing happens.
| | 06:55 | Okay, so that's pretty much all
you need to do to write your first
| | 06:59 | jQuery enabled page.
| | 07:01 | You can see that what we did was we
included a script reference to the library
| | 07:05 | and wrote a simple function that
executes on page loads and now we are ready to
| | 07:09 | get into detailed involved jQuery coding.
| | Collapse this transcript |
| Overview of jQuery's features| 00:00 | Okay, so now we are ready to start
diving deeper into jQuery and learning about
| | 00:04 | all the great features of the library.
| | 00:06 | But before we do that, let's take a
quick look at the features of jQuery so we
| | 00:12 | can get a sense of what's going
to be coming up in the course.
| | 00:15 | jQuery's features break down pretty
much across eight major categories.
| | 00:19 | There is the Core Functionality piece,
and this piece implements pretty much the
| | 00:23 | core jQuery functions, as well as
some commonly used utility methods.
| | 00:30 | Then there is the Selection and
Traversal category, and this category includes
| | 00:35 | functions for extracting content
from documents and navigating among the
| | 00:41 | contents of the document.
| | 00:42 | This is a lot of what the DOM is
usually used for in modern web development, and
| | 00:47 | it's a very key piece of jQuery's power.
| | 00:50 | You can think of this as
the query in the jQuery name.
| | 00:55 | Then there is the Manipulation and
CSS category, and this category includes
| | 00:59 | functions for editing and
changing the contents of the document.
| | 01:03 | So, you can think of this as the
natural follow-on to the Selection and
| | 01:07 | Traversal category where in that
category you are finding content and in the
| | 01:12 | Manipulation and CSS category
you are taking that content and then
| | 01:14 | manipulating it somehow.
| | 01:16 | So, this category includes functions
for editing and changing document content
| | 01:20 | and working with CSS data such as
positioning information and so on.
| | 01:26 | That's followed by the Events category,
and this simplifies working with the
| | 01:30 | modern DOM events and provides a
lot of common Event Helper functions that
| | 01:35 | cover some common scenarios that pop
up in interaction design in web pages.
| | 01:41 | Then there is the Effects category, and
this is where things begin to get interesting.
| | 01:45 | This category contains functions for
creating some basic animations and effects,
| | 01:49 | such as hiding and showing elements,
moving things around, fading things in and
| | 01:53 | out, that kind of stuff.
| | 01:55 | Then there is the AJAX category, and
the AJAX category includes utilities for
| | 01:59 | working with AJAX, such as loading
content from remote pages, dealing with
| | 02:03 | JavaScript object notation data, and so on.
| | Collapse this transcript |
|
|
2. Retrieving Page ContentOverview of selectors and filters| 00:01 | In this section, we are going to
look at how to use jQuery to retrieve
| | 00:05 | content from the page.
| | 00:07 | In fact, you could use jQuery to do
almost nothing else more than this.
| | 00:11 | This is one of jQuery's best features.
| | 00:13 | This is something that you would
usually use the DOM for in the past and it's
| | 00:16 | one of the things that jQuery makes much easier.
| | 00:19 | We are going to start by looking at the
selectors and filters feature of jQuery.
| | 00:26 | jQuery's selectors and filters do
essentially exactly what their name
| | 00:32 | implies that they do.
| | 00:33 | They select content from the document,
so that it can be manipulated using other
| | 00:39 | functions, either jQuery functions or
native built-in JavaScript functions.
| | 00:44 | And you can think of jQuery selectors and
filters as the query part of the jQuery.
| | 00:49 | Now, the way these work is that
jQuery selectors will return an array of
| | 00:55 | objects that match the selection
criteria that you give them and the filters
| | 01:02 | will operate on a selector to further refine
the results array that the selector returns.
| | 01:09 | So essentially, you use a selector and
that will create an array of objects or
| | 01:15 | elements that are in the document and
thefilters will then further refine them.
| | 01:19 | Now, it's important to know that this array
that comes back is not a set of DOM elements.
| | 01:25 | It's a collection of jQuery objects that
are wrapped around the DOM elements and
| | 01:30 | these jQuery objects provide a
large number of predefined functions and
| | 01:35 | properties for further operating on the objects.
| | 01:39 | Now, you can get access to the
underlying DOM element for each one of these
| | 01:44 | objects, if you want to, but the whole
purpose of doing this is that you are
| | 01:48 | wrapping them in jQuery objects, so
that you have a whole bunch of convenience
| | 01:52 | functions and high-level ways of
operating on them without having to resort to
| | 01:58 | the DOM in order to do that.
| | 01:59 | So, now that we understand what
selectors and filters are, let's take a look at
| | 02:04 | how to use some of the basic
selectors and filters in jQuery.
| | Collapse this transcript |
| Using basic jQuery selectors| 00:01 | Basic jQuery selectors are based on
the familiar CSS syntax that you are
| | 00:07 | probably already familiar with, and they
work pretty much the same way that CSS does.
| | 00:12 | I have listed here the basic CSS
selectors in the table and you can see they
| | 00:18 | correspond directly to their CSS counterparts.
| | 00:22 | So, for example, if I pass a tag name
to the jQuery selector, it will find me
| | 00:29 | all elements that have that same tag name.
| | 00:32 | Similarly, if I pass in an identifier,
jQuery will find the element that has that id.
| | 00:40 | The same thing goes for class name.
| | 00:41 | If I pass in a class to the jQuery
selector, it will find all the elements that
| | 00:45 | have a class attribute
that have that class name.
| | 00:49 | And just like CSS, you can
get a little bit more fancy.
| | 00:52 | You can look for tags that have a
particular class name, or you can look for a tag
| | 00:57 | that has a specific id
and has a class name on it.
| | 01:01 | And then, there is a wildcard character,
the special character, the asterisk,
| | 01:04 | basically means find all
of the elements on the page.
| | 01:09 | And if that sometimes happens, you need to
iterate over all of the elements in the page.
| | 01:14 | So, let's take a look at how you would
use jQuery versus using the plain browser
| | 01:21 | DOM to get at information in a document.
| | 01:25 | So, here I have a pretty fairly simple
HTML file and it's been stripped down a
| | 01:31 | bit for purposes of illustration.
| | 01:33 | But you can see it has an unordered
list in it and some list items and
| | 01:37 | paragraph tags and so on.
| | 01:38 | So, let's take a look at some
comparisons of the DOM and jQuery.
| | 01:42 | If I want to get all the paragraph tags
in the document, using the DOM, I would
| | 01:46 | do something like this.
| | 01:47 | I would use the document.
getElementsByTagName and pass in the p, and that would
| | 01:52 | get me all these paragraph tags.
| | 01:54 | To do the same thing using jQuery, you can
see all I have to do is call the jQuery object.
| | 01:59 | That's the little $ sign right there.
| | 02:01 | That's the global jQuery function, and
I simply pass in the parameter p, and
| | 02:05 | that will come back with what is
called a matched set, or a wrap set it's
| | 02:10 | sometimes called, or matched elements.
| | 02:13 | It comes back with a list of all
the tags that match that particular
| | 02:17 | parameter right there.
| | 02:18 | Okay, suppose I wanted to get the tag
that had the id "list1" and again using
| | 02:23 | the DOM, I would use the standard DOM
function getElementById, and I would
| | 02:28 | give it the id that's this list right here.
| | 02:30 | That's what the DOM would come back with.
| | 02:32 | To do the same thing in jQuery, you can
see I am just using standard CSS syntax,
| | 02:37 | a little hash mark with the id in
front of it, and that comes back with the
| | 02:42 | element for that id.
| | 02:45 | Okay, let's get a little more fancy.
| | 02:46 | Suppose you want to get all the list
item tags that have class a on them.
| | 02:50 | Well, to do that using the DOM,
it's a little bit more complicated.
| | 02:53 | You would have to first use the
getElementsByTagName function right to get all
| | 02:57 | the <li> tags, then you would have
to write some for loop that would loop
| | 03:01 | through all the results in that array
and get the class attribute and compare it
| | 03:07 | to this name right here, a, to see if
it should be included in the result side.
| | 03:11 | Well, jQuery does that for you and again,
using CSS syntax, all I have to do is
| | 03:16 | call the jQuery object with this
expression right here, list items that have a
| | 03:20 | on them, and it accomplishes the same thing.
| | 03:23 | And finally, let's imagine you wanted
to have a situation where you wanted all
| | 03:27 | the tags regardless of what kind of tag
they were that have a class b on them
| | 03:32 | but only if they are inside a <ul> tag.
| | 03:36 | Again, using DOM this
would be pretty complicated.
| | 03:38 | You have to get all the tags, see if
they have the b class, see if they are
| | 03:42 | inside the ul, that kind of thing,
but jQuery makes this really easy, again,
| | 03:46 | using pretty standard CSS syntax
with the descendant inside the ancestor.
| | 03:50 | So, this basically says get me
everything that has b class as long as
| | 03:53 | it's inside the ul.
| | 03:54 | That would come back with
these list items right here.
| | 03:57 | In addition to the basic selectors,
there are some selectors that are a
| | 04:01 | little bit more advanced.
| | 04:02 | These are the hierarchy
and combination selectors.
| | 04:06 | So, these allow you to get a little bit
more advanced in selecting page content.
| | 04:10 | It basically allows you to select
elements based on hierarchical relationships
| | 04:14 | or a combination of criteria.
| | 04:17 | So, the first two do just that,
whereas in jQuery, usually you will see
| | 04:22 | one selector passed in.
| | 04:23 | If I passed in a comma-delimited list
like p, div, image, it would find all of
| | 04:31 | the elements that match everything in
the list and for class 1 and class 2,
| | 04:35 | this means find all the elements that
have both class 1 and class 2 on them.
| | 04:39 | And they both have to be there.
| | 04:41 | The next couple of examples
illustrate hierarchical relationships.
| | 04:46 | So, if you wanted to find all the child
elements that are direct children of a
| | 04:49 | certain parent, you would use this
expression right here, whereas if all you
| | 04:53 | cared about was finding a tag that
appeared anywhere underneath a given
| | 04:57 | ancestor, you would use this form, with
the ancestor and then a space, and then
| | 05:02 | whatever you are interested in here.
| | 05:04 | In the next two, you have to deal with siblings.
| | 05:06 | So, the next operator finds whatever
element is next to this element, right,
| | 05:13 | the previous element, and
the siblings element says hey!
| | 05:17 | Get me all the sibling elements that
come after the previous element right here,
| | 05:21 | and match the selector that
I am passing in for siblings.
| | 05:26 | Okay, so let's take a look
at some of these in action.
| | 05:29 | We will switch over to code.
| | 05:32 | Okay, so if you look inside your
exercise files, I have got a file right here
| | 05:35 | named Basicselector_start and
I am going to start off there.
| | 05:38 | So I am going to open this up in my editor
and a couple of things we are going to do.
| | 05:43 | So, you see that this is pretty
much the document we are working with.
| | 05:46 | Very similar to the one in the slides.
| | 05:49 | Got an unordered list that's in paragraphs.
| | 05:52 | Let's go back to the source.
| | 05:53 | So, what I am going to do is write a
function that executes when the page loads
| | 05:59 | and I am going to do that on
the ("document").ready event.
| | 06:05 | Okay, so here is what we are going
to do. .ready. That's a function.
| | 06:10 | Let's try a couple of examples.
| | 06:11 | So, I will say get me the <p> tags.
| | 06:14 | Now, don't pay attention too much to this.
| | 06:16 | What I am about to do.
| | 06:17 | I want you to focus on the selectors right here.
| | 06:19 | We will get to this stuff later.
| | 06:21 | I just need to make the result visible,
so you can see them on the screen.
| | 06:24 | So, just bear with me while I do this.
| | 06:26 | I am just going to make the CSS
border a 3 pixel solid red line, so that we
| | 06:30 | can see everything.
| | 06:32 | What this is going to do is
select all the paragraph tags.
| | 06:35 | So, let's try that out in the browser.
| | 06:37 | And as you can see, all the paragraph
tags are now inside bold red outlines.
| | 06:42 | Let's go back to the
code and try something else.
| | 06:45 | Okay, let's do the same thing, only
this time, we are going to do it for
| | 06:49 | everything that has a class of a. So
you can see that these list items, that
| | 06:54 | paragraph, those should all be
inside red borders. Let's try this.
| | 06:59 | I am going to refresh, and you can
see sure enough, that's the case.
| | 07:03 | All right, now let's go back and
try the id selector, back to the code.
| | 07:07 | Okay, so now I am going to put in list1
and that's this unordered list right here.
| | 07:12 | So, now the list itself
should have a border around it.
| | 07:15 | Okay, let's refresh and sure enough that works.
| | 07:18 | And then finally, let's one more.
| | 07:21 | I am going to try all
paragraphs that have class b assigned.
| | 07:24 | All right, let's refresh and
you can see that works just fine.
| | 07:30 | Okay, so let's try some hierarchical ones now.
| | 07:33 | Here we are in the system again
and I am going to do the same thing.
| | 07:37 | There is a file here called HierCombo.
| | 07:39 | I am going to open that in my editor.
| | 07:42 | Again, if you follow along
with me, we are going to try some
| | 07:44 | hierarchical relationships now.
| | 07:46 | What I am going to do first is try get
me paragraphs and list items that have b
| | 07:54 | applied, and apply that
CSS trick, so we can see it.
| | 08:02 | Okay, and let's bring
this up in the browser.
| | 08:05 | Okay, and you can see that that works, all
the paragraphs and everything with the b.
| | 08:09 | All right, let's try the descendant operator.
| | 08:12 | And the descendant operator basically
will ask for things inside an unordered list,
| | 08:17 | and list items with an a on them.
| | 08:20 | I will just try that.
| | 08:21 | Okay, we will refresh, and
you can see that that worked.
| | 08:26 | All right, now let's try the next operator.
| | 08:30 | So, we are going to say get me the
paragraph that's next to the unordered list.
| | 08:36 | Refresh, and you can see that the first
paragraph that was next to the list is now bordered.
| | 08:41 | Okay, let's try the siblings one.
| | 08:42 | For this one, I am going to say, let's
see. How about whatever it is, let me
| | 08:48 | get the list1 and get me the
paragraph siblings of list1.
| | 08:54 | So, all these paragraphs are siblings of list1.
| | 08:56 | Let's try that and sure enough it works.
| | 08:59 | Okay, so now you have seen how to use basic
jQuery selectors. Let's move on now to Filters.
| | Collapse this transcript |
| Using basic jQuery filters| 00:01 | So as you have seen, jQuery selectors
are very powerful utilities for selecting
| | 00:07 | content inside web pages.
| | 00:09 | So now we are going to look at a feature
of jQuery that make selectors even more
| | 00:13 | powerful while retaining the CSS
style simplicity that goes along with the
| | 00:20 | selectors we have already seen.
| | 00:21 | And these are called filters.
| | 00:24 | Filters work in conjunction with
selectors and they provide even more
| | 00:29 | fine-grained control over how
elements are selected in the document.
| | 00:34 | jQuery filters fall into
six different categories.
| | 00:39 | The first category is Basic and these
provide basic filtering like getting
| | 00:43 | the first or the last or the even or odd
numbered items in the returned set from a selector.
| | 00:49 | The next is content based filtering.
| | 00:52 | Content filters take a set of elements and
they filter out elements based on their content.
| | 00:58 | Like for example, whether an
element contains a particular string.
| | 01:03 | Then there is Visibility filters and
these filters act on elements using
| | 01:07 | their visibility setting.
| | 01:09 | And they will filter out elements
that are either hidden or visible.
| | 01:13 | Next comes Attribute filters.
| | 01:15 | Attribute filters will examine a given
attribute on an element and they will use
| | 01:21 | that attributes' value to determine if
it should be filtered out or included in
| | 01:26 | the selector's result set.
| | 01:28 | Then there is Child filters, and Child
filters select elements based upon their
| | 01:34 | relationship with their parent element.
| | 01:37 | Then finally, there is the special set
of filters that work on form elements and
| | 01:43 | you can use these as really convenient
powerful ways of processing elements in
| | 01:48 | forms based upon what kind of form
fields they are, whether they are enabled or not,
| | 01:53 | whether they are checked
or not, and that kind of thing.
| | 01:55 | Okay, so let's take a look
at the Basic jQuery filters.
| | 02:01 | So Basic filters allow you to refine
the results of a jQuery selector by only
| | 02:07 | including elements that
match certain conditions.
| | 02:12 | If you're taking a look down this list
and you are familiar with CSS, you will
| | 02:15 | probably notice that again these
match up very closely with CSS syntax.
| | 02:20 | So for example, the :first filter
selects only the first instance of the
| | 02:26 | selector's returned set.
| | 02:28 | Similarly, last, it will
select only the last instance.
| | 02:31 | Then there is even and odd which select
only the even numbered elements or the
| | 02:36 | odd numbered elements in the returned
set that the selector came back with.
| | 02:40 | Then there is a few more down
here that operate on position.
| | 02:43 | So the eq filter will take an index and
it will filter out elements that are not
| | 02:49 | positioned at that index.
| | 02:50 | So it will only include the
element at that index in the result set.
| | 02:53 | Then there is a greater than and less than,
and they do what you might think.
| | 02:57 | For example, the greater than operator
will only include elements that are past
| | 03:02 | this given index whereas the less than
filter will only include elements that
| | 03:07 | are before that index.
| | 03:09 | The header filter will select all
header elements in the page, H1, H2 for
| | 03:16 | example all the way up to H6.
| | 03:19 | The animated filter will select all
the elements that are currently being
| | 03:23 | animated by a jQuery in some way, and
you would use this in conjunction with the
| | 03:29 | animation ability of jQuery,
which we will get to later.
| | 03:32 | Then finally, there is a negation
filter and it's called the not filer.
| | 03:37 | The not filter takes a selector and that
will include elements in the result set
| | 03:41 | that don't match the given selector.
| | 03:45 | So we have reached the point now
where we can jump over to the code and see
| | 03:48 | how some of these work.
| | 03:49 | So let's fire up our editor and see how
we can get even more power out of jQuery
| | 03:54 | selectors by adding filters.
| | 03:55 | If you look in the exercise_files
folder, you can see there is a file in here
| | 04:01 | named BasicFilters and there is
a start and a finished version.
| | 04:05 | Now I am going to use the start
version to work towards the goal.
| | 04:08 | If you want to follow along with me,
you can or you can just go ahead and jump
| | 04:11 | ahead to the finished version
to see the results for yourself.
| | 04:14 | So here we are in the code.
| | 04:16 | I am going to go back and
show you the Design view.
| | 04:20 | So this is the same document that we
were using in the previous example, only
| | 04:24 | now we are going to use filters as well.
| | 04:26 | Okay, so let's jump right
in and try some things out.
| | 04:29 | So I am going to write a jQuery expression.
| | 04:32 | Now I remember last time I started
off by just getting p tags and then I
| | 04:37 | added a little css trick.
| | 04:39 | Again, I don't want you to focus too
much on this css right now, because I am
| | 04:42 | just doing this to make the results visible.
| | 04:44 | We will get to jQuery's css
handling later on in the course.
| | 04:49 | So for now I am just doing this to
make it possible to see the results.
| | 04:53 | So instead of just getting p tags,
however, let's try some filters.
| | 04:56 | So I am going to write p:first.
| | 05:00 | So what this will do is find the first
paragraph tag and put a border around it.
| | 05:06 | So let's see if that works.
| | 05:07 | I am going to save, and let's
bring this up in the browser.
| | 05:11 | And you can see that it worked.
| | 05:13 | So the first paragraph
now has a border around it.
| | 05:15 | Okay, let's go back to the code.
| | 05:18 | Let's try getting a little more fancy.
| | 05:20 | So I will copy that and paste.
| | 05:24 | So let's try the last operator.
| | 05:27 | And as you might expect the last
operator should do pretty much the same thing.
| | 05:31 | Let's go to the browser, let's
refresh and now you can see that the last
| | 05:35 | paragraph is selected.
| | 05:38 | Let's get a little more fancy.
| | 05:39 | Let's go back to the code,
comment this guy out there.
| | 05:41 | Now we are going to do the
even numbered paragraphs.
| | 05:46 | So let's save and go back to the
browser and I am going to refresh.
| | 05:51 | And now you can see that the even
numbered, and this may not look even
| | 05:54 | numbered because that's the number one,
but remember jQuery is starting off
| | 05:58 | indexing at index 0.
| | 06:00 | So this is 0, this is 1, this is 2,
and this is 3, even though I have got them
| | 06:04 | labeled starting at 1, 2, 3, and 4.
| | 06:07 | In programming parlance the 0 based index
is first and that's obviously an even number.
| | 06:12 | Okay, let's go back to the code and let's
just try odd just to show that it works.
| | 06:17 | Okay, and let's refresh and now you
can see the odd ones are highlighted.
| | 06:23 | So that works obviously with tags.
Let's try it with some classes.
| | 06:29 | Now I am going to comment that line.
| | 06:30 | Let's try getting the first instance of
whatever has the a class applied to it.
| | 06:37 | You can see that it's going to
be this list item right here.
| | 06:40 | So let's try that out, okay, we refresh.
| | 06:44 | And sure enough, that first
time with the a class is selected.
| | 06:48 | Let's go back to the code.
| | 06:50 | Let's try every even numbered
thing that has b assigned to it.
| | 06:57 | So let's look for the class b and even.
| | 07:01 | So we save and let's refresh.
| | 07:04 | And you can see that this is item number 0
for b, this is the second b item right there.
| | 07:10 | So those are both being highlighted.
| | 07:12 | Let's comment this.
| | 07:16 | Now let's try looking for paragraph
tags, but only paragraph tags that are
| | 07:20 | greater than index 1.
| | 07:24 | So this is going to be index 0;
this is going to be index 1.
| | 07:28 | So we should get 2 and 3 here included.
| | 07:31 | So let's save, go to the browser and refresh.
| | 07:36 | And sure enough that's exactly what
happened. Only indexes 2 and 3 got highlighted.
| | 07:41 | All right, finally, let's try the not operator.
| | 07:44 | Okay, so here we are back into the code.
| | 07:46 | This time let's try looking for paragraphs
that are paragraphs not equal to index 2.
| | 07:57 | So it's going to find the paragraph at
index number 2 and it's going to select
| | 08:01 | all the paragraphs that are not that one.
| | 08:03 | So they should all have a
nice red border around them.
| | 08:05 | So what that means
basically is-- let's 0, 1, 2.
| | 08:10 | So this guy will be excluded, but
the other three should have a border.
| | 08:14 | So we will save and we will go
back to the browser and let's refresh.
| | 08:18 | And you can see results
are exactly what we expected.
| | 08:22 | This one here is not
bordered and the other three are.
| | 08:26 | Okay, so that pretty much wraps
it up for basic jQuery filters.
| | 08:30 | Now you know how to combine filters
and selectors to do some pretty powerful
| | 08:33 | selecting techniques.
| | Collapse this transcript |
| Using jQuery attribute filters| 00:01 |
Now that we have taken a look at some
basic jQuery selectors and filters,
| | 00:04 |
let's get a little more advanced.
| | 00:06 |
We are going to look now at Attribute filters.
| | 00:09 |
And Attribute filters provide the
ability to further filter out the results of
| | 00:14 |
a selector statement based upon
attributes that are on the elements being selected.
| | 00:21 |
You can see here I have listed a
table of the available filter attributes.
| | 00:25 |
So let's just go down the list.
| | 00:27 |
The first one where you put the name
of the attribute inside these braces
| | 00:30 |
basically only includes the element in
the result set if that attribute exists
| | 00:36 |
on the element. Doesn't matter what value it is;
| | 00:38 |
it just has to be there.
| | 00:39 |
The next one checks to see if the
attributes' value is equal to a value that you supply.
| | 00:46 |
And then from there, the next one only
includes the element in the result if the
| | 00:51 |
attribute does not have the
value that is listed here.
| | 00:54 |
The next two are very similar to
regular expressions in JavaScript.
| | 00:58 |
This one checks to see if the
attribute starts with the string that you give
| | 01:03 |
here and this one, the $=, checks to
see if the element ends with the value
| | 01:08 |
that you have given.
| | 01:09 |
The next one here, the *=, that
checks to see if the attribute contains the
| | 01:15 |
string that you specify
anywhere within the attribute value.
| | 01:19 |
Then the last one is kind
of like a compound statement.
| | 01:22 |
It only includes elements that match
all of the specified Attribute filters.
| | 01:27 |
So you can put 1, 2, 3 as many as
you want on the filter statement.
| | 01:32 |
One of these filter expressions
will take one of these forms.
| | 01:36 |
And you can specify as many as you like,
and then only elements that match all
| | 01:40 |
of those guys will be
included in the result set.
| | 01:44 |
So let's exercise some of these.
| | 01:46 |
Let's go over to the code and try some out.
| | 01:50 |
Let's begin by just taking a
quick look at the document.
| | 01:54 |
The document is a little bit
different than the last time around.
| | 01:56 |
I have added a couple of more
attributes to this paragraph here on the end and
| | 02:00 |
that's pretty much about the only
change that I have made, so that we can test
| | 02:04 |
out the multiple Attribute selector.
| | 02:06 |
So, okay, let's get started.
| | 02:08 |
I am going to write a jQuery selector
statement and that's going to look like this.
| | 02:12 |
And I am going to say, hey, let's get all
the p elements like we have done in the past.
| | 02:18 |
And again, just like we have done in the
past, I am going to put a nice bold red
| | 02:24 |
border around the results so that
we can see visually what's happening.
| | 02:31 |
For this particular selector I am
going to specify that I only want to select
| | 02:36 |
paragraphs that have a class attribute.
| | 02:38 |
So I put the word class inside the
braces and you can see down in here only two
| | 02:42 |
paragraphs match that.
| | 02:43 |
There is this one here and this one.
| | 02:45 |
So only those two paragraphs
should have this border applied to them.
| | 02:51 |
Again, we will get to this part later.
| | 02:53 |
Right now I will just
focus on this part right here.
| | 02:55 |
So I am going to go over
to the browser. Let's see.
| | 02:59 |
Okay, I am going to bring up that file
and you can see that the paragraphs 1 and 3,
| | 03:05 |
the ones that have the class
attribute are in fact bold red border around.
| | 03:10 |
So let's go back to the code and
make a couple of minor changes.
| | 03:14 |
Okay, so here we are back in the code.
| | 03:16 |
Let's try something a little different now.
| | 03:18 |
First, I am going to copy
this and then comment it out.
| | 03:21 |
And then I am going to paste that guy back in.
| | 03:23 |
Now what I am going to do however is
look for a paragraph, but I am only going
| | 03:27 |
to filter on paragraphs that have an
id attribute that is equal to para 1.
| | 03:34 |
And you can see that should be
this guy right here. That's the id.
| | 03:37 |
So now only that paragraph
should have the border applied.
| | 03:41 |
Let's go back to the browser and I will refresh.
| | 03:43 |
Yeah, and sure enough that worked just fine.
| | 03:46 |
All right, let's continue on.
| | 03:50 |
We are going to go back to the code.
| | 03:51 |
Now we are going to get a little bit fancy.
| | 03:53 |
I am going to comment that guy out again.
| | 03:55 |
Let's try one of the Attribute
filters that does the start with.
| | 04:00 |
So now we are going to say let's find paragraphs that have
the id attribute but it has to start with the string "para."
| | 04:09 |
And you will see that
there is two of those, right.
| | 04:10 |
There is this one here, para 1,
and then there is para 4.
| | 04:14 |
So now only these two guys should be
selected by this selector and filter
| | 04:19 |
combination and have the border applied.
| | 04:21 |
So let's go back to the browser.
| | 04:24 |
Okay, now let's refresh and sure enough
that's exactly what happens. So far, so good.
| | 04:29 |
Okay, let's go back to the code
and we will try one final example.
| | 04:34 |
So for our final example, let's
try a multiple attribute requirement.
| | 04:40 |
So what we are going to do now is say we're looking
for paragraphs that have ids that start with para
| | 04:49 |
and it also has to have a language attribute that
contains, which is the *= operator, en-, and you can look
| | 05:02 |
down here you will see that the only
that's going to match that is this guy here,
| | 05:05 |
because he starts with para there.
| | 05:08 |
And he has got language attribute that
contains English for US, but that's the
| | 05:13 |
string we are looking for.
| | 05:14 |
Okay, let's go ahead and save and
we will go back to the browser and only that
| | 05:19 |
guy should now be highlighted.
| | 05:21 |
So let's see, okay, and I will refresh.
| | 05:24 |
And as you can see that worked.
| | 05:27 |
Let's just try breaking that
expression to make sure that it in fact does not
| | 05:31 |
work when it shouldn't.
| | 05:32 |
So let's go back to the code.
| | 05:33 |
What am I going to do is just change
this statement to say it has to start
| | 05:38 |
with something like ben.
| | 05:40 |
So now if it doesn't
contain that, it should break.
| | 05:43 |
And we will go back to the browser
and now nothing should be highlighted.
| | 05:45 |
We will refresh and sure enough that works.
| | 05:49 |
So that's how Attribute filters can be used
to further refine selection in the document.
| | 05:57 |
So now we have seen how to select
elements by filtering out their attribute values.
| | 06:03 |
So let's move on now to
our next filtering group.
| | 06:07 |
| | Collapse this transcript |
| Child, visibility, and content filters| 00:00 |
We are going to look now at Content and
Visibility filters as well as Child filters.
| | 00:08 |
Content and Visibility filters
examine the content of the elements that are
| | 00:13 |
returned by the selector expression or
their visibility property to determine if
| | 00:18 |
they should be included or
excluded from the result set.
| | 00:22 |
So the Content filter has four options.
| | 00:25 |
There is the contains filter,
and you pass it some text.
| | 00:29 |
What will happen here is jQuery will
look inside the child elements of the
| | 00:35 |
element on the selector to see if they
contain this text string anywhere within
| | 00:40 |
their content, in any of their child elements.
| | 00:43 |
The next one, the empty filter, says
only include elements in the result set
| | 00:48 |
that have no child elements inside them.
| | 00:50 |
The next one, the has filter, you
pass that a selector and this will filter
| | 00:56 |
elements in the result set that contain
at least one element that matches this
| | 01:03 |
selector that you have given it.
| | 01:05 |
Finally, there is a parent content
filter that says only match elements in the
| | 01:10 |
result set that are themselves parents.
| | 01:12 |
For example, they contain at least one
other elements including text elements.
| | 01:19 |
For the Visibility filter
there are only two options.
| | 01:21 |
There is visible and there is hidden,
and that's pretty self-explanatory.
| | 01:24 |
This only includes elements that
are visible; this one only includes
| | 01:27 |
elements that are hidden.
| | 01:28 |
Let's take a look at the Child filters.
| | 01:31 |
Child filters allow you to refine the
selection by looking at the relationship
| | 01:35 |
that the element has with its parent elements.
| | 01:38 |
There are four options here.
Actually there are more, because the
| | 01:42 |
nth-child option has a few.
| | 01:44 |
So the nth-child filter has a
couple of different things you can do.
| | 01:48 |
You can give it even or odd.
| | 01:49 |
It kind of works the same way as
the even or odd filters that we looked at
| | 01:53 |
in the previous example.
| | 01:54 |
Only in this case it's operating on
child elements, not the parent elements.
| | 01:58 |
So this will only match elements
that are even or odd inside the parent.
| | 02:05 |
The nth-child, where you are given an
index, will match all elements that are at
| | 02:09 |
that index inside the parent.
| | 02:11 |
Then the last one, which is
pretty powerful, is the equation.
| | 02:15 |
You can actually give nth-child an equation
of the form xn+m and m is option obviously.
| | 02:20 |
For example, you can say 2n for every
second one or you can say 3n+1 and then n
| | 02:28 |
will start counting at 0.
| | 02:29 |
It will count 0, 1, 2 and so on.
| | 02:32 |
Then this equation will be calculated
and then that will be the index of the
| | 02:36 |
element that gets selected. We will
see an example of that in a moment.
| | 02:39 |
Then finally, there are a few other options.
| | 02:41 |
There is first-child, which will
match elements who are the first child of
| | 02:44 |
their parent, and then predictably there
is last and only and those will match
| | 02:48 |
elements who are the last child of their
parent or the only child of their parent.
| | 02:53 |
Back in the folder for the examples,
I am going to start off with the
| | 02:57 |
ChildVisCont_start file, and here is the
finished example if you want to jump ahead.
| | 03:01 |
So I am going to open
this up with my text editor.
| | 03:04 |
This is the example file at we are
going to be using for the Child and
| | 03:08 |
Visibility and Content filters.
| | 03:11 |
So let's go ahead and get started
playing around with some of the examples.
| | 03:15 |
Let's try something pretty simple.
I am going to write a query that says get
| | 03:21 |
me paragraph tags, only paragraphs
that contain the text string 3.
| | 03:30 |
Again we are going to draw our little
CSS trick to make it visible and we will
| | 03:36 |
give it a border
that's 3 pixels solid red.
| | 03:42 |
So let's save that and let's
bring that up in the browser.
| | 03:47 |
When you look very quickly, you will
see that there is a text string 3 right
| | 03:50 |
there for this guy, so that's the one
that should be selected, because where
| | 03:53 |
paragraphs that contain 3.
| | 03:56 |
Save, and we are going to bring up it in
the browser and you can see that that's
| | 04:00 |
the guy that got highlighted.
| | 04:02 |
All right, let's go back to the code and
make a quick change and watch what happens.
| | 04:07 |
First, that guy was misnumbered.
| | 04:09 |
Now let's take off the p. Let's just do this.
| | 04:11 |
Let's just do contains by itself.
| | 04:13 |
So what this is going to say is
I don't care what element it is.
| | 04:16 |
Just select all the elements
that contain the text string 3.
| | 04:21 |
Now at first blush you might say okay.
| | 04:23 |
Well, that's going to be this guy here,
right, the list item and it's going
| | 04:27 |
to be this paragraph.
| | 04:28 |
So let's watch what happens
when we go out to the browser.
| | 04:30 |
I am going to save.
| | 04:32 |
Now I am going to refresh. Wow!
| | 04:35 |
Everything got selected.
| | 04:36 |
So the list item here that has the
3 in it and the ul right, then it
| | 04:42 |
looks like the entire container here, the body.
| | 04:45 |
And here the paragraph has a 3.
| | 04:46 |
So let's go figure out what's happening.
| | 04:49 |
So here we are back in the code.
| | 04:51 |
Remember what we are asking jQuery now
to do is say, hey, get all the elements
| | 04:56 |
that contain the text string 3.
| | 04:58 |
Well, sure, the list item contains the
text string 3, but so does the ul. Why?
| | 05:03 |
Because the ul contains the li
and that contains that string.
| | 05:07 |
Well, so is the body, and in fact you
can see here that's the reason why the
| | 05:10 |
whole body is being outlined is
because even though this paragraph right here
| | 05:14 |
has the string in it.
| | 05:15 |
Well, so does its parent and its parent
is the body tag, and the parent of the
| | 05:19 |
body is the HTML.
Everything is being highlighted.
| | 05:22 |
So this is an example of where results
may be a little unexpected, if you are
| | 05:26 |
not keeping in line to the hierarchical
relationship that jQuery looks at when
| | 05:30 |
it's examining tags.
| | 05:32 |
So to limit what happens when you are
using filters like Contains or so on,
| | 05:36 |
you might want to put the scope in
there that you are looking at.
| | 05:39 |
So for example, if you only wanted the
list item in the paragraph, we can say
| | 05:43 |
li:contains(3),p:contains(3),
then that will do the right thing.
| | 05:50 |
Let's move on to the next example.
| | 05:52 |
So I will comment that guy,
and copy and paste and uncomment.
| | 05:59 |
Now let's try the parent operator.
| | 06:02 |
So we are going to get
paragraphs that are parents.
| | 06:07 |
So this will look at all the paragraph
tags and if they contain another tag,
| | 06:11 |
then including text items,
they will be included in the result set.
| | 06:15 |
So I am going to save and then refresh,
and you can see that all the paragraphs
| | 06:20 |
got selected because they
all contained content.
| | 06:23 |
So they were all bordered.
| | 06:25 |
Now let's go back to the code.
| | 06:28 |
Let's try another example.
| | 06:30 |
Comment that guy, put this one in.
| | 06:33 |
Now let's try an example of the has operator.
| | 06:36 |
So let's get rid of this.
| | 06:38 |
We are going to ask jQuery to find us
unordered lists and we are only going to
| | 06:43 |
look for unordered lists that has a
list item in them that has a class
| | 06:52 |
attribute that's equal to a.
| | 06:55 |
So what we are doing here is this is
selector all on its own, so list items that
| | 07:00 |
have a class equal to a, but we are
not selecting the list items, what we are
| | 07:06 |
selecting is the ul.
| | 07:08 |
But we are only selecting the ul, if it
has a list item inside that matches this.
| | 07:13 |
So let's save and go back to the browser.
| | 07:18 |
So now we are going to refresh, and you
can see that the ul was in fact included
| | 07:24 |
in the results, because it does
have a list item that has that class.
| | 07:27 |
So if we go back to the code, and we
change that to class=c. Well, there is no
| | 07:31 |
class c. So now this will
result in nothing being highlighted.
| | 07:35 |
So we will save, go back to the browser.
| | 07:37 |
Now we will refresh and you will
see that the unordered list is not
| | 07:40 |
highlighted anymore.
| | 07:42 |
Let's do a couple of nth-child examples.
| | 07:44 |
So let's go back to the code
and let's comment this and paste.
| | 07:50 |
So now we are going to do this.
| | 07:51 |
Let's say we are going to look for the,
unordered list and we are going to look
| | 07:56 |
for the list item that's
the nth child = 3.
| | 08:06 |
So this says get me the list item that is the
third child that's inside an unordered list.
| | 08:14 |
Let's go back to the browser, and
refresh, and you will see that sure enough
| | 08:19 |
the third child is highlighted, because
that's the third list item that's inside the ul.
| | 08:25 |
Let's go back and try something else.
| | 08:27 |
Let's just try now.
| | 08:28 |
Let's just say li:last-child and
we will save and we will refresh.
| | 08:35 |
Let's bring it up and sure enough,
the last list item child is selected.
| | 08:41 |
Finally, let's try an equation.
| | 08:44 |
Let's comment this guy out and we will do this.
| | 08:47 |
Let's try, ul li:nth-child,
but in this case let's do (2n).
| | 09:00 |
So now what's going to happen is n is
going to start out counting and it's going
| | 09:04 |
to select every other one.
| | 09:06 |
So let's refresh in the browser and you
can see that items 1 and 3 were selected.
| | 09:13 |
That's something worth noting.
| | 09:14 |
So let's go back to the code.
| | 09:16 |
Earlier, you might have caught it when
I said that jQuery operates on elements
| | 09:20 |
that are 0 index based.
| | 09:23 |
This is an exception here.
| | 09:24 |
When you are using the nth-child operator
and you are using the equation,
| | 09:28 |
the n variable starts off counting at 1.
| | 09:30 |
It doesn't start off counting at 0.
| | 09:32 |
So that's something to keep in mind.
| | 09:34 |
But you can see that it has selected
pretty much every other one in the bunch.
| | 09:39 |
So if I changed this to 3n, and when you
refresh you can see that it's 1, 2, and 3.
| | 09:47 |
So 3 time 3n is 3.
| | 09:49 |
That's the one that got selected.
| | 09:51 |
So that's how Child and
Content Visibility filters work.
| | 09:56 |
Let's move on now to our next lesson.
| | 09:59 |
| | Collapse this transcript |
| Form selectors and filters| 00:01 | In addition to providing selectors
that work across generic elements of a
| | 00:05 | document, jQuery also has a set of
selectors and filters that are just used for
| | 00:10 | dealing with form elements.
| | 00:12 | They work pretty much like any other
selector, but they happen to start with a
| | 00:16 | colon character, like filters do.
| | 00:19 | These kinds of selectors and
filters make it really easy to build form
| | 00:23 | processing logic using jQuery.
| | 00:26 | So you can see the table here.
| | 00:28 | This table lists the available
selectors for form elements, so they pretty much
| | 00:33 | match up directly with the names of
the various form elements that you will
| | 00:39 | find in a document.
| | 00:40 | So for example, you have selectors for
input, and text, and password, and radio,
| | 00:44 | and checkbox, submit, all the way down.
| | 00:46 | You can use these to select those
individual kinds of elements on the form.
| | 00:51 | So in addition to selectors, there are
form filters, and these are the form
| | 00:56 | filters that are available.
| | 00:58 | So there is only a few of these, and
they are essentially convenience filters to
| | 01:04 | help you select form
elements that are in certain state.
| | 01:07 | So for example, we have a filter for
enabled and disabled, and we have got a
| | 01:11 | filter for check and selected.
| | 01:13 | So for example, the checked one
matches form elements that are checked, and
| | 01:17 | obviously it applies only to radio
buttons and check boxes, whereas the enabled
| | 01:21 | and disabled will match form
elements that match that state.
| | 01:25 | So let's go ahead and fire up our code
editor and take a look at a couple of form examples.
| | 01:31 | So I am going to jump over to the code here.
| | 01:33 | I am going to go ahead and open up the
Formselectors_start file, and that's in
| | 01:39 | the Chapter 2 section of the exercise files.
| | 01:43 | Now if you've got access to the exercise
files, you can open this up in your own
| | 01:47 | text editor or just follow along with me
watching the movie, or you can go ahead
| | 01:51 | and skip ahead to the _finished
version to see how everything works.
| | 01:56 | So I'm going to go ahead
and open this in my editor.
| | 01:59 | So this example is a little bit different
than the other examples we've looked at so far,
| | 02:03 | so let's begin by looking at the Design
view. And you can see what we have is a
| | 02:09 | source file with several form fields in it.
| | 02:11 | We've got some input fields, we've got some
radio buttons, check boxes, and some other things.
| | 02:16 | So let's go back to the source and
take a look at how we use jQuery to select
| | 02:23 | each of the form elements.
| | 02:24 | Okay, so up here in my document.ready
function I'm going to start by writing my query.
| | 02:29 | And I'm going to do things a little bit
differently than I did in my previous examples.
| | 02:34 | In my previous examples, I was
surrounding elements with a red border box, but
| | 02:38 | not every browser supports doing that
with form elements, so I'm going to do
| | 02:41 | something a little bit different.
| | 02:43 | Let's begin by selecting form
elements that are input fields.
| | 02:48 | So I'm going to type form: input.
| | 02:52 | And then to show you, visually, that
the selector is working, I'm going to type
| | 02:56 | "before" and this is going to put
some text before the selected element.
| | 03:03 | So instead of doing the red
border, I'm going to do this. Okay.
| | 03:06 | So what this is going to do is select
all the input elements of the form and
| | 03:10 | then put the word "INPUT" in front
of the form element. So let's save.
| | 03:15 | Let's go over to the browser and refresh.
| | 03:17 | Okay, so I'm going to refresh this in the form.
| | 03:20 | Okay, so you can see that when I refresh
the document, the word "INPUT" got put in
| | 03:24 | front of every form
element that is an input element.
| | 03:29 | And since all of these elements are
input elements, you can see that the radio
| | 03:32 | boxes and the check boxes and the
text fields and everything had the word
| | 03:36 | "INPUT" put in front of it.
| | 03:38 | Okay, so let's get a
little bit more specialized.
| | 03:41 | Let's go back to the code.
| | 03:43 | So, back here in the code,
let's try something else.
| | 03:45 | Let's comment this out,
and then we'll copy and paste.
| | 03:49 | What we're going to do this
time is select text elements.
| | 03:54 | So in this case, we're going to change
this to "text" and we're going to put the
| | 03:58 | word "TEXT" in front of all the text elements.
| | 04:02 | So I'm going to save, and we're
going to go back to the browser.
| | 04:05 | And now when I refresh you can see
that only the text elements have been
| | 04:08 | selected by that jQuery selector.
| | 04:10 | So none of the other elements now have
text in front of them--only these two guys do.
| | 04:15 | And let's go over to the Firefox
browser, so I can show you it working there.
| | 04:19 | Okay, here is the same document.
| | 04:21 | And I refresh, and you can see that
the word "TEXT" got inserted based on the
| | 04:25 | query we wrote in front of the text elements.
| | 04:28 | Now let's go back to the source.
| | 04:30 | What I'm going to do now
is comment this guy out.
| | 04:34 | And I'm going to switch over to
Design view, and I'm going to insert a row
| | 04:39 | in front of this guy.
| | 04:41 | Now you can do using whatever
HTML or text editor you're using.
| | 04:44 | What I'm doing is inserting a table row,
and I'm going to put in a Disabled element.
| | 04:51 | And I'm going to put in a
text field, using my toolbox.
| | 04:54 | Again, you can use whatever
favorite HTML that you're using.
| | 04:59 | Okay, so now I'm going
to make this guy disabled.
| | 05:02 | So we'll go to the source and
we'll type "disabled=disabled."
| | 05:09 | Okay, so he's disabled now, and what
we're going to do is write another query
| | 05:15 | that shows how to select
elements that are enabled.
| | 05:19 | So let's copy and paste there. We'll uncomment.
| | 05:23 | So what we're going to do now is just
do form and text, but we're going to put
| | 05:28 | the enabled filter on it.
| | 05:30 | And so I'm going to change this to
read "ENABLED." I'm going to save.
| | 05:37 | So now, what this will do is put the
word "ENABLED" in front of text fields, but
| | 05:41 | only the enabled ones.
| | 05:42 | So let's switch back to the browser.
| | 05:44 | Okay, and I'm going to refresh.
| | 05:46 | And you can see that even though I've
got three text fields, only the enabled
| | 05:50 | ones have the word "ENABLED" in front of them;
| | 05:53 | this disabled guy does not
have text in front of it.
| | 05:56 | Okay, so let's take a look at Firefox.
| | 05:58 | Okay, here's the Firefox version.
| | 06:01 | And I refresh and you can see
that it's working there as well.
| | 06:03 | Let's go back to the source.
| | 06:06 | So if I were to change this to
disabled then the reverse would happen;
| | 06:09 | only the disabled field would
have the text in front of it.
| | 06:12 | Okay, so let's comment this.
| | 06:14 | Okay, so for the next example what
we're going to do is show how to use jQuery
| | 06:18 | to select items that are checked.
| | 06:21 | So let's go back to Design view.
| | 06:23 | And we're going to have some
items that are checked by default.
| | 06:26 | So what we're going to do is check this radio
button and this check box and this check box.
| | 06:32 | So let's go into the source and do that.
| | 06:35 | I'm going to--let's say this guy
equals checked. And we'll check this first
| | 06:43 | checkbox as well, and we'll copy
that and put it on this one as well.
| | 06:51 | So let's go back to the Design view.
| | 06:53 | So you can see now that several of
the elements are now checked: this radio
| | 06:58 | button and these check boxes.
| | 07:00 | Let's go back to the jQuery
code now, and let's go to the top.
| | 07:04 | What we're going to do now is write a
selector that selects form elements that are checked.
| | 07:12 | And I'm going to use just the filter
by itself here, and I'm going to write
| | 07:16 | "before" and I'm going to insert
some text that says "CHECKED." Okay.
| | 07:24 | So let's save.
| | 07:25 | Let's go back to the
browser and see what happens.
| | 07:27 | Okay, here were are, in the browser.
I'm going to refresh.
| | 07:29 | And you can see that only elements that
are checked, including the radio button
| | 07:34 | and these check boxes, have the word
"CHECKED" put in front of them, whereas
| | 07:39 | these unchecked items, these two
check boxes and this radio button, do not.
| | 07:43 | So that's pretty useful, and you can
see how jQuery can be pretty powerful for
| | 07:47 | processing form elements, selecting
things that are checked and enabled, and so on.
| | 07:52 | Let's do one more example.
| | 07:54 | What we're going to do now is only
select check boxes that are checked, so we're
| | 07:58 | going to write a short query
that ignores the radio button.
| | 08:01 | Okay, let's go back to the source.
| | 08:03 | Okay, so here we are, in the source,
and I'm going to comment this guy out and
| | 08:07 | do a copy and a paste.
| | 08:13 | And I'm going to save.
| | 08:16 | So now I'm going to writing in front
of the checked filter just ":checkbox".
| | 08:22 | What this is going to do now is look
inside our form for all the check boxes
| | 08:26 | that have "checked."
And I'm going to save.
| | 08:29 | Okay, let's go out to the browser again.
| | 08:32 | So now when I refresh, you can see
that the word "checked" does not appear in
| | 08:36 | front of the radio button, only the check boxes.
| | 08:39 | And I could the code to go back and,
instead of writing checkbox, I could
| | 08:42 | write radio button.
| | 08:43 | Let's go back over to Firefox and see it there.
| | 08:46 | Okay, so I'm going to refresh, and
you can see it's working here as well.
| | 08:51 | Okay, so that's how you use
jQuery to process form elements.
| | 08:56 | You can see that this is
a very powerful feature.
| | 08:59 | It makes form processing a lot easier.
| | 09:01 | Let's go ahead and move on.
| | Collapse this transcript |
| Traversing documents| 00:00 | If you have done any web development in
the past, then you probably know by now
| | 00:04 | that traversing across the information
returned from a document is something
| | 00:09 | that's a very common operation and
jQuery provides a lot of functions that make
| | 00:14 | this process easier.
| | 00:15 | Now, I have listed some of the
functions that jQuery makes available to help
| | 00:18 | with this process below.
| | 00:19 | This is not an exhaustive list.
| | 00:22 | Some of the functions in this
area in jQuery are fairly advanced.
| | 00:26 | So, I have chosen the ones that are most
commonly used and you'll run into again and again.
| | 00:31 | So, let's go over these.
| | 00:34 | The first one that I want to go over is
the size function and length property.
| | 00:38 | They both do the same thing.
| | 00:39 | When you execute a jQuery expression,
and you get a result set back,
| | 00:45 | this function or property, whichever one you
prefer to use, will tell you the number
| | 00:50 | of elements that are in the jQuery
result set and you can use that information
| | 00:55 | in conjunction with other jQuery
functions to iterate over these items or do
| | 01:00 | some other operations.
| | 01:02 | So, we can also use this property or
the function to test to see if the result
| | 01:08 | of a jQuery expression came back with
any elements at all, because sometimes you
| | 01:14 | will need to know that information when
you are doing certain things and we will
| | 01:16 | see an example of that later on in the course.
| | 01:19 | The next two functions, get and index,
that returns an array of all the matched
| | 01:25 | elements as DOM elements.
| | 01:28 | Now remember in jQuery, the result set
that come back from a jQuery selection is
| | 01:33 | not an array of DOM elements.
| | 01:35 | Those DOM elements have been wrapped
inside jQuery objects, which have a lot of
| | 01:41 | functionality built on top of them.
| | 01:43 | So, these functions are pretty useful if
you need to operate on the DOM elements
| | 01:49 | themselves instead of using the
built-in functions that jQuery gets you.
| | 01:54 | So, the get function returns an array
of all the elements and the result is set
| | 01:58 | as DOM elements or you can use the
version that takes the index parameter and
| | 02:03 | that you will get you a single
element at that index as a DOM element.
| | 02:06 | And the last two functions, find and
each, are also pretty powerful functions.
| | 02:12 | The find function can be used to
search inside a matched element for other
| | 02:18 | elements that match the expression.
| | 02:21 | You can imagine searching
inside a div for images, for example.
| | 02:25 | And then the last function, the
each function, is also very powerful.
| | 02:28 | The each function allows you to loop
over the contents of every element in the
| | 02:34 | result set of a jQuery selection and
execute a function against that element.
| | 02:40 | And again, this is a very
powerful feature of jQuery.
| | 02:42 | You will come across the
need for this again and again.
| | 02:46 | In fact, later on in the course,
we will use the each function to solve
| | 02:50 | a particular problem.
| | 02:52 | So now that we have seen some of these
functions and properties, let's jump over
| | 02:57 | to the code and exercise them.
| | 02:59 | All right, so here in the exercise_
files folder, I am going to open up the
| | 03:03 | traversing_start file.
| | 03:06 | You can view the finished version if you want
or you can follow along with me in the start one.
| | 03:12 | This is the document we have been using and
it's got the paragraphs and the list items.
| | 03:17 | So, let's begin by exercising some of the
properties and functions we have learned.
| | 03:22 | So, the first thing I am going to do is
use the length property to inspect the
| | 03:28 | result set of a jQuery selector.
| | 03:31 | So, actually we are going to display
it in an alert and I am going to display
| | 03:36 | the string that says There are + and
then I am going to execute my jQuery
| | 03:41 | function and I am going to look for all
the paragraphs tags and we can use the
| | 03:47 | length property + and then say <p> elements.
| | 03:55 | So, this should now show me in an alert,
how many paragraph elements there are.
| | 04:00 | So, I am going to save and go to the browser.
| | 04:02 | Okay, let's bring this up in the
browser and refresh and you can see that sure
| | 04:09 | enough there are four <p> elements, right?
| | 04:11 | One, two, three, four, that's correct.
| | 04:13 | All right, so let's go back to the
code, just to show you you can use the
| | 04:17 | size function as well.
| | 04:18 | So, I am going to save and refresh and
you can see that the same thing happened.
| | 04:22 | Okay, let's go back to the code.
| | 04:25 | This time let's use the get
functions to retrieve the DOM elements.
| | 04:31 | So, I am going to write var elems =.
| | 04:34 | This time I am going to look for all the
list items and I am going to write get, okay.
| | 04:40 | So, that's going to get me array of
all the list items as DOM elements.
| | 04:44 | And I am going to write alert,
There are " + elems.length;
| | 04:52 | and this is the built-in
JavaScript array length operator there.
| | 04:56 | Just to avoid confusion, there is our li tags.
| | 05:01 | So, that should now produce pretty much
the same result as the paragraph example
| | 05:06 | only now using the DOM instead.
| | 05:08 | So, let's save and now we are going
to refresh and sure enough there is
| | 05:12 | four list item tags.
| | 05:15 | So, let's go back to the code again.
| | 05:17 | This time, let's use just the
individual index operator on the get function.
| | 05:25 | So this time I am going to write alert
and I am going to alert li.get at 0.
| | 05:34 | So, this will come back with an alert
showing me what kind of object is at index 0.
| | 05:40 | We will save and we are going to
refresh and you can see that sure enough,
| | 05:45 | there is an object and it's an HTML li element
and that's correct, that's guy right there.
| | 05:51 | It is, in fact, a list item and this
is a DOM element object right here.
| | 05:55 | So, that appears to be working.
| | 05:56 | So, if I wanted to work on that li
tag using the DOM, I can now do that.
| | 05:59 | All right, let's go back to the code. Okay.
| | 06:02 | Now, let's get a little more fancy.
| | 06:04 | Let's use the find function.
| | 06:07 | So we are going to use the find
function to find list items that have a class b
| | 06:11 | inside of the ul tag.
| | 06:14 | And you can accomplish this using
selector expressions, but this is just for the
| | 06:18 | sake of illustration.
| | 06:19 | There are much more
powerful ways to use the find.
| | 06:22 | I am just going to use this
example to show you what it does.
| | 06:24 | So, I am going to select the ul tag and
then I am going to type find and I am
| | 06:29 | going to say find list items that have
the b class and I am going to use my same
| | 06:34 | CSS trick from earlier.
| | 06:36 | I am going to set the border to 3
pixel, solid red, so you can see it.
| | 06:42 | So, what should happen is all the list
items that have b applied should have
| | 06:45 | a border around them.
| | 06:46 | Okay, so we are going to save and
we will refresh this in the browser and
| | 06:51 | sure enough, it worked.
| | 06:52 | So, the find function found those list items.
| | 06:55 | One more example, let's go back into the code.
| | 06:59 | All right, now are going
to use the each function.
| | 07:01 | And this is where the
things get really interesting.
| | 07:03 | What I am going to do is use the each
function to apply progressively increasing
| | 07:08 | values to the style applied
to the paragraph elements.
| | 07:12 | So, I am going to make two variables.
| | 07:14 | I am going to make a variable called
leftmargin and that's going to start at
| | 07:16 | zero and I am going to make another variable
called border and that's going to start as three.
| | 07:21 | So, now I am going to write my jQuery
expression to find all the paragraphs tags.
| | 07:27 | I am going to say .each.
| | 07:28 | So, for each paragraph tag,
I want to execute a function.
| | 07:33 | And what this function is going to do is
remember, inside this function for each
| | 07:38 | one of these functions that's going to
be called that this keyword is going to
| | 07:41 | refer to each one of the
paragraphs as it comes through.
| | 07:44 | So, for each paragraph, I am going to
set the CSS property for the border to be
| | 07:55 | the value of the border
variable + pixels and then solid red.
| | 08:04 | So, the border is going to get bigger each
time and then I am going to say (this).css.
| | 08:11 | Only this time I am going to set the
CSS for the margin-left of the paragraph
| | 08:17 | to be the leftmargin.
| | 08:20 | Then I am going to say border += 2, so
the border is going to get thicker by 2
| | 08:25 | pixels each time and the leftmargin
is going to get bigger by 10 each time.
| | 08:32 | So, for each paragraph, these values are
going to get larger and we can see the
| | 08:36 | visual result of that when we refresh the page.
| | 08:39 | So, save and go back to the browser.
| | 08:42 | So, now when I refresh, you are going
to see each one of these paragraphs should
| | 08:46 | become increasingly indented to the
right and they should each have a red
| | 08:50 | border that gets progressively thicker and
you can see that that's exactly what happened.
| | 08:55 | That's how you use jQuery to
traverse across the elements in a web page.
| | Collapse this transcript |
| Understanding jQuery statement chaining| 00:00 | We are getting to the point in the
course now where we are going to start doing
| | 00:04 | some much more powerful jQuery coding
and before we do that, I want to point out
| | 00:08 | one of jQuery's most powerful features
and that is its ability to chain multiple
| | 00:13 | functions together and this basically
allows you to perform several operations
| | 00:18 | in just one line of code.
| | 00:20 | jQuery terminology calls this
statements chaining and you can see an example
| | 00:25 | there on the screen.
| | 00:27 | So, this is a selector in jQuery just
like I have been writing up until now and
| | 00:31 | what I have got here on the end is a
dot and then a series of functions.
| | 00:35 | These functions will get executed in
order, starting here on the left and going
| | 00:38 | across to the right.
| | 00:39 | So, you can imagine that
the selector will execute.
| | 00:41 | It will come back with a result set of
elements in the web page and then I can
| | 00:45 | do multiple operations on
those guys. I can assign CSS.
| | 00:48 | I can manipulate the content.
| | 00:50 | I can turn events on and
off, that kind of thing.
| | 00:53 | And the reason why this makes jQuery
so powerful is that it allows you to
| | 00:57 | perform multiple operations on one
result set without having to get that
| | 01:01 | result set over and over and over
again, like you might have to do in other
| | 01:06 | scripting conventions.
| | 01:07 | So, we will see this later on in the
course a lot more often, but I wanted to
| | 01:11 | call it to your attention so that
you know what it is when you see it.
| | 01:15 | And again, this is one of the things
about jQuery that just makes it powerful.
| | 01:18 | It's that you can assign the result set
to be operated on by multiple functions.
| | 01:22 | All in one line of code.
| | 01:23 | And again, we will see this later on but
I just wanted to call this out, so that
| | 01:27 | when you see it, you know what it is. Okay.
| | 01:29 | So, let's move on to building a
practical example using what we have learned
| | 01:33 | so far and the example that we are
going to build is annotating some page
| | 01:38 | links in a webpage.
| | 01:39 | Let's take a look at how that works.
| | Collapse this transcript |
| Practical example 1: Annotating page links| 00:01 | So now, we are going to take what
we have learned in jQuery so far
| | 00:04 | using selectors and filters and apply our
knowledge to a pretty neat practical example.
| | 00:12 | So, if you go into the folder for the
example files, you will see a couple of
| | 00:15 | files here underneath.
| | 00:16 | AutoPDFIcons and there is a start and a
finished and you can go ahead and jump
| | 00:20 | to the finished one if you want to, or you can
follow along with me here in the start version.
| | 00:24 | Let me open this up in my text editor and
let me show you this file in the Design view.
| | 00:29 | So, you can see here that I have got a file
and inside the file is a whole bunch of links.
| | 00:34 | There are different kinds of links.
| | 00:36 | So, if we go to the Split
view, you can see what I mean.
| | 00:39 | So, here is this link and it goes to an
HTML file, this one here happens to be a
| | 00:44 | named anchor, this one goes to another
HTML, this is one goes to PDF, a couple
| | 00:48 | of more HTML files, another PDF
file, this one goes to a mailto link.
| | 00:52 | The thing is though, if you look at the
design, you can't really tell that visually.
| | 00:56 | You really can't tell that Link #3
is a PDF file versus an HTML file.
| | 01:01 | So, we are going to write a one line
script in jQuery that automatically
| | 01:06 | decorates all the links in a page with
little icons that indicate that they go
| | 01:12 | to PDF files rather than HTML pages.
| | 01:15 | So, what I am going to do is go into
the Source view and by now you should be
| | 01:19 | familiar with, including the jQuery
library and here is our function that gets
| | 01:24 | executed when the document loads.
| | 01:26 | See, what I am going to do is I am
going to write a little jQuery that says get
| | 01:32 | all of the links that have attributes
named href and if the href attribute ends
| | 01:38 | with a .pdf string, then we
want to include a little icon.
| | 01:42 | So, remember ends with, for attribute
filters, is the dollar sign equals and we
| | 01:48 | want it to end with .pdf.
| | 01:52 | So, that query should get me all the
links that end with .pdf and I am going to
| | 01:58 | write a little function now.
| | 01:59 | We haven't learned this in jQuery yet,
we will see this in the next section.
| | 02:02 | This has to do with manipulating content
and creating some new content in the fly.
| | 02:07 | So, what we need to do is insert an
image that references the icon and remember
| | 02:12 | that this query will come back with a
set of objects, of all the links that
| | 02:16 | match this criteria.
| | 02:17 | So, for each one of those
guys, I am going to say, hey!
| | 02:21 | Insert into the document
after each one of those instances.
| | 02:24 | So insert an image and if you look in
the example files folder, you will see
| | 02:30 | that there is a folder names images.
| | 02:31 | So, I am going to point at the images
folder and in there you will see a little
| | 02:36 | file named small_pdf_icon.gif and to
make it look better, we will just align it
| | 02:45 | with the absolute bottom and then
we will close off the image tag.
| | 02:52 | Okay, so this is going to loop through
all the links and it's going to find all
| | 02:56 | the links that have an href that end with PDF.
| | 02:58 | So, it's going to skip over the HTML.
| | 03:01 | It's going to skip over the named anchor,
going to skip over the mailto and it's
| | 03:05 | just going to find these guys right here.
| | 03:08 | So, we are going to save that and we
are going to bring it up in the browser.
| | 03:11 | So, let's go out to the folder and we
are going to just double-click on this
| | 03:16 | folder and bring it up and you can
see that when the page loads, that
| | 03:20 | function gets executed and now those icons
have appeared after the links that end with PDF.
| | 03:27 | And we can get pretty creative with this.
| | 03:29 | We can put the links
before, we can put it after.
| | 03:31 | We can do whatever we want, but this is
a nice practical example of using jQuery
| | 03:35 | to do something really simple in
the page that increases the usability.
| | 03:39 | And if you go back to the code, you
will see that if I add more PDF links, I
| | 03:44 | will just copy and paste them in and
then save it, you will notice that this
| | 03:48 | behavior just automatically appears
on all of the links that get added.
| | 03:51 | So now, anytime, anyone adds a new link
to the page that ends with PDF, it will
| | 03:55 | pick up this behavior.
| | 03:56 | So, let's go back to the browser and
let's refresh and you can see that as those
| | 04:01 | links got added, so did my little icons.
| | 04:04 | So, it's early on in the course, but
already we are building some practical
| | 04:08 | solutions to some very real problems
using jQuery and we are going to keep right
| | 04:12 | on doing that to the rest of the course.
| | Collapse this transcript |
|
|
3. Manipulating Page ContentCreating, getting, and setting content| 00:00 | Although retrieving content from the
page is pretty cool in and of itself,
| | 00:05 | typically that's not enough.
| | 00:06 | Usually you need ways to manipulate
the page content once you have it.
| | 00:10 | And luckily jQuery gives us some really
good ways of doing that and that's what
| | 00:15 | we're going to examine in this section.
| | 00:18 | Once you've used the selectors and
filters to get the content out of the
| | 00:22 | webpage, typically you're going
to want to do something with it.
| | 00:26 | In addition to that, there were times
when you're going to want to create new
| | 00:29 | content to add it into the page dynamically.
| | 00:31 | For this purpose you use
jQuery's content manipulation functions.
| | 00:36 | As you're about to see, there are
functions for creating and copying and
| | 00:39 | deleting and moving content around as well
as wrapping page content inside other content.
| | 00:44 | In addition to manipulating content,
jQuery provides some really good
| | 00:48 | cross-browser support for working with
CSS information including positioning,
| | 00:53 | and sizing, and that's what
we're going to take a look at.
| | 00:56 | Let's look at getting,
creating, and setting content.
| | 01:01 | So to create new HTML content, you
basically just pass a string containing the
| | 01:06 | new HTML to the jQuery function,
and put something like this.
| | 01:11 | The result of this statement will be a
new jQuery object, a new wrapped element,
| | 01:16 | a result set if you will,
| | 01:18 | that contains the HTML that you
passed in as the string there.
| | 01:23 | And since it's just a string, it also
works really well if you want to pass in
| | 01:28 | a variable as well.
| | 01:29 | So if you can make it a variable, call
it My String, pass it into the header and
| | 01:33 | that will works fine.
| | 01:35 | In addition to this method, you can
use jQuery's html() and text() methods to
| | 01:42 | get and set content on elements.
| | 01:45 | And if you look at the table here
you'll see what these methods do.
| | 01:48 | So the html() method with no
arguments basically returns the current HTML
| | 01:54 | content of the first matched element
that comes back from the selector's result
| | 01:59 | set that you are calling this function on.
| | 02:01 | However, if you pass it some content,
then that sets the HTML content of every
| | 02:06 | single matched element in that set.
| | 02:09 | Similarly, the text() functions
work pretty much the same way.
| | 02:12 | You call it with no arguments and
that means get the text content of the
| | 02:16 | first matched element.
| | 02:17 | Otherwise if you pass it some text,
it will set the text content for all
| | 02:21 | the matched elements.
| | 02:23 | The main difference between text and
HTML is that if you pass HTML code to the
| | 02:27 | HTML function, it will
actually create real HTML for you.
| | 02:31 | If you try to pass a string into the
text function, however, that contains HTML,
| | 02:35 | the text function will
automatically escape it for you.
| | 02:37 | It will change angle
brackets into text representations.
| | 02:41 | It's not going to actually create HTML code.
| | 02:45 | Let's jump over to the code and
take a look at some of this in action.
| | 02:54 | Bring it to Design View.
| | 02:55 | You can see this is very similar
to the file that we've been using.
| | 02:59 | We have some paragraphs,
we've got some list items.
| | 03:02 | So we are going to go back into the Source.
| | 03:03 | What we're going to do now is test out
the HTML function to see what it does.
| | 03:08 | So we're going to write jQuery here
and let's pass in a selector that gets us
| | 03:16 | that unordered list.
| | 03:18 | And let's get the HTML for it and
let's display that in an alert. Okay.
| | 03:28 | Run this in the browser, and you can
see that the alert is displaying the HTML
| | 03:32 | content that is inside of that UL.
| | 03:36 | So let's go back to the code.
| | 03:37 | Let's get a little bit more fancy.
| | 03:38 | Now, let's change the HTML of that list and
see what we're going to comment this one out.
| | 03:43 | Let's write something like this, pass
in the list, and this time we're actually
| | 03:49 | going to set the HTML.
| | 03:52 | We'll set the HTML to just some new list item.
| | 03:55 | This is a new list item.
| | 03:59 | So now, when we run this, you're
going to see all the list items that
| | 04:03 | are currently there.
| | 04:04 | They're going to be blown away
because we're changing the HTML that's
| | 04:07 | going inside the UL tag.
| | 04:09 | So let's go back to the browser.
| | 04:10 | So let's refresh and you can see that all
those list items were replaced by the new one.
| | 04:18 | Let's keep on going.
| | 04:19 | Go back to the code editor. So here we are.
| | 04:22 | Let's comment that one out. All right.
| | 04:24 | Let's try something else.
| | 04:25 | Let's try creating some new content.
| | 04:28 | So I am going to write var newItem =
and we're going to pass a string to the
| | 04:34 | jQuery object and we'll make a new paragraph.
| | 04:38 | I will say this is a new
paragraph, and we will close that off.
| | 04:42 | So now we've created the new paragraph.
| | 04:46 | Let's insert it somewhere.
| | 04:48 | So let's get a reference to paragraph
2 right here and let's say okay,
| | 04:55 | that HTML is now going to be
set to the new item's HTML.
| | 05:04 | Let's run that in the
browser and see what happens.
| | 05:07 | I am going to refresh, and you can
see that the contents of that paragraph
| | 05:13 | have now been changed.
| | 05:15 | Let's try one more thing.
| | 05:17 | This time we'll use the Text function.
| | 05:19 | Comment these guys.
| | 05:21 | Let's try one more thing.
Let's do something like this.
| | 05:23 | We'll say let's get the last paragraph
and we'll set the text to be, "This is
| | 05:32 | the last paragraph."
| | 05:39 | Let's try running that.
We'll save, go over to the browser.
| | 05:42 | Okay, let's refresh.
| | 05:44 | So you can see how you can create and
get and set content using a couple of very
| | 05:49 | basic jQuery functions.
| | 05:50 | So let's move onto our next lesson.
| | Collapse this transcript |
| Manipulating attributes| 00:00 | Now, let's talk about how you can
manipulate the value of individual
| | 00:04 | attributes on elements.
| | 00:07 | jQuery provides a couple of functions
for doing this, and they are all named
| | 00:12 | attr in one way or the other.
| | 00:13 | And you can see in this table the
various ways you can call the Attribute
| | 00:17 | function attr, and there is also a
function for removing attributes.
| | 00:22 | So there is a couple of ways you
can use the Attribute function.
| | 00:24 | First, if you want to retrieve the
value of an attribute, you simply call the
| | 00:29 | attr function with the name of the
attribute that you want to retrieve.
| | 00:33 | So for example, if I want to get the
value of the source attribute on an image,
| | 00:38 | I would simply write attr and then
place in the attribute source, src.
| | 00:43 | You can also set properties on attributes.
| | 00:46 | There is a couple of ways to do that.
| | 00:48 | This version here, attr, that
takes a properties argument.
| | 00:51 | This sets a series of attributes
on all of the matched elements.
| | 00:56 | Remember you're calling this on the
result of a selector and filter probably.
| | 01:01 | So we'll set the attributes on all the
matched elements using regular JavaScript
| | 01:06 | Object Notation syntax.
| | 01:08 | This is best used for setting
large numbers of properties at once.
| | 01:11 | You can see an example here.
| | 01:13 | So in this case, I am passing in on an
image, and I am calling the Attribute
| | 01:17 | function and passing in
values for Source, Title, and Alt.
| | 01:22 | That's done using a JavaScript object.
| | 01:24 | However, if you want to just set one single
property to a value, that's pretty simple.
| | 01:29 | That's this version right here.
| | 01:30 | You pass in the name of the attribute
and the value you want it to be and that
| | 01:33 | sets the value of that attribute.
| | 01:36 | A neat little feature of jQuery though
is that you can pass in the name of the
| | 01:40 | attribute that you want to set and you
can also tell the attribute function that
| | 01:44 | there is this little function right
here that's going to be used to compute the
| | 01:47 | value of what the attribute should be.
| | 01:50 | This is really useful when, for example,
you're in a loop and you're using index
| | 01:54 | values to calculate values of an attribute.
| | 01:58 | Say for example, suppose you're
looping through a series of images and
| | 02:02 | you're numbering things in ascending
order, this little function right here
| | 02:06 | would be used as a callback.
| | 02:07 | So as each attribute is set, you can use a
function to calculate what its value should be.
| | 02:12 | Then finally there is the Remove
attribute function and that removes an
| | 02:17 | attribute from all of the
matched elements in the set.
| | 02:21 | Now that we've seen how to inspect and
change attributes, let's jump over to the code
| | 02:25 | and take a look at some examples.
| | 02:30 | So a couple of things you notice right away.
| | 02:32 | Here in the source code, actually let
me put it into Design view really quick.
| | 02:36 | You can see that on the page what I've
here is an image that's in the design surface.
| | 02:41 | And what we're going to be doing is
manipulating the attributes on this image
| | 02:45 | using the jQuery Attribute function.
| | 02:48 | So let's go back to the Source View,
and you can see that that's down here in
| | 02:53 | the body, here is the image, and
it's wrapped inside of a link tag.
| | 02:58 | Let's try a couple of different things.
| | 02:59 | So first, let's just
preview this in the browser.
| | 03:03 | You can see that the link, when you
click on the image, it's going to go off
| | 03:05 | to the Images folder.
| | 03:06 | Let's bring this up in the browser.
| | 03:08 | So when I click on this, you see that
it goes to a much larger version and
| | 03:11 | it's linked directly to the image itself.
| | 03:14 | Suppose however we wanted to have
link tags in our page open up new browser
| | 03:18 | windows. We can do that really easily.
| | 03:21 | So how do we do that?
| | 03:23 | What we would do in that
case is something like this.
| | 03:25 | Write a jQuery expression that would
get all the link tags in a document, and
| | 03:31 | then we would set the
attribute for target to be blank.
| | 03:37 | Now remember, if you were to type this
on a link tag in HTML, this means when
| | 03:44 | the user clicks on it, it tells the
browser to open the page in a new window.
| | 03:49 | Here, we're just doing this automatically.
| | 03:50 | This will look through all the link
tags on a page and set the target attribute
| | 03:54 | to be blank, so that all
links will open in new pages.
| | 03:57 | I am going to save that and
here we are back in the browser.
| | 04:00 | So we're going to refresh, and now
when I click on this, you can see it's
| | 04:04 | showing me the image in a new window.
| | 04:06 | All right, let's try something else.
| | 04:08 | Let's close this and go back to the code.
| | 04:11 | So let's comment this out.
| | 04:12 | So what I am going to do
now is remove an attribute.
| | 04:15 | So I am going to do the same thing.
| | 04:16 | I am going to get a reference to all
the link tags and now I am going to
| | 04:20 | remove the href attribute.
| | 04:24 | I am going to save that
and go back to the browser.
| | 04:27 | I am going to refresh.
| | 04:28 | So now you can see that the little
border has disappeared from the image,
| | 04:32 | because what's happened is I've removed
the href from the link, which means that
| | 04:36 | as far as the browser is concerned,
this is not a valid link anymore.
| | 04:40 | So if you want to turn links on and off,
this is a way to do it. One last example.
| | 04:46 | Let's go back to the code.
| | 04:47 | So let's try setting
attributes as a properties object.
| | 04:51 | So to do that, what I am going to do
is write jQuery statement that gets the
| | 04:56 | image, and I am going to write attr.
| | 05:00 | Only this time, I am going to use
an object to set the attributes.
| | 05:04 | So I am going to set the source
attribute to be a different image and it's
| | 05:08 | going to be images/Spring.jpg.
| | 05:15 | I am also going to set the
Alt tag to be the word Spring.
| | 05:21 | So I am going to save, switch over to
the browser, and I am going to refresh.
| | 05:26 | You can see that when I loaded it,
it changed the source of the image to the
| | 05:30 | Spring image, and it also changed the
Alt tag, although we don't really have
| | 05:34 | the way of seeing that.
| | 05:35 | But that's how you can set multiple
properties on a single object. Okay.
| | 05:40 | That wraps it up for attributes. Let's move on.
| | Collapse this transcript |
| Inserting content| 00:00 | Let's take a look at
inserting content using jQuery.
| | 00:04 | So, jQuery provides several functions
for inserting content into the document
| | 00:10 | and for modifying the
document object model's DOM tree.
| | 00:16 | And you can insert content into the
document before and after existing page elements.
| | 00:21 | You can also insert content inside of elements.
| | 00:24 | There is a bunch of functions to do this.
| | 00:27 | So, let's go over them.
| | 00:28 | Append and Prepend functions allow you to
insert content inside of other elements.
| | 00:36 | So the Append function takes the
content here and that will append the content
| | 00:42 | inside every one of matched elements
that this function is being called on.
| | 00:47 | Conversely, the Prepend function will
take content and put it at the beginning
| | 00:52 | of the inside of every matched element.
| | 00:55 | The appendTo and prependTo
work pretty much the same way.
| | 00:59 | Although they're called on jQuery selectors.
| | 01:04 | So, in this case, you're specifying the
content to append; in this case you're saying
| | 01:08 | here is the set of matched elements I
want to append or prepend content to.
| | 01:12 | So, that's for inserting inside of elements.
| | 01:14 | The after and before are kind of
analogous to the Append and the Prepend functions.
| | 01:20 | So, the After function takes
content and inserts it after each one of
| | 01:25 | the matched elements.
| | 01:27 | The Before function inserts content
before each one of the matched functions.
| | 01:32 | And we saw an example of the After
function in one of our previous lessons when
| | 01:36 | we were building our annotated page links.
| | 01:39 | The insertAfter and
insertBefore again, they work the same way.
| | 01:42 | Only in this case, they take jQuery
selectors to insert matched elements before
| | 01:47 | or after another set of matched
elements that will match this selector.
| | 01:51 | Let's take a look at some
examples and we'll see how this works.
| | 01:56 | Here in the exercise_files folder,
I am going to open up the inserting_start file
| | 02:01 | and this is the
finished version right here.
| | 02:04 | So, let's go ahead and do that.
| | 02:05 | I am going to open this up in my editor.
| | 02:06 | So, you can see we're back using pretty
much the same document that we've been
| | 02:11 | using for a couple of different examples now.
| | 02:13 | This is the one with the
unordered list and some paragraphs.
| | 02:16 | So, here's what we're going to do.
| | 02:18 | Let's jump back over to source code.
| | 02:20 | Let's try out some of these functions.
| | 02:21 | So, first thing I am going to do is
write a jQuery statement for paragraphs.
| | 02:27 | So, I am going to get all the
paragraphs in the document and I am going to
| | 02:31 | append some content to them.
| | 02:33 | And what I am going to append is a
string that says "with some content appended."
| | 02:42 | Okay, so if we scroll down you see that
This is paragraph 1, This is paragraph 2
| | 02:46 | and we're going to add the
string on to the end of each one.
| | 02:49 | So, let's go ahead and back out to the browser.
| | 02:50 | We're going to start this up.
| | 02:53 | And you can see what happened was each
one of the paragraphs now has the string
| | 02:56 | with some content appended on it.
| | 02:58 | That content was appended to each one
of the matched elements and in this case,
| | 03:02 | let's go back to the code.
| | 03:03 | We've got all of the paragraphs.
| | 03:06 | If I were to do something like a
filter like last or first or something then
| | 03:10 | only those paragraphs would have been affected.
| | 03:12 | So, let's try something else.
| | 03:15 | Let's do the opposite.
| | 03:15 | Let's do p, only this
time we're going to prepend.
| | 03:19 | I am going to write, "Hello!" Okay.
| | 03:25 | So now the same thing is
going to happen this time.
| | 03:27 | I am going to save and we're
going to back out to the browser.
| | 03:30 | Okay, now when we refresh, you can see
that in this case the word Hello has
| | 03:34 | been prepended or inserted at the
beginning of each paragraph. Back to the code.
| | 03:38 | Let's get a little more fancy.
| | 03:40 | What we're going to do now we're
going to use the appendTo and prependTo
| | 03:44 | functions for manipulating the DOM tree.
| | 03:47 | So what we're going to do is write a
jQuery accessor that says get me the last
| | 03:53 | paragraph and append
that to the first paragraph.
| | 04:01 | Let's save that.
| | 04:02 | Go to the browser and see what happens.
| | 04:04 | I am going to refresh.
| | 04:07 | And you can see what happened is paragraph 4,
which used to be down here at the bottom,
| | 04:10 | has now been appended to paragraph 1.
| | 04:14 | So, we took the last paragraph
and appended it to the first.
| | 04:18 | Let's do a variation on that theme.
| | 04:20 | Comment this one out.
| | 04:22 | But using that as the basis for the next one.
| | 04:24 | What we're going to do in this case is
instead of appendTo, we're going to say prependTo.
| | 04:31 | Okay, so now we're going to save.
| | 04:34 | Go back to the browser.
| | 04:35 | So, now I am going to refresh it and you
can see now that the last paragraph has
| | 04:40 | been prepended in front of the first paragraph.
| | 04:43 | Okay, so I think you pretty much get the idea.
| | 04:45 | This pretty much wraps up using
the content inserting functions.
| | 04:49 | That should give you an idea of how
you can insert content into your document
| | 04:52 | and use these functions to move
elements around within the DOM tree.
| | Collapse this transcript |
| Wrapping, replacing, and removing content| 00:00 | In this lesson, we are going to see how
to use jQuery for wrapping, replacing,
| | 00:05 | and removing content.
| | 00:07 | Up until now, we have seen how to insert
and manipulate some content, but now we
| | 00:11 | are going to do a little
bit of additional operations.
| | 00:15 | So, in addition to inserting content,
jQuery has a bunch of functions for doing
| | 00:20 | some additional operations like
wrapping content in the page, replacing it,
| | 00:24 | copying it, removing it, all that great stuff.
| | 00:26 | So here is the list of functions
that you use in order to do that.
| | 00:30 | And as you can see there is a half-a-
dozen functions just for wrapping the content.
| | 00:35 | So, let's take a look at those.
| | 00:37 | The Wrap functions basically
takes matched elements and wraps them
| | 00:41 | inside something else.
| | 00:43 | So, in this case for example the
Wrap function will take each one of the
| | 00:48 | elements on the matched set that you are
calling the Wrap function on, and place
| | 00:52 | them inside the HTML that you specify here.
| | 00:54 | So, for example if I was calling the
Wrap function on a whole bunch of images,
| | 00:58 | and I passed the String, like DIV
inside here, then each one of the images will
| | 01:02 | be wrapped inside it's own separate DIV.
| | 01:05 | Similarly, the Wrap Element
works pretty much the same way.
| | 01:09 | Each one of the elements inside the
matched set that this is being called on,
| | 01:12 | will be wrapped inside the
element that I specify here.
| | 01:16 | The wrapAll works pretty similarly
although what it does is rather than wrapping
| | 01:20 | each one of the individually
matched elements into it's own wrapper.
| | 01:25 | It will take all of the elements inside
the matched set and place them in either
| | 01:30 | the HTML that I am
specifying here, or the element.
| | 01:33 | And finally, the wrapInner functions
will wrap the inside trial contents of each
| | 01:40 | matched element, including text
within either HTML or the DOM element that
| | 01:46 | specify here assuming that the DOM
element that I am passing is allowed to have
| | 01:51 | children inside of it.
| | 01:52 | So, for example Images can't
have child elements inside them.
| | 01:55 | So that would work.
| | 01:56 | If I call wrapInner on an ul tag and I
had a whole bunch of allies, then all
| | 02:01 | those allies will be wrapped inside
whatever I passed in as this HTML or this
| | 02:05 | HTML or this element.
| | 02:07 | So that's wrapping you can also replace.
| | 02:10 | So the replaceWith function, you give
it some content, and it will replace
| | 02:15 | all of the matched elements in the result
set with whatever content you specify here.
| | 02:21 | And content either be HTML
or a series of DOM elements.
| | 02:26 | And the replaceAll basically replaces
the elements that are matched by the
| | 02:30 | selector with the matched elements.
| | 02:32 | So, this selector here is going to be
used to find which should be replaced by
| | 02:37 | the all the elements that are being called on.
| | 02:40 | And the last couple of functions are
some pretty convenient functions, Empty
| | 02:44 | basically removes all the child notes
from all the elements that are in the set,
| | 02:48 | and you are calling it on.
| | 02:50 | Remove just removes all the
matched elements from the DOM.
| | 02:53 | So, what you do is you write your
jQuery selector, then you Call, Remove and
| | 02:56 | then all those elements taken out the document.
| | 02:59 | Then the Clone function makes copies.
| | 03:01 | So, this Clone function clones the matched
DOM elements and then selects all the clones.
| | 03:07 | This version here which takes a Boolean
argument, if you pass True then it will
| | 03:13 | clone not only the elements, but it
will also copy all the event handlers,
| | 03:18 | whereas this one will not.
| | 03:20 | Okay so that's a trip down that function set.
| | 03:22 | Let's take a look at some examples in the code.
| | 03:25 | I am going to open up my
wrapping_start file right here.
| | 03:29 | The same document we have been working on.
| | 03:31 | The list is here paragraphs, and so on.
| | 03:33 | Let's do a couple of experiments.
| | 03:35 | So let's wrap all the paragraph tabs,
and let's wrap each one into a DIV who's
| | 03:45 | style has been set to color:red.
| | 03:50 | So all the text inside those DIVs should be red.
| | 03:54 | We need to put that in a tag.
| | 03:56 | So, let's do that and
then let's close the DIV off.
| | 04:00 | Okay, so let's try that out, go to
the browser and see what happens.
| | 04:04 | So, you can see that the
paragraphs two and four.
| | 04:07 | The ones that did not have classes set
on them, have now changed to Red text.
| | 04:13 | And that's because these guys do not
have any style set, so their text color is
| | 04:18 | being affected by the DIV
that it was wrapped into.
| | 04:21 | Let's try another example.
| | 04:22 | Let's go back to the code.
| | 04:24 | Let's try wrapping all of the paragraphs in
a DIV whose style is let's just see, border:
| | 04:33 | 3px solid red, save.
| | 04:37 | And go back to the browser and let's refresh.
| | 04:41 | You can see that the wrapAll
functions has taken all of the paragraphs, and
| | 04:46 | wrapped them inside a DIV whose
border is now red, and three pixels wide.
| | 04:51 | Okay so far so good.
| | 04:52 | Let's go back to the code,
let's comment this guys out.
| | 04:55 | All right, now let's try
the remove the Empty function.
| | 04:59 | So, I am going to write a expression
here that gets the unordered list and I am
| | 05:04 | going to call Empty, and go back to
browser and refresh, and you can see that
| | 05:08 | the list items have now all then
emptied out from the unordered list.
| | 05:14 | Okay, so that should give you a pretty
good idea of how these functions work.
| | 05:17 | Now you have seen how to create content,
you've seen how to insert it, and now
| | 05:22 | you're going to go have to do some
other manipulations on it like wrapping and
| | 05:25 | replacing and removing.
| | Collapse this transcript |
| Working with CSS| 00:00 | jQuery's CSS functions provide easy
cross-browser access for setting properties
| | 00:06 | as well as working with positioning and sizing
information for elements that are in your webpage.
| | 00:12 | The CSS function allows you to
retrieve and set styles for a set of matched
| | 00:17 | elements, and up until now throughout
this title you've probably been seeing me
| | 00:21 | use that CSS function to make some of
the early examples in this course visible
| | 00:26 | to you to on the screen.
| | 00:27 | So we are going to take a few
moments and learn what it actually does.
| | 00:31 | So it has a few different forms.
| | 00:33 | The first and simplest form is this one
right here, CSS, and you give it a named property.
| | 00:38 | This will return the value of the
named, right here, CSS property for first
| | 00:44 | matched element that you specify here in
the result set that you are calling this on.
| | 00:49 | The next version right here is
CSS with the properties argument.
| | 00:52 | This will set the CSS properties of
every matched element in the result set
| | 00:56 | using in object notation syntax, and
this is very similar the attribute example
| | 01:01 | that we saw earlier.
| | 01:03 | You can see here is an example of just
creating an object that has a couple of
| | 01:06 | properties and values to go with each
one and then calling the CSS function with
| | 01:11 | that object to set the properties on
the results of a jQuery expression.
| | 01:17 | But if all you want to do is set a
single style property to a value on all of
| | 01:21 | the matched elements,
you can do that right here.
| | 01:23 | This simply takes the name of a
property like width or height or opacity or
| | 01:27 | whatever, and sets it to
whatever value you give it.
| | 01:30 | Now if you just provide a number here
rather than string, it's going to be
| | 01:33 | converted automatically into a pixel
value, except for certain CSS properties,
| | 01:38 | and you can see those listed here like
z-index, or font-weight, or opacity, or
| | 01:43 | zoom, or the line-height.
| | 01:45 | Those do not take pixel values.
| | 01:47 | So that won't happen there.
| | 01:48 | jQuery also provides a set of
functions for working with CSS classes.
| | 01:53 | Again, this is used very commonly in
things like animation or interactivity.
| | 01:57 | You are setting styles on elements
and taking them off and jQuery provides
| | 02:01 | functions for adding and removing,
toggling, and detecting these classes.
| | 02:06 | You can see those in this table.
| | 02:07 | So as you might expect the addClass
will add a class or classes to each one of
| | 02:14 | the matched elements.
| | 02:15 | The hasClass function will return true,
if the specified class is present on
| | 02:22 | at least one of the elements that are in
the result set that you are calling this on.
| | 02:26 | The removeClass is the opposite of addClass.
| | 02:28 | It just simply takes that class
off from all the matched elements.
| | 02:31 | Then there is the toggle function.
| | 02:33 | So the toggleClass will add this class
if it's not there already and it will
| | 02:36 | remove it, if it is present.
| | 02:38 | You can also call it with switch.
| | 02:39 | You can say hey, add it if the switch is
true or remove it if the switch is false.
| | 02:45 | So moving on, let's take a
look at the positioning functions.
| | 02:48 | So CSS positioning functions provide
a cross-browser way of figuring out where
| | 02:53 | elements are on the page.
| | 02:55 | There is a variety of functions for this.
| | 02:57 | So the offset function gets the current offset.
| | 03:00 | This comes back within
object that has a top and a left.
| | 03:03 | So same thing here.
| | 03:05 | This is the offsetParent.
| | 03:07 | It figures out the position parent of the
first matched element in the result set.
| | 03:12 | Position also comes back with
a point, a top and the left.
| | 03:14 | This gets the top and left position
of an element relative to the parent
| | 03:19 | that it's inside of.
| | 03:20 | Then the rest of the
functions deal with scrolling.
| | 03:22 | So for example this scrollTop will
either get or set the scrollTop offset of
| | 03:28 | either the first matched element in
the case of getting it or you can set
| | 03:32 | the scrollTop offset for all the
matched elements in a result set, and
| | 03:35 | the same thing for the left.
| | 03:38 | Then finally the CSS sizing information.
| | 03:41 | You can figure out how big elements
are by using a variety of functions that
| | 03:44 | jQuery gives you, and again
these work across browsers.
| | 03:48 | So the height functions will either get
the current computed at by the browser
| | 03:53 | pixel height of the first matched
element in the set or you can set the height
| | 03:57 | of all the matched elements.
| | 03:59 | Same thing for width.
| | 04:00 | You get the current width as it's been
computed by the browser or you can set the width.
| | 04:04 | The innerHeight and innerWidth will,
for example, get the inner height and
| | 04:08 | that means excluding the border, but
including the padding for the first matched element.
| | 04:15 | The same thing for innerWidth.
| | 04:17 | This will figure out how wide something
is, but again excluding the border and
| | 04:21 | including the padding.
| | 04:22 | Then outerHeight and
outerWidth work just the opposite.
| | 04:25 | They will get the outer height, which
includes the border and padding by
| | 04:30 | default for the first matched element.
| | 04:32 | If you pass true for the margin, then
the margin values are also included.
| | 04:37 | The same thing for outerWidth.
| | 04:38 | It will get the outer width as it's
been computed by the browser and again you
| | 04:43 | can ask to have the margin included.
| | 04:44 | So that's a lot to digest.
| | 04:46 | Let's take a look at
some of these functions in action.
| | 04:50 | So in the exercise folder, I have a
file right here called css_sizing and I am
| | 04:55 | just going to bring this up in the
browser, so you can see what's happening.
| | 04:58 | So you can see that we have a div here
on the page and I am using some jQuery to
| | 05:03 | compute various pieces of
information about this object.
| | 05:07 | So you can see I have got the Height
and Width here and the innerHeight and
| | 05:11 | innerWidth, and the outerHeight
and outerWidth and the offset and the
| | 05:16 | position in the page.
| | 05:18 | So what I want to do now is go back to
file system and bring this up in Firefox.
| | 05:21 | What you are going to see is that when
Firefox comes up, and let me unmagnify
| | 05:26 | this and move it over.
| | 05:27 | You can see the values are pretty
much the same for both browsers.
| | 05:32 | They are both 180, they are both 250.
| | 05:34 | You can see down here as well that the
offset here is a little bit different for
| | 05:39 | the offset and position.
| | 05:40 | So let's go into the code and see that.
| | 05:44 | The position is being calculated by
the position and the offset is being
| | 05:50 | calculated by the offset.
| | 05:51 | Now the offsets, remember, are a little
bit different for each one of those guys.
| | 05:56 | The top and left relative to the document.
| | 05:58 | So here what we were doing
is here are all of the spans.
| | 06:01 | We are calling each one of these functions.
| | 06:03 | So for the height, I am calling the
height function, the width function, and
| | 06:06 | you can see here when the results are
filled out that that's where the
| | 06:12 | values all go and you can see that that's
how the browser is measuring each one of these guys.
| | Collapse this transcript |
| Associating data with page elements| 00:00 | jQuery provides a couple of very useful
methods for associating arbitrary data
| | 00:05 | with elements on the page.
| | 00:07 | There are several scenarios
where this is pretty useful.
| | 00:10 | For example, you might have an image on
a page, and you might want to associate
| | 00:14 | some data with that image such as who
the photographer is, and when and where
| | 00:19 | the photo was taken. Or maybe you have
a series of div elements on a page, and
| | 00:24 | each one of those divs contain some
information about, say, an employee record,
| | 00:29 | and you want to associate some data at
runtime such as the employee name and
| | 00:33 | their position and so on.
| | 00:34 | jQuery makes that really easy, by
providing a couple of methods that are used
| | 00:39 | for working with data.
| | 00:40 | So, here on the jQuery site, I'm going to
jump over to the API documentation, and
| | 00:44 | that takes me to api.jquery.com.
And I am going to search for data, or
| | 00:49 | alternatively, I can also just scroll
down here to the Data category. Either one
| | 00:54 | of those works. And here is the
method we are going to look at.
| | 00:57 | We're going to look at the data method.
| | 00:59 | Now the data method is used to store
and retrieve data associated with elements
| | 01:03 | on the page, and there's two ways of calling it.
| | 01:06 | This group right here with the key and
the value, and this instance here, the
| | 01:10 | object, that's how you store data on a
page element, and then the second group
| | 01:14 | down here is how you retrieve the data.
| | 01:17 | Now, the way data is
stored is by keys and values.
| | 01:21 | So for example, in the first way of
calling it here, you give it a string,
| | 01:25 | which is the key that you want to
associate the data with, and then the value
| | 01:29 | is any JavaScript object.
| | 01:31 | It can be a number, it can be a string,
it can be an array, it can be a complex
| | 01:36 | JavaScript object. Or you can just
give it an Object which contains a whole
| | 01:40 | bunch of key-value pairs to put
the data into the page element.
| | 01:46 | Then the other method we want to
look at is the removeData method.
| | 01:50 | So, let's go back down here.
removeData is how you remove data from an element
| | 01:57 | or set of elements on the page.
| | 01:59 | Again, you can give it the element to
remove the data from, and if you want, you
| | 02:04 | can give it an optional string, which
is the individual key for the data you
| | 02:09 | want removed. Or if you just don't
provide any key name at all, then all of the
| | 02:13 | data will be removed.
| | 02:14 | So, let's jump over to the Example Files folder.
| | 02:17 | I have got my data_start.html page
right here, and this is the file we're going
| | 02:25 | to use to exercise these methods.
| | 02:26 | So, I am just going to double-click on
it and bring it up in the browser, and
| | 02:28 | you can see I've a DIV here
on the page with some buttons
| | 02:32 | that are going to associate and
otherwise exercise our data method.
| | 02:38 | Let's go over to the code and
write the code for this example.
| | 02:42 | Here we were on the code for that file.
This is my data_start file.
| | 02:47 | Here is my reference to jQuery library.
| | 02:49 | Here are the buttons down here that are
going to trigger each one of these methods.
| | 02:53 | Now, we haven't yet covered how to
associate events with elements in jQuery, and
| | 02:59 | we will see how to do that later.
| | 03:01 | So, don't pay too much attention right
now to these click functions. How these
| | 03:04 | work will become clear later on in the course.
| | 03:08 | All you need to know is that's how I am
going to attach event handlers to each
| | 03:11 | one of these buttons to exercise the
methods I am going to be showing. All right!
| | 03:15 | So, for the first one what we're
going to do is when the user clicks on the
| | 03:20 | store button, we want to
store data with the div.
| | 03:23 | So, here in the event handler for the
store button, let's just go ahead and
| | 03:28 | write some code to do that.
| | 03:29 | We're going to get the element, which is I
believe div1, so I'll give it the id for div1.
| | 03:37 | That's this id right here.
| | 03:40 | So, will get #div1, and we will say
.data, and we will give it a key, and I'll
| | 03:47 | just use the name key1. Then we have to
give it the data we want associated with
| | 03:52 | the div and I'll just give it a number 1234.
| | 03:54 | We will store another piece of data on a
different key, so we'll do the same thing.
| | 04:00 | We will say data. And in this case I'll call
it key2, and this time I'll give it a string.
| | 04:09 | I'll just use my name.
| | 04:10 | Okay, so that's how we
store data on the div element.
| | 04:15 | What's going to happen is the button
will be clicked and then for these two
| | 04:19 | keys, we will just store some arbitrary
data, and then our program can use this
| | 04:22 | data however it sees fit.
| | 04:24 | To remove the data when the user
clicks on the remove button, we're going to
| | 04:28 | get a reference to our div, and
we'll just simply call removeData.
| | 04:36 | That will remove any of
the data that is on the div.
| | 04:41 | Finally, we have to have some way
of making sure this is all working.
| | 04:44 | I'm going to have a function
here in the show event handler
| | 04:50 | that's going to just display a couple
of alerts to see if there's any data.
| | 04:54 | So, we will just say alert.
| | 04:56 | We will get the div here, so that's div1.
| | 05:02 | This time we're going to call the data
function, and we're going to pass in the
| | 05:07 | name of the key that we're interested
in, but we're not going to pass in any
| | 05:11 | other parameters, because now
we want to retrieve the data.
| | 05:13 | We don't want to set the data.
| | 05:15 | We'll get the value for key1, and then
we will just copy this line and do the
| | 05:19 | same thing for key2, and
that should be good. All right!
| | 05:23 | Let's go back to the browser and
refresh the page and see if it works.
| | 05:27 | I am going to refresh the page here.
| | 05:29 | First I'm going to click show data
without having set anything, right?
| | 05:33 | And you can see that when I do that I
get an alert that has undefined in it, and
| | 05:38 | another one says undefined.
That's because I haven't stored the data yet.
| | 05:41 | Let's go ahead and click store data.
| | 05:43 | Now the data has been stored on the div.
| | 05:45 | Now let's click the Show button one more time.
| | 05:47 | We can see that's the first piece of data.
| | 05:49 | That's the 1234 that I set.
| | 05:51 | That was the number I supplied, and
then the next one is my name. OK.
| | 05:56 | So now let's click the Remove button,
so now the data has been removed from the
| | 06:01 | div and when we click this, once
again we're back to undefined. OK.
| | 06:06 | Let's do one more thing.
| | 06:08 | Let's show how you can
work with data attributes.
| | 06:11 | This is a new feature in HTML5.
| | 06:15 | Data attributes basically allow you to
put data directly on elements inside a page.
| | 06:21 | The way you do that is right here on the
div, I'm going to come down here to the
| | 06:24 | div and I am going to give it an attribute.
I am going to name it data-key3.
| | 06:30 | I'm going to give it a value of,
I don't know, I'm just going to say data attribute.
| | 06:38 | These data attributes, which begin
with data-, and this is a part of the
| | 06:43 | HTML5 specification.
| | 06:44 | This allows me to associate data
directly within the element, and then these
| | 06:48 | data attributes will automatically show up
whenever I try to use the data method in jQuery.
| | 06:54 | It will read the contents of any data
attribute I have on my elements and make
| | 06:59 | them available to me via the data method.
| | 07:01 | Let's try that out.
| | 07:02 | Let's go back up the show function,
and let's comment these two lines, put in
| | 07:07 | another line, and this time what we're
going to do is I'm going to say alert.
| | 07:11 | We're going to say let's get the ("#div1").
| | 07:13 | We're going to get the data() method.
| | 07:20 | And now we're going to call it with no
arguments whatsoever, because now we want to
| | 07:23 | get all of the data that's
associated with the element.
| | 07:27 | So, we'll close that off and we'll save
and we will go back to the browser.
| | 07:33 | All right, back here in the
browser, I am going to refresh.
| | 07:37 | Now, I haven't stored any data yet,
but watch what happens. When I click show
| | 07:41 | data, you see okay, there is an object
that's on the element, and it's showing up
| | 07:45 | as an object in the JavaScript alert.
| | 07:47 | So, let's go back to the code
and make it show up as a string.
| | 07:50 | Okay, so back here in the code,
I'm going to take that object and I am going to
| | 07:57 | show it as a string.
| | 07:59 | And the way that you do that is you can
use the browser's built-in JSON object.
| | 08:03 | So, I am just going to type JSON and
I am going to write stringify, okay.
| | 08:09 | We will give it the data element, and
it takes a couple of other parameters.
| | 08:15 | So the first one is going to be what's
called a replacer element, and I am not
| | 08:19 | going to use it, I am just going to
pass in null, and then I am going to
| | 08:21 | pass in a couple of spaces, which
will cause the JavaScript object to be
| | 08:27 | converted into a string and
pretty printed with these spaces.
| | 08:31 | All right, I'll save. Back to the
browser, refresh, click on show data, and you
| | 08:38 | can see now that the key3 attribute,
which is already in the source code, has a
| | 08:44 | string value of data attribute.
| | 08:46 | And notice that the data- part of the
key name is stripped off. That's not part
| | 08:50 | of the actual attribute name; that's
just what the browser uses to indicate that
| | 08:54 | something is a data attribute.
| | 08:56 | So everything following the data- is
what the actual attribute of the data is
| | 09:02 | when it's put into the data
handling method of jQuery.
| | 09:05 | So, let's click OK.
| | 09:07 | Now, I'm going to store the data,
like I did the first time around.
| | 09:11 | You'll see that when I click show
data, the key that's already on the
| | 09:16 | element via the data attribute is
there, along with the two keys that I added
| | 09:21 | via the JavaScript code. All right!
| | 09:23 | So, that's how you can associate
arbitrary data with page elements using the
| | 09:27 | jQuery data methods.
| | Collapse this transcript |
| Practical example 2: Automatic TOC generator| 00:01 | All right, in this example, what we
are going to do now is take what we've
| | 00:03 | learned in this chapter and we are
going to build a practical finished example.
| | 00:08 | The example what I am going to build is an
automatic table of contents for a document.
| | 00:13 | If you look inside the exercise files,
you will see these two files right here,
| | 00:19 | AutoTOC_start and AutoTOC_finished, so
I am going to build this example starting
| | 00:24 | from the starting point and you could
either follow along with me or you could
| | 00:27 | just go ahead and jump
right to the finished version.
| | 00:29 | Before I do that though, I am going
to bring up the finished version in the
| | 00:33 | browser so you can see what it's doing.
| | 00:35 | So let's just double-click on this guy.
| | 00:37 | You can see that this is a document
that's got a whole bunch of you know Lorem
| | 00:41 | ipsum text in it and there is a
whole bunch of these headings, right.
| | 00:44 | There is the Introduction.
| | 00:45 | There is this heading here and so on.
| | 00:47 | This right here, this Table of Contents,
contains a bunch of links that jump to
| | 00:52 | the various places in the document.
| | 00:55 | So for example, if I click on this guy,
you see it jumps right down to that
| | 00:58 | heading and I go back. I can jump to this
guy down here and it goes right to that heading.
| | 01:02 | This Table of Contents, what's happening
is this is being built up automatically
| | 01:06 | by some jQuery code.
| | 01:08 | So we are going to see how to build that
automatic TOC Generator, which will look
| | 01:15 | through the document for various kinds
of headers and then use those to build
| | 01:21 | named anchors inside the
document where we want to jump to.
| | 01:25 | Okay, so let's do that.
| | 01:27 | I will close this and I am
going to bring this up in my editor.
| | 01:33 | So here is the starting point and what
we are going to do is write this function
| | 01:38 | here called buildBookmarks.
| | 01:40 | You can see that when the document.ready
event fires that function is being called
| | 01:45 | and it's being called with two arguments.
| | 01:48 | The first argument is the type of
header tag that we want to serve as the TOC
| | 01:53 | locations and the second argument is
the id of the div that we want to append
| | 01:59 | the resulting Table of Contents HTML into.
| | 02:03 | So you can see that that's this div
right here that has the header id on it.
| | 02:08 | So that's where the title is.
| | 02:10 | This is where the subtitle is.
| | 02:11 | So we are going to build that Table
of Contents and put it in right at the
| | 02:15 | end of this div here.
| | 02:17 | The other thing you should realize
also is that each one of these sections in
| | 02:20 | the document is enclosed in a div and
has an id and there is these h3 tags that
| | 02:26 | are at the top of each one of the sections.
| | 02:29 | These are the headers for
each section in the document.
| | 02:32 | So what we are going to do is write some
jQuery code that builds this bookmark list.
| | 02:38 | So what we are going to do right off
the bat is write a jQuery statement that
| | 02:43 | creates the unordered list that's
going to serve as the table of contents.
| | 02:49 | So, the way we are going to do that is
just tell jQuery to make me a new list.
| | 02:56 | So we are just going to say make me an
unordered list whose id is equal to bookmarksList
| | 03:07 | and we'll just close that off. Okay.
| | 03:10 | So now I've got my new unordered list there.
| | 03:12 | So for each one of the header tags,
there is two things we need to do.
| | 03:17 | First, we need to create a named
anchor and insert it into the header tag
| | 03:22 | because that's going to serve as the
jump location for the links in the TOC.
| | 03:27 | Then we need to add that link into
this unordered list right here that will
| | 03:32 | point to the named anchor.
| | 03:35 | So what we are going to do is get
all the divs, because the sections are
| | 03:39 | all divided into divs.
| | 03:41 | So I am going to write a jQuery that
says get me all of the divs but I don't want,
| | 03:46 | so we'll just say not the div
where the id attribute is equal to header,
| | 03:53 | because we are not going to be
looking inside this guy right here.
| | 03:56 | That's where the TOC is going to go.
| | 03:58 | So get me every div that doesn't have
an id that's equal to the header, okay,
| | 04:04 | plus, so we'll look inside
divs, but we want the h3 tags.
| | 04:07 | That's what we need.
| | 04:09 | So I am going to add on the strWhichTag
argument and you can see strWhichTag is
| | 04:16 | the h3 that's being passed in.
| | 04:18 | So we are looking for h3s inside
the divs that are not the header div.
| | 04:23 | Now I am going to get a little bit tricky here.
| | 04:27 | So recall from earlier in the course
when I covered the Traversing section there
| | 04:31 | is a function called each, and I am
going to use the each function and the each
| | 04:37 | function is going to iterate over each
one of the contents that we find, because
| | 04:42 | there is two things that we have to do.
| | 04:44 | So I am going to write a function and
my each function is going to do a couple
| | 04:51 | of different things.
| | 04:52 | The first thing it's going to do is
create the named anchor and since we need
| | 04:57 | named anchors to be unique in the document,
we have to have unique way of naming them.
| | 05:02 | So what I am going to do is create a
little variable up here named AnchorCount
| | 05:08 | and I am going to initialize that to 0,
and we are going to increment that
| | 05:11 | value each times so that.
| | 05:12 | That way all the named
anchors have unique names.
| | 05:15 | So what I am going to say is inside the
each function, I am going to write this,
| | 05:20 | because the this keyword
will refer to the h3 tag.
| | 05:24 | So I am going to set the html for the
h3 tag to be a named anchor so, a name =
| | 05:34 | and then the name is going to be
bookmark and we are going to add the
| | 05:42 | AnchorCount to it, so that's
going to be cAnchorCount. Okay.
| | 05:46 | So now we are making the unique named
anchor and we are going to close that off now.
| | 05:51 | So we close off that named anchor tag
and that's going to set the HTML to the
| | 05:57 | named anchor, but now we need to
add in the existing HTML for the h3.
| | 06:00 | We don't want the h3 to be blown away.
| | 06:02 | So we are going to say
add this.existing html.
| | 06:09 | So what that does is take the
existing HTML for the h3 and just put a named
| | 06:14 | anchor right in front of it.
| | 06:17 | So now we have created the named anchor,
what we need to do now is add our link
| | 06:21 | to the list that we are creating.
| | 06:23 | So to do that, we are going to
write oList.append, so that's the list.
| | 06:30 | So we are going to say oList.append
and we are going to make a new list item.
| | 06:34 | So we are going to use jQuery to do that.
| | 06:36 | And I am just going to pass
the jQuery object some html.
| | 06:40 | That's going to be a list item, and
inside the list item, there is going to
| | 06:43 | be an anchor or a link and the href
is going to go to the named anchor for
| | 06:50 | the bookmark, right.
| | 06:52 | That's this guy that we made up here,
plus the cAnchorCount and then we are
| | 06:57 | going to increment the AnchorCount, Plus.
| | 07:01 | So closing HTML, plus the
text that's inside the h3.
| | 07:09 | And remember to get the text that's
inside the h3, we'll write this.text.
| | 07:15 | So we have created the anchor.
We need to close off the named anchor tag.
| | 07:19 | So before I forget that, we need to
close off the list, the link, and we need to
| | 07:26 | close off the list item.
| | 07:28 | So now we have created the named anchor,
we have created the list item and
| | 07:32 | we should be pretty much
good to go at this point.
| | 07:36 | So let's scroll back on over here. Okay.
| | 07:40 | So now after we have finished creating
the content that's going to go in the
| | 07:44 | list and the named anchor when this
loop here terminates, we need to put the
| | 07:50 | list of links we just created inside this div.
| | 07:55 | So now we are going to say jQuery, get
me the id for the BookMarkNode, right.
| | 08:05 | Remember it's passed in as a
variable and that's going to be header.
| | 08:09 | So get me the id for the div, .append, and
we are going to put the list into that div.
| | 08:20 | Okay, one more time.
| | 08:21 | Let's just see what this is doing.
| | 08:23 | So we have a variable that keeps
track of a counter, so that all of our
| | 08:27 | named anchors are unique.
| | 08:29 | We create an unordered list.
| | 08:31 | That's going to be the list of TOC.
| | 08:33 | For every div that's not the header,
plus the h3s, we are going to loop over
| | 08:38 | each one of those guys and we are
going to create a named anchor that goes in
| | 08:42 | front of the h3 tag.
| | 08:43 | That's the link destination.
| | 08:45 | Then we create a list item that has
the link into it that jumps to that named
| | 08:49 | anchor and so we do that for each one
of the h3s and when we have done that,
| | 08:54 | we put the entire list into the div.
| | 08:56 | All right, here we are on the browser
and you can see that when I bring up the
| | 09:01 | document, that's exactly what happened.
| | 09:03 | So now each one of these h3s has a
little invisible named anchor in front of it.
| | 09:07 | So when I click, it jumps right there
and you can see that the text of each one
| | 09:15 | of these link items
is the same text as the h3.
| | 09:20 | Okay, that pretty much wraps it up.
| | 09:21 | Now you know how to use content
manipulation and retrieval to solve a
| | 09:25 | real practical problem.
| | Collapse this transcript |
|
|
4. Working with EventsUnderstanding the jQuery event handling features| 00:00 | In this chapter, we're going to
handle working with events in jQuery.
| | 00:05 | So jQuery provides a mechanism for
working with events that is simpler than
| | 00:10 | relying on the Document Object Model.
| | 00:13 | And if you've ever worked with events
in modern webpage development, one of
| | 00:17 | the things you've probably noticed is
that it's pretty frustrating because the
| | 00:20 | different browsers have different ways of
working with the modern event implementations.
| | 00:26 | Specifically, IE has its own way of
attaching events to and disconnecting them
| | 00:32 | from elements, which is separate from
the DOM Level 2 Specification, which is
| | 00:38 | what a lot of the other browsers follow.
| | 00:41 | And because jQuery works with sets of
elements by default, it's very easy to
| | 00:47 | write code that assigns event handlers
to groups of objects, just by using the
| | 00:52 | results of the selectors and
filters that we've already seen.
| | 00:57 | So jQuery events basically break
down into a couple of categories.
| | 01:01 | The first is the Binding and Unbinding category.
| | 01:05 | These functions allow you to wire
events up, and take them off of elements in a
| | 01:10 | simple cross-browser way.
| | 01:12 | And we'll see an example of that in a moment.
| | 01:15 | The next is the Unified Event Object.
| | 01:18 | Another thing that you've probably
noticed if you've done web development or
| | 01:22 | cross-browsers with modern events is
that the event object is slightly different
| | 01:27 | between the IE browsers and other
browsers, and jQuery solves that problem by
| | 01:32 | creating a unified event object that
exposes the properties and methods that you
| | 01:38 | use most commonly in a cross-browser way.
| | 01:43 | Then finally there is a bunch of
convenience features and these are basically
| | 01:47 | functions that encapsulate a lot of
common event features and helper routines
| | 01:52 | that work cross-browsers and
we'll see an example of those as well.
| | 01:55 | So now that we understand what event
handling in jQuery is and what we are going
| | 02:00 | to do, let's see a good example.
| | Collapse this transcript |
| Binding and unbinding events| 00:00 | Let's start by seeing how to use
jQuery to wire up event handlers to elements
| | 00:06 | on our page. And so here in the API
Documentation section on the jQuery site,
| | 00:11 | I'm just going to scroll on down to the
Events section, and I'll click on Event
| | 00:16 | Handler Attachment.
| | 00:17 | And the functions that we're going to
be covering are the on and off functions.
| | 00:22 | On is used to attach an event handler
for one or more events to the selected
| | 00:28 | elements in the page, and then the
off function removes an event handler.
| | 00:32 | Now, you might see older jQuery code
using functions like bind and functions
| | 00:37 | like unbind, and there are
functions like live and die.
| | 00:41 | These functions are from older versions
of jQuery, and you can see that some of
| | 00:45 | them have already been deprecated.
| | 00:47 | So, for example die and live,
they've been deprecated as of jQuery 1.7.
| | 00:51 | Bind and Unbind still work, but at some
point, they'll be deprecated too, and the
| | 00:56 | on and off functions are pretty much
the way forward for attaching events.
| | 01:01 | So, let's take a quick look at the on function.
| | 01:03 | Here, in the on function, you can
see it takes a variety of arguments.
| | 01:07 | The Events argument is a
space-separated string for the events that you want to
| | 01:13 | attach, for example click or
mouse down or mouse up or whatever.
| | 01:19 | The selector argument here is
optional, and that's used to filter out
| | 01:24 | descendents of the selected elements
that are going to trigger the event.
| | 01:28 | And we're not going to cover that right
now, but we will see it a little bit later.
| | 01:32 | The data argument can be anything.
| | 01:33 | That's just any arbitrary data that
you want passed to the event handler when
| | 01:38 | the event is triggered.
| | 01:39 | So, if there's some data that you want
to use inside your event handler, you can
| | 01:43 | do that. And then there's the handler
argument, which essentially is the function
| | 01:46 | that's going to be
triggered when the event happens.
| | 01:49 | That's where your event handling code will be.
| | 01:51 | Enough of me just talking about it;
let's go over to the code and actually see this in action.
| | 01:56 | So, what I'm going to do is bring up
the binding_start file in the browser.
| | 02:00 | So let me just launch that.
| | 02:02 | And this is the test file that we're
going to be using to exercise these functions.
| | 02:05 | You can see that right
now it doesn't do anything.
| | 02:09 | But when we get finished, this will be
causing some change in the page when I
| | 02:13 | mouse over and mouse out of this element.
Let's go over to the code.
| | 02:16 | Here in the code for my example file,
a couple of things I want to point out.
| | 02:22 | First, we have a couple of style
sheets, one called normal, one called
| | 02:25 | highlighted, and those will
become obvious in a moment.
| | 02:28 | Down here I have a div.
| | 02:29 | It has an ID of evtTarget, and the
current class is the normal class, which is
| | 02:36 | this one right here.
| | 02:37 | And we're going to wire up some event
handlers for when the user mouses over and
| | 02:42 | mouses out of this div, and we're going
to respond to that event by changing the
| | 02:47 | class to the highlighted class.
| | 02:49 | So, this will be changing between
yellow and red as the mouse comes in and
| | 02:53 | out of the element.
| | 02:54 | I'll start off by getting a
reference to the event target element.
| | 02:58 | So, I'm just going to write #evtTarget.
| | 03:02 | That gets me my target
element. And I'm going to write on.
| | 03:07 | Inside on, I'm going to
pass mouseover mouseleave.
| | 03:14 | These are the two events that I want
to attach a handler for, and I'm going
| | 03:19 | to write highlight.
| | 03:22 | Highlight is a function that I'm
going to write that handles the event.
| | 03:26 | It's going to be my event handler function.
| | 03:29 | Let's go ahead and write that right now.
| | 03:30 | I'm going to put that actually
outside of my document ready function.
| | 03:34 | So I will write function highlight,
and that takes an event argument because
| | 03:41 | it's an event handler.
| | 03:42 | Inside the highlight function, I'm going
to get a reference to my evtTarget again.
| | 03:48 | And this time I'm going to use the CSS
helper function called toggleClass, and
| | 03:57 | toggleClass is basically going to either
remove or add the highlighted CSS style
| | 04:05 | sheet, which is this guy right here.
| | 04:07 | So, let's go ahead and save that.
| | 04:08 | Let's just go ahead and
run what we have right now.
| | 04:10 | So, I'm going to go back to the
browser, and I'm going to refresh.
| | 04:15 | Now, you can see that when the mouse
is over the element, the highlighted CSS
| | 04:20 | class gets added, and then
when I mouse out, it gets removed.
| | 04:24 | So that's the toggleClass in action right there.
| | 04:27 | Let's go back to the code for a second.
| | 04:29 | Now, let's add a handler for the mouse-
clicking event which will turn off the
| | 04:37 | highlighting behavior.
| | 04:38 | I'm also going to add a
handler here for my evtTarget.
| | 04:44 | And in this case, I'm going to say
on("click". This time I'm just going to
| | 04:52 | pass an anonymous function right in here
which is an event handler, so it takes an event.
| | 04:58 | And inside this event handler
I am going to do two things.
| | 05:00 | First, I'm going to get my evtTarget,
and I'm going to do the off function.
| | 05:09 | So now, I'm going to turn off the
mouseover and mouseleave event handler, which
| | 05:18 | is the highlight function.
| | 05:22 | After I turn off the event, I'll just put
in some content in the div that says hey!
| | 05:28 | You know, you turned it off.
| | 05:29 | So I'll say ("#evtTarget").html, and in
there I'll just put a little paragraph
| | 05:38 | tag that says "You shut off the hover effect!"
| | 05:46 | Now, when the user clicks on this,
I'm going to turn off my mouseover mouseleave
| | 05:52 | events and put some HTML content in there.
| | 05:56 | And we'll close it off with
a semicolon, and we'll save.
| | 05:58 | Okay, let's go back to the browser.
| | 06:02 | Now, let's refresh. Okay.
| | 06:03 | So you can see that the
hover effect is still there.
| | 06:08 | And now when I click, you can see that now
the content says, "You shut off the hover effect!"
| | 06:13 | And now the hover effect is no longer working.
| | 06:17 | So, that's a basic introduction to
connecting events to elements using jQuery.
| | Collapse this transcript |
| Convenient event helper methods| 00:00 | In addition to basic functions for
wiring up events in jQuery, there are also a
| | 00:05 | whole bunch of higher-level event
handling functions that you can use to handle
| | 00:10 | common situations with events.
| | 00:11 | For example, if I'm here in the API
documentation, I'm going to scroll on down
| | 00:16 | to the Events section
and click on Mouse Events.
| | 00:18 | And you can see that there are event
handlers for things like click, and
| | 00:22 | double-click, hover,
mousedown, and mouseup, and so on.
| | 00:25 | These are all a whole bunch of common
high-level events that will happen in
| | 00:31 | your web pages, and jQuery provides some nice high-
level event handling functions to deal with them.
| | 00:37 | And so we're going to exercise some
of those in this particular lesson.
| | 00:41 | Let's go over to the Example Files folder.
| | 00:44 | Here in the Example Files I've got my
helpers_start document, and I'm going to
| | 00:50 | bring that up in the browser.
| | 00:53 | Again, this is pretty much the same
example we used in the previous movie.
| | 00:56 | We're going to use the helper functions
this time in order to hook up the hover
| | 01:01 | event, along with a couple of other things.
| | 01:03 | Let's go over to the code. All right!
| | 01:06 | So here in the code I've got pretty
much the same file as I had before.
| | 01:10 | This one has the div.
| | 01:12 | It's got the style sheets normal and
highlighted, only this time we're going to
| | 01:16 | write the code using the helper functions.
| | 01:18 | So, recall in the previous example I
used the on function to bind events for
| | 01:23 | mouseover and mouseleave.
| | 01:25 | However, jQuery gives me a
function that already does that.
| | 01:28 | So, I'm just going to write dollar sign,
and I'm going to get my evtTarget div.
| | 01:34 | And I'm going to use the hover function.
| | 01:36 | And the hover function basically takes
two functions, and those two functions
| | 01:42 | are what you want to happen when the mouse
enters something and when the mouse leaves.
| | 01:46 | In this case, they're both going to be
the same function, so I'm going to pass
| | 01:51 | highlight and highlight.
| | 01:53 | Now, I need to write the
highlight function, so I'm going to write
| | 01:57 | function highlight.
| | 01:59 | And it's an event handler, so it's
going to take an event argument, even though
| | 02:03 | I'm not going to use it.
| | 02:04 | Inside the highlight function I'm
going to write the code to get the event
| | 02:10 | target div, and I'm just going to toggle
its class like I did last time, and the
| | 02:15 | toggleClass is going to be highlighted.
| | 02:20 | Okay, that is this class right down
here, which will basically change the
| | 02:25 | background color to red. All right!
| | 02:27 | So, I'm going to save, and
let's go back to the browser.
| | 02:33 | Let's refresh the file.
| | 02:35 | And now you can see that I'm using the
hover function to achieve pretty much the
| | 02:40 | same result as I was achieving
using the on function to bind events.
| | 02:45 | Let's go back to the code.
| | 02:47 | Let's use a couple other functions.
| | 02:49 | Let's use a function for, let's see.
| | 02:52 | We're going to get the evtTarget, and
this time we'll use the click function.
| | 03:00 | For the click function what we'll do is
we'll call a function called fnClick1.
| | 03:07 | And that's what will happen
when the user clicks on it.
| | 03:09 | And let's add another one.
Let's do ("#evtTarget").dblclick.
| | 03:18 | This is for handling double-clicks.
| | 03:20 | And we'll just use the
fnClick2 function for this.
| | 03:25 | Now I'm going to write both of those.
| | 03:27 | So, here in the function for fnClick1--
and again that's an event handler, but
| | 03:34 | I'm not going to use the argument.
| | 03:36 | All I'm going to do is simply set the
content of the div, by using the HTML
| | 03:44 | function. I'm going to have it
say click for the fnClick2 function.
| | 03:51 | I'm just going to copy and paste this.
| | 03:53 | I'm going to write the word Double Click!
| | 03:58 | So, what's happening here is, when the
user clicks on the div, this function will
| | 04:03 | get called, and when they double-click on it,
this function will get called. So, let's save.
| | 04:08 | Let's go back to the browser. All right!
Let's refresh.
| | 04:10 | There is the hover behavior, and now
I'm going to click, and you can see that
| | 04:16 | the click handler causes
the content that say Click.
| | 04:18 | Now I'm going to double-click, and you can
see that the content changes to Double Click!
| | 04:23 | I can just do that to my heart's content now.
| | 04:26 | So, that's an example of using the
higher-level functions to achieve features
| | 04:31 | and effects that you would normally
have to use by using the lower-level event
| | 04:35 | binding functions, and
there's a whole bunch of these.
| | 04:38 | I encourage you to check them out.
| | Collapse this transcript |
| Using the jQuery event object| 00:00 | As I mentioned earlier one of the
frustrating things about writing
| | 00:04 | event handling code is that there is a
lot of differences among the IE browsers
| | 00:09 | and the browsers that use the DOM Event Model.
| | 00:13 | One of the big differences is in the way the
event objects are implemented in both browsers.
| | 00:19 | The IE Event Object and the DOM Event
Object have a couple of properties that
| | 00:24 | intersect, but for the most
part they are pretty different.
| | 00:26 | jQuery helps solve this problem by
smoothing these differences out and
| | 00:31 | providing a single event object with the most
important properties that you will use commonly.
| | 00:38 | You can see that here in the table.
| | 00:40 | Now, I haven't listed all of the
properties and methods because some of them are
| | 00:44 | kind of advanced and esoteric.
| | 00:46 | What I've done is listed the most common ones.
| | 00:48 | So just taking a look at
the properties available.
| | 00:51 | The type property is essentially the type of
the event that the event object is representing.
| | 00:57 | So it'll be a string representing
the event name, click for example, or
| | 01:01 | mouse down or whatever.
| | 01:02 | The target property is the
element that issued the event.
| | 01:06 | So looking at the event object, you
can figure out which element in the page
| | 01:09 | the event came from.
| | 01:11 | The data property is optional.
| | 01:13 | If you passed any data parameter to
the bind function, this property here
| | 01:17 | will contain that value.
| | 01:19 | The pageX and pageY properties are the
coordinates of the mouse when the event happened.
| | 01:26 | That's document relative.
| | 01:29 | The result property is the value that
was returned by the last event handler
| | 01:36 | function, as long as the
return was not undefined.
| | 01:39 | Then the return value will be contained in here.
| | 01:42 | The timestamp is in milliseconds and
that's the time when the event occurred.
| | 01:48 | So, those are the most common properties.
| | 01:50 | There is a couple of functions
that you might want to use as well.
| | 01:53 | The preventDefault() function prevents
the browser from executing whatever the
| | 01:57 | default action for the event is.
| | 01:59 | So this essentially stops the event
from causing whatever the browser would
| | 02:04 | normally do with it.
| | 02:05 | So for example following a link.
| | 02:07 | The isDefaultPrevented() function
will return whether the preventDefault()
| | 02:12 | function was ever called on this event object.
| | 02:15 | So to see if that was ever
prevented you can check this function.
| | 02:18 | And stopPropogation() stops the
bubbling of an event up to the parent elements.
| | 02:25 | Now, it's beyond the scope of
this title to explain event bubbling.
| | 02:28 | But if you are familiar with the DOM
level 2, what happens is when an event
| | 02:32 | happens in a child element, and this
isn't true of all events, but it's true
| | 02:37 | mostly for mouse events.
| | 02:38 | When an event happens, if the element
that it happens on does not handle the event,
| | 02:43 | it will then bubble up, like a
bubble in liquid, to the elements above it.
| | 02:48 | You can stop that from
happening by calling stopPropogation().
| | 02:50 | It will simply stop the
element right in its tracks.
| | 02:53 | And then similarly, for preventDefault().
| | 02:55 | If you call isPropogationStopped(),
you can see if stopPropogation() was ever
| | 03:00 | called on this particular event object.
| | 03:04 | So let's jump over to the code and take a
look at using the event object in an example.
| | 03:14 | So here is the file.
| | 03:17 | You can see we've got three divs.
| | 03:21 | And what I'm going to do is in
source code, I'm going to write some code
| | 03:26 | that's going to respond to an event and set
some information inside each one of the divs.
| | 03:31 | So, here I've got my jQuery already
installed, so I am kind of writing the script.
| | 03:42 | When the page loads, what I'm going
to do is setup some event handlers on
| | 03:50 | each one of the divs.
| | 03:51 | So I'm going to write a quick query to get
all the divs and assign event handlers to them.
| | 03:57 | So for the click function, I'm going to
write a little anonymous function that
| | 04:03 | takes the event object.
| | 04:07 | And what we are going to do is just
inside the div that was clicked,
| | 04:13 | we're going to set the HTML content to be the
contents of some interesting parts of the event object.
| | 04:22 | So, for example well just say, let's see,
pageX was and that will be evt.pageX +
| | 04:35 | pageY, and that will be evt.pageY +,
and we'll get the type of the event.
| | 04:52 | The type will be evt.type +, and
that will be the target, + evt.target.
| | 05:13 | And I think that probably pretty much about
covers what we're going to put on there.
| | 05:19 | Okay. Let's try that.
| | 05:20 | We'll save.
| | 05:24 | Now, let's jump on over to the browser.
| | 05:29 | So now I'm going to bring this up in the browser.
| | 05:32 | You can see that as I'm clicking on
each one of the divs, the event is
| | 05:38 | happening, and you can see that the mouse
position is being updated each time. Okay.
| | 05:46 | Let's see if this works cross
browser the way it's supposed to.
| | 05:51 | Okay, so now I'm going to
bring this up in Firefox. Okay.
| | 05:56 | All right, there is the Firefox browser.
| | 06:00 | Yup, you can see that it's
working just exactly the same way.
| | 06:04 | So we were able to really easily write
some cross browser handling code that
| | 06:10 | uses the unified event object to get
information about events that happen.
| | 06:17 | So that's the event object.
| | 06:18 | Let's move on to our next example.
| | Collapse this transcript |
| Using miscellaneous event features| 00:00 | The last series of event functions we
are going to cover for jQuery are some
| | 00:05 | miscellaneous event functions.
| | 00:06 | And these are basically provided by
jQuery to handle a couple of specialized tasks.
| | 00:12 | Those functions are the one() function,
and trigger(), and triggerHandler().
| | 00:17 | The one() function pretty
much works the same as bind().
| | 00:21 | However, the event handler is only ever
going to be executed once for each one
| | 00:26 | of the matched elements
that the event is bound to.
| | 00:28 | And you call this function when you
only want an event handler to happen once.
| | 00:33 | So, the event will be bound, and then
once the event gets triggered, it will not
| | 00:39 | be responded to again.
| | 00:41 | The other two functions, trigger() and
triggerHandler(), are ways of essentially
| | 00:45 | triggering events from within code
without having to wait for the user.
| | 00:50 | The difference here is that the trigger
() function will trigger an event on each
| | 00:56 | one of the matched elements
that come back from this selector.
| | 00:59 | And it will also cause the browser to act as
though the user caused the event to happen.
| | 01:06 | So, for example if you trigger the click
event on a link, then not only will the
| | 01:11 | event fire off from within your code,
but the browser will act as though the
| | 01:14 | item were clicked on.
| | 01:15 | Now, triggerHandler() is similar.
| | 01:18 | It does the same thing.
| | 01:19 | It triggers the event handlers but it
does it without having the browser go off,
| | 01:23 | and act as though the event actually happened.
| | 01:27 | This only works on the first matched
element in the result set for a selector.
| | 01:35 | So, what we're going to do now is take a
look at some examples of how we might use this.
| | 01:39 | We're not going to use the
trigger() or triggerHandler().
| | 01:41 | Those are pretty esoteric.
| | 01:43 | So, let's take a look at how
the one() event handler works.
| | 01:46 | Let's jump over to the code.
| | 01:50 | So, here's the source code.
| | 01:51 | Just take a look at the Design really quick.
| | 01:53 | So what I have here is a series of divs,
and each one has a color and a border.
| | 02:00 | What we're going to do is write some
code that binds event handlers to these divs
| | 02:05 | that only fire once.
| | 02:06 | So, let's go back to the Source.
| | 02:08 | So, you can see that for each one of
these divs, I've defined a style sheet.
| | 02:12 | And among other things it defines
things like width and height and you can see
| | 02:16 | that there is a cursor property here in
the style sheet that's set to a pointer
| | 02:20 | indicating it could be clicked on.
| | 02:22 | So, what we're going to do is create
an event handler that only fires the
| | 02:28 | click() function once.
| | 02:30 | So, let's go up here where I've
got my jQuery library included.
| | 02:34 | So, I'm going to write my onload handler.
| | 02:41 | So, I will write function,
and when the document loads,
| | 02:51 | what we're going to do is get a
reference to all these divs, and instead of
| | 02:55 | using the bind() function
we're going to use one().
| | 02:59 | What we're going to do is
bind an event for click.
| | 03:03 | And we'll have a function that gets called.
| | 03:10 | So, inside this function we're
going to set on the this operator.
| | 03:15 | Remember, inside-- since the click
event is happening on a div, when this
| | 03:20 | handler function gets called, the this
parameter will refer to the div that got clicked on.
| | 03:25 | So, we're going to set the css
for the div that got clicked on.
| | 03:31 | The css we're going to set will be, we'll change
the background to red and change the cursor to auto.
| | 03:43 | so it's going to get rid of the pointer.
| | 03:44 | And that should be all we need to do.
| | 03:48 | So, now we're going to switch over to
the browser and see if this works.
| | 03:55 | So, I'm just going to double-
click on this, bring up the browser.
| | 03:58 | So you can see that as I'm mousing
over this the little pointing cursor.
| | 04:02 | So I click on it once, it changes to red.
| | 04:04 | You can see that the pointer went away,
and if I click on it nothing happens anymore.
| | 04:07 | So this is basically how you assign
event handlers that only happen one time.
| | 04:14 | So, let's just make sure
that this works cross browser.
| | 04:16 | I'm going to open this up with Firefox.
| | 04:20 | Okay, and exactly the same behavior.
| | 04:27 | You can see that now the event
handler is only happening one time.
| | 04:29 | So now that we've seen how to work with
events, let's try and build a practical
| | 04:35 | example and that's the
subject of the next lesson.
| | Collapse this transcript |
| Practical example 3: Table striping and highlighting| 00:00 | Let's take what we have learned so
far about jQuery event handling and some
| | 00:04 | other features and build a practical example.
| | 00:07 | What we are going to do is use
jQuery to automatically stripe and
| | 00:13 | hover-highlight the contents of an HTML table.
| | 00:16 | So, let me show you what the
finished example looks like first.
| | 00:20 | I am going to bring this up in the
browser. And please excuse the garish colors;
| | 00:24 | I had to make sure that they were
visible on whatever screen you might be using.
| | 00:29 | But you can see that the contents of
this table are striped, in alternating
| | 00:34 | lighter and darker colors of green.
| | 00:36 | And when I hover over rows and the table,
the text is bolded and is highlighted
| | 00:44 | in sort of a yellowish, goldish color.
| | 00:47 | So this is what we're going to build.
| | 00:49 | So let me close this.
| | 00:51 | And let's go take a look at the code
that's needed to build this example.
| | 00:55 | So let's switch over to the code. All right!
Here I have the code for my example.
| | 01:02 | And you can see it's just a simple
HTML table with some contents in it.
| | 01:08 | And before I actually build the code,
let's take a look at what the barebones
| | 01:13 | example looks like in the browser.
| | 01:15 | And you can see that it's just a table.
| | 01:17 | There's no special highlighting already
applied, and the hover effect is clearly not there.
| | 01:23 | So let's just build from here.
| | 01:25 | So I'm going to close this.
| | 01:27 | Okay, let's go back to the code.
| | 01:30 | Okay, so the first thing I'm going to
do is add a couple of CSS style sheets
| | 01:34 | that are going to serve as the stripe colors.
| | 01:38 | So, I'm going to define a class
called stripe1, and I'm going to define
| | 01:44 | stripe1 as having a background-color
of, let's see, it's going to be very
| | 01:51 | visible, so I'll just say #0f0.
| | 01:53 | And then I'll copy this and make
stripe2, and stripe2 is going to be background
| | 02:01 | color of afa, and we'll save that.
| | 02:07 | And then I need to make a CSS class
that's going to serve as the hover highlight.
| | 02:13 | So I'll name that .highlight.
| | 02:18 | And the highlight color, what we're
going to do is we're going to have a
| | 02:21 | background color of, let's see, #
ffcc00. Yeah, that's a good, nice yellow color.
| | 02:30 | And then we're going to
add in a font-weight of bold.
| | 02:36 | And that's going to make the text bold. Okay.
| | 02:38 | So now we have the CSS styles, so
let's go back up to the top of document and
| | 02:43 | fill out our jQuery function
and logic to make this happen.
| | 02:48 | So, the first thing we're
going to do is handle the striping.
| | 02:51 | So, we're going to use the jQuery
selector to get all of the tables.
| | 02:55 | And you can see here, down in the code,
that the table itself has an ID of the list.
| | 03:03 | And so what I'm going to do is
use jQuery to get the list table.
| | 03:10 | But I don't want the whole table;
all I want is the table rows.
| | 03:13 | So I'm going to use tr, and then I'm
going to use one of my filter selectors
| | 03:18 | here called even, so that's going to
get me all the even-numbered table rows.
| | 03:22 | And I'm going to add a class of stripe1.
| | 03:28 | So, that's going to put stripe1 on all
the even-numbered rows, and then I am
| | 03:35 | going to copy this and paste it, and I am
going to do the same thing for the odd rows.
| | 03:40 | And for the odd rows, I'm going to add stripe2.
| | 03:43 | So, let's just see if this
works on what we have so far.
| | 03:46 | So I am going to save this.
Let's go back out to the example files.
| | 03:50 | Okay, so far so good.
| | 03:52 | We can see that the stripe is being applied.
| | 03:54 | Just to make sure it's working
cross-browser, let's go see it in something else.
| | 03:58 | Let's see it in, say, Firefox.
| | 04:03 | Okay, so Firefox comes out.
| | 04:04 | You can see it's working there too. All right!
So far so good.
| | 04:07 | We've got it working cross-browser.
Let's go back to the code. All right!
| | 04:11 | So now that we have the table
striping working, now let's add that hover
| | 04:14 | highlighting effect.
| | 04:16 | And so what we're going to do is once
again, we're going get a reference to the
| | 04:20 | table, which is theList.
| | 04:23 | Now, we're going to apply it only to all the
table rows, not just the even and odd ones.
| | 04:28 | But we're going to use the hover function.
| | 04:30 | And remember that the hover
function takes two arguments.
| | 04:34 | So, the first is going to be the
function that we want to have happen when the
| | 04:39 | mouse enters, and then we have
another function, which is going to be what
| | 04:45 | happens when the mouse leaves.
| | 04:46 | So, when the mouse enters, we're going
to say $(this), which at this point is
| | 04:52 | going to be the table row in question,
so $(this).toggleClass.
| | 04:57 | And the class we're going to be toggling
is the highlight class, and we're going
| | 05:03 | to be doing the same thing
down here in the second function.
| | 05:06 | So now we've got our hover
highlighting effect as well. All right!
| | 05:11 | So let's go back out to the
browser and see if this works.
| | 05:13 | I'm going to save, back
to the browser and refresh.
| | 05:16 | And sure enough, now you can see that
the highlighting effect is working,
| | 05:21 | because when I hover over a table row,
it changes the background color and the font-weight.
| | 05:26 | All right! So far so good!
| | 05:28 | Okay, now let's take a look at
one more feature of jQuery events.
| | 05:33 | This is called event delegation.
| | 05:35 | And here's how it works.
| | 05:37 | Suppose I want to have the user,
whenever they click on one of the table rows,
| | 05:43 | just show a little alert message that
has the text contents of the table row.
| | 05:48 | Now, there's a couple of ways I could do that.
| | 05:51 | One way to do that would be to write theList,
and then tr again, then say on, on click.
| | 06:03 | Let's have a function, which is an event
handler, so it takes an event handler argument.
| | 06:10 | And inside this we're going to say alert and
$(this).text, and that will get the text content.
| | 06:22 | That will work; however, there's a problem here.
| | 06:25 | And the problem is that this right here,
this selector, is going to go through
| | 06:30 | and assign click handlers to
every single one of the table rows.
| | 06:34 | Now, for a table that only
has 10, 12 rows, that's okay.
| | 06:38 | But imagine I had a table with lots and
lots of rows, or imagine this wasn't a table;
| | 06:43 | it was a whole bunch of divs.
| | 06:45 | That's going to create a whole bunch
of event handlers on a whole bunch of
| | 06:48 | objects that basically just do the same thing.
| | 06:51 | What I'd like to be able to do is
take advantage of something called event
| | 06:56 | bubbling in the browser, and just
tell jQuery that whenever an event comes
| | 07:01 | from a certain kind of element
but makes its way back up to the element's
| | 07:07 | parent, have the parent handle the
event, but only if it came from a certain
| | 07:12 | kind of descendent.
| | 07:13 | So, what I'm going to say here is get
me the table, and I'm going to attach the
| | 07:18 | click handler to the table itself.
| | 07:19 | But I'm going to use the delegate
trick that we talked about earlier to say
| | 07:24 | only handle events when
they come from table rows.
| | 07:29 | So, if a click event gets triggered on
the table and it came from a table row,
| | 07:36 | then execute this function.
| | 07:39 | So now I've only got one event
handler, and it's sitting on the top-level
| | 07:43 | parent table, and it's listening for
click events that came from table rows.
| | 07:48 | So rather than having a table with a
thousand rows in it and having a thousand
| | 07:53 | separate click handlers, I've only got
one click handler, and it's listening for
| | 07:57 | clicks that come from within table rows.
| | 07:59 | And browsers handle this automatically.
| | 08:01 | When something like a click event
happens on an element and the element doesn't
| | 08:05 | handle that event, such as a click,
| | 08:07 | that click will then bubble up the DOM
until it gets to a parent element which
| | 08:12 | does have an event handler.
| | 08:13 | And so by attaching the event handler
for click directly to the table itself, I
| | 08:17 | only have one place where I
need to listen for it. All right!
| | 08:21 | So let's save, and let's go back
out to the browser. Let's refresh.
| | 08:26 | All right! So, there is the striping, there is a
hovering, and now when I click, you see I
| | 08:32 | get an alert that has the
text content of the row.
| | 08:36 | In this case, it's bread, and
it's $0.99, and I can do it here.
| | 08:39 | And you can see I'm getting different values
for each one of the rows that I'm clicking on.
| | 08:45 | So, only one event handler, and it's
listing for events from that particular
| | 08:50 | table row, and that is what
event delegation is all about.
| | 08:54 | That brings us to the close of jQuery events;
| | 08:57 | time to move on to our next chapter.
| | Collapse this transcript |
|
|
5. jQuery Animations and EffectsHiding and showing elements| 00:00 | One of the hallmarks of modern web
applications, if you have used the web at all
| | 00:05 | recently, you have probably noticed
that there is a lot of great animation and
| | 00:09 | effects on these modern web pages.
| | 00:12 | And it used to be that you had to
use plug-ins to achieve a lot of
| | 00:16 | these animation effects.
| | 00:18 | Well, jQuery makes providing animation
and effects easy to uses of your site.
| | 00:25 | And in fact in many cases you can do
some pretty neat things with just one
| | 00:29 | or two lines of code.
| | 00:31 | And that's going to be
the subject of this chapter.
| | 00:34 | So the jQuery library as I noted
supplies some basic animation and effects
| | 00:39 | functions to create some visual
effects that are pretty common in modern web
| | 00:44 | pages, such as showing and hiding
elements, fading elements in and out, moving
| | 00:51 | them around on the screen.
| | 00:52 | There is also a basic animation
function that you can use to build your own
| | 00:58 | animation effects, and we will see
how to do that later on in the chapter.
| | 01:04 | But first, let's just get started with
some really simple animation and that
| | 01:09 | involves showing and hiding elements.
| | 01:11 | So showing and hiding elements are
probably one of the most simple effects that
| | 01:16 | you can use in jQuery.
| | 01:18 | And you can exercise some pretty nice
control over how elements are shown or hidden.
| | 01:24 | They can happen immediately or
over a specified duration of time.
| | 01:28 | And you can see in the table there
is a series of functions you can use.
| | 01:32 | So not surprisingly, the show()
functions show elements, the hide()
| | 01:37 | functions hide elements.
| | 01:39 | And then there is a set of toggle()
functions, and these basically do what
| | 01:43 | you'd imagine, they show something if it's
hidden and they hide something if it's shown.
| | 01:47 | And there is a couple of
different ways of doing each one of these.
| | 01:50 | The most basic show() function simply
displays each one of the elements that
| | 01:56 | come back from a selector if they
are hidden, and that just shows them.
| | 02:00 | The next version though allows you
to specify the speed with which things
| | 02:05 | happen, and you can either pass a
string like slow, normal, or fast or you can
| | 02:11 | pass a number, which is a millisecond duration.
| | 02:13 | So 2000 milliseconds would be 2 seconds.
| | 02:17 | And there is an optional callback
that you can have jQuery call when the
| | 02:22 | animation has become complete.
| | 02:24 | So for example, when an element is
finished showing, if you want to do some
| | 02:28 | of the UI changes, you can supply a
callback function that will be notified
| | 02:32 | when the effect is done.
| | 02:34 | The same thing for hide.
| | 02:36 | There is the speed and callback function.
| | 02:39 | And same thing here with
toggle, the speed and callback.
| | 02:42 | And this one here, the switch basically
pass true or false and it either hides
| | 02:47 | or shows everything based upon
whether they are hidden or shown.
| | 02:51 | So now that we have seen what some of
the functions are, let's jump over to the
| | 02:55 | code and try some of these out.
| | 02:58 | So here I am in the browser and you can
see I have got a nice big blue div and I
| | 03:03 | have got some buttons down
here that trigger some functions.
| | 03:06 | So it's currently visible, so
if I click Show, nothing happens.
| | 03:09 | But if I click Hide, you can
see that the element goes away.
| | 03:12 | If I click Show, it brings it back.
| | 03:15 | And if I click Toggle, Toggle just does
the opposite of whatever it currently is.
| | 03:20 | That's pretty basic.
| | 03:21 | Now let's look at the code
to see how that's happening.
| | 03:24 | So I am going to bring this up in my editor.
| | 03:31 | Before we look at the code, just
take a look at the Design view.
| | 03:33 | So here is the Design view, you can see
here is the element, that's the div and
| | 03:37 | here are the various buttons,
so let's go to the Source.
| | 03:41 | So down here in the Source,
this is div right here.
| | 03:45 | And here are each one of the buttons,
and the buttons have various id's on
| | 03:50 | them and up here you can see that the
div has a style sheet applied to it that
| | 03:57 | has some appearance.
| | 03:59 | And up here in the script, and you can
see that when the browser loads the page,
| | 04:04 | I am assigning some click
handlers to each one of the buttons.
| | 04:09 | So the Show button gets the show()
function, the Hide button gets the hide()
| | 04:13 | function, and so on.
| | 04:15 | So what I am doing here is passing
various parameters to the function.
| | 04:19 | So for show, I am passing in a speed of
normal but I can also pass in a speed of
| | 04:23 | something like slow, right.
| | 04:25 | And if I go back to the browser, I will refresh.
| | 04:30 | I am going to hide it and now when I
click Show, you can see it comes in
| | 04:34 | a little bit slower.
| | 04:35 | But I can actually slow that down a lot more.
| | 04:36 | Let's go back to the code.
| | 04:39 | So instead of passing slow, what I
will do is I will pass in a duration of
| | 04:43 | 5 seconds, and I will pass in a callback
that tells me that the animation is complete.
| | 04:51 | And for the callback, I will
just say alert("done showing").
| | 04:58 | So let's go back, save.
| | 05:00 | Let's go back to the browser, let's refresh.
| | 05:03 | Now I am going to Hide it, and now when
I click Show, you see it comes in very
| | 05:08 | slowly over 5 seconds.
| | 05:10 | And there is my alert that
says hey, all done showing.
| | 05:14 | That's pretty much it for
hiding and showing elements.
| | 05:17 | Let's look now at how we would
fade elements in and out, another very
| | 05:21 | common effect.
| | Collapse this transcript |
| Fading elements in and out| 00:00 | Fading elements in and out is also a
common effect that you see in modern web pages,
| | 00:06 | and jQuery provides functions
for achieving this effect as well.
| | 00:10 | You can fade images or other elements
either completely in or out, or you can
| | 00:16 | fade them to a predetermined level of
opacity, so that they are transparent.
| | 00:21 | And you can select the speed of how
fast things are fading either in or out by
| | 00:27 | using strings like slow, normal, or
fast, or as a millisecond duration.
| | 00:32 | And you can see here in the table there
is three routines that perform fading.
| | 00:36 | There is the fadeIn.
| | 00:37 | There is the fadeOut and fadeTo.
| | 00:40 | FadeIn does what its name implies.
| | 00:42 | It fades in all the elements that are
in the matched set, that a selector came
| | 00:48 | back with, which is what you're
calling this function on, and you can specify
| | 00:52 | the speed that you want this to happen at.
| | 00:54 | And there is an optional callback that
will run after the effect is finished.
| | 00:59 | So if you've got something that you
want to happen when things are faded either
| | 01:03 | in or out, you can supply a callback
function, and that function will get called
| | 01:08 | once the effect is done.
| | 01:09 | Similarly, there is a fadeOut function.
| | 01:12 | It does the opposite of
fadeIn, and here is fadeTo.
| | 01:15 | And for fadeTo, there is a speed and
callback function, but there is also the
| | 01:19 | opacity level that you
want the object to fadeTo.
| | 01:22 | So, anywhere between zero and 1.0, that
will be the percentage of transparency
| | 01:28 | that the object will fadeTo.
| | 01:31 | Let's jump over to the
code and see how these work.
| | 01:37 | So, here we have the div element,
and nice big blue div, sitting in my
| | 01:40 | document, and I've got a couple of
buttons down here, and the buttons will
| | 01:44 | perform various functions.
| | 01:47 | So, I've got Fade in and Fade Out and
then a couple of values for Fade To.
| | 01:51 | So it's already faded in,
let's try fading it out.
| | 01:53 | So when you fade it out, you can see it
slowly disappears, fading it in makes it
| | 01:57 | slowly appear and we can also fade it
down to 30% and we can fade it up to 100%.
| | 02:05 | So, lets take a look at the
code and see how this works.
| | 02:09 | I am going to bring this up in my
editor, and you bring it up in whatever
| | 02:14 | editor you are using.
| | 02:16 | You can see that there are some
jQuery code there that's using the fade
| | 02:19 | functions, but before we take a
look at that, let's scroll down here.
| | 02:21 | You can see here is the element and here
are the buttons and I've got my various
| | 02:27 | buttons for fading elements to various states.
| | 02:32 | So let's scroll back up to the code.
| | 02:34 | So, here we are when the document is
ready, we assign some event handlers and
| | 02:39 | each button gets a click handler.
| | 02:41 | So, for fading in, we have a fadeIn
function and fadeOut, and again, I can
| | 02:45 | control how fast I want these to happen.
| | 02:48 | So I've got some speeds that I
specified here, but if I want something to fade
| | 02:53 | out very slowly, instead of using normal,
I can specify duration like 4000 and
| | 02:59 | that will fade out after 4 seconds,
and I can supply a function that will get
| | 03:05 | called when its done, and let's just
write a little alert that says done
| | 03:11 | fading out and save.
| | 03:14 | Let's go back out to the browser, let's refresh.
| | 03:20 | Again, the fading works.
| | 03:23 | When I click Fade Out it's going to
very slowly fade over 4 seconds and my
| | 03:29 | callback, it gets called.
| | 03:31 | So, let's just quickly make sure that
this works cross-browser like we say it
| | 03:35 | does, let's bring this up in Firefox.
| | 03:37 | I am going to open this up in the
Firefox, and there it is, fading to 30%,
| | 03:45 | fading to 100% and we can fade it in,
and let's fade it out and it goes over 4
| | 03:53 | seconds, here is my alert,
let's fade it back in.
| | 03:59 | That's quick summary of the fading functions.
| | Collapse this transcript |
| Sliding elements| 00:00 | The sliding effect is yet another
way that jQuery gives you to reveal or
| | 00:06 | hide page elements.
| | 00:08 | These functions are not for sliding
things around on the screen, just doing
| | 00:13 | some generic movement. This is for showing
and hiding elements but using a sliding effect.
| | 00:19 | jQuery provides functions for sliding
elements up or down, as well as toggling
| | 00:25 | the slide animation based upon
whether things are hidden or showing.
| | 00:30 | And you've probably seen this effect
before in web pages, where you click an
| | 00:34 | Option button and things kind of slide
into views seemingly from thin air, and
| | 00:39 | that's how this effect is achieved in jQuery.
| | 00:43 | The slideDown function allows me to
specify the speed at which the slide
| | 00:47 | animation happens and there is an
optional callback function that will be called
| | 00:52 | when the slide is completed,
and the same thing for slideUp.
| | 00:55 | I can specify the speed and speed can
either be a string like slow or normal
| | 01:00 | or fast or I can specify a number of
milliseconds that I want the animation to happen over.
| | 01:07 | And SlideToggle is the same idea.
| | 01:09 | It just toggles whether things are
sliding up or sliding down based upon whether
| | 01:13 | they are already showing.
| | 01:15 | Let's take a look at the sliding examples.
| | 01:19 | I am going to jump over to the code.
| | 01:23 | So here is the file in the browser and
I've got the big blue div right here.
| | 01:28 | And I've have got some
buttons that trigger some behavior.
| | 01:30 | So it's already visible, so lets
slide it up, and see that it slides out of
| | 01:35 | view, and sliding down makes it visible,
and when I try to hit Slide Down again,
| | 01:41 | nothing happens because it's already
visible and similarly Slide Up there is
| | 01:44 | nothing once it's hidden.
| | 01:46 | The Toggle behavior however is, well,
it just simply takes it from whatever
| | 01:51 | state it's currently in and
brings it to the opposite state.
| | 01:54 | So let's take a look at the
code, and see how that happens.
| | 01:56 | I am going to open this up in my
editor, so let's scroll down really quick
| | 02:04 | before we see the code.
| | 02:06 | Here are the buttons that
are controlling the behavior.
| | 02:08 | You can see these IDs on them, and this
is the div right here and the div has a
| | 02:13 | style applied to it, which sets its
initial appearance, these are all the
| | 02:17 | styles I have on my div.
| | 02:19 | So let's scroll back up.
| | 02:21 | So, when the page loads and the document
is ready, I set up some event handlers.
| | 02:26 | So, for the slideUp button, I assign a
click() function that calls the slideUp
| | 02:30 | function on the div and for the
slideDown button I call the slideDown function.
| | 02:35 | And for toggle the same
idea, I call the slideToggle.
| | 02:38 | So, let's have a little bit of fun with this.
| | 02:41 | We can take out the normal here, and I
can put in something kind of slow like 4
| | 02:47 | seconds, so 4000 milliseconds is 4 seconds.
| | 02:51 | And I can also define a function that
will be called when the slide up is complete.
| | 02:57 | So I am just going to display an alert
that says slide complete, and again, you
| | 03:06 | would do this if you had some UI that
you wanted to manipulate or otherwise
| | 03:10 | control when the effect was done with.
| | 03:14 | So, now I am going to save
and jump to the browser again.
| | 03:17 | Now, I am going to refresh.
| | 03:20 | You can see that the Toggle Slide still
works pretty smoothly, but when I Slide
| | 03:26 | Up, it's going to slide up very slowly
over 4 seconds and then show my alert.
| | 03:32 | So, let's make sure that
works in Firefox as well.
| | 03:38 | Open this in Firefox, just
to prove it's cross-browser.
| | 03:42 | So, here is the same file.
| | 03:44 | You can see toggling works, and I am
going slide up very slowly over 4 seconds
| | 03:50 | and there is the alert.
| | 03:54 | So, that's a quick summary of the
jQuery sliding functions and using those
| | 03:58 | functions, you can easily slide
elements into and out of view.
| | Collapse this transcript |
| Creating custom animations| 00:00 | In addition to the pre-built animation
functions that jQuery gives you, there is
| | 00:06 | a basic Animate function that you can
use to create custom animation for a wide
| | 00:11 | variety of properties on page elements.
| | 00:14 | So to do that, you simply call the
Animate function and there are a couple of
| | 00:17 | different versions you
can see there on the table.
| | 00:20 | One takes a series of parameters and
those are the properties on the element
| | 00:24 | that you want to animate.
| | 00:25 | There is a Duration parameter and
that's the number of milliseconds that the
| | 00:30 | animation should take.
| | 00:31 | The Easing parameter is the type of easing
function to use and there are only two built-in.
| | 00:36 | There are plug-ins that do more, but
right now jQuery has Linear or Swing built-in.
| | 00:41 | Finally, there is Call Back option and
the Call Back is the function that will
| | 00:47 | be called when the animation is
completed and that of course is optional.
| | 00:52 | There is also another more complex
animate function here and it's same idea,
| | 00:57 | these are the properties you want to
animate and the options are a set of
| | 01:02 | options set in an object notation style for
the animation that you want to have happen.
| | 01:08 | There is also a Stop function and the
Stop function basically stops all the
| | 01:13 | running animations on all
of the specified elements.
| | 01:16 | So you would have some jQuery selector
that will produce a result set, and then
| | 01:21 | you would call Stop on all those guys
to stop them from animating if they are.
| | 01:26 | So let's take a look at how
to use the animate function.
| | 01:30 | I am going to jump over to the
code and we can see how it works.
| | 01:33 | You will see that there is a div
on the page with some text in it.
| | 01:39 | So let's try some custom animations.
| | 01:42 | The first animation is when we click
the Grow Right, you will see that the side
| | 01:46 | of the div grows out to the right.
| | 01:48 | If we click the Big Text, you will
see that the text animates up in size.
| | 01:53 | If we click Move Div, you will see
that it animates over to the right.
| | 01:57 | So let's refresh, and let's see
if it works in Firefox as well.
| | 02:03 | So I am going to bring this
up in Firefox. There it is.
| | 02:08 | So I am going to click Move, I am
going to click Big Text, and I am going to
| | 02:12 | click Grow Right, and
you can see that it worked.
| | 02:14 | Now, let's refresh.
| | 02:15 | Now let's go over to the code
and see how we accomplish this.
| | 02:19 | I am going to bring this up in my Editor.
| | 02:27 | Down here are the buttons
that control the animation.
| | 02:32 | Here is the Style Sheet on the div,
and that's the div that we are
| | 02:35 | animating right there.
| | 02:37 | Up here, you can see that what's
happening is we are calling various versions of
| | 02:42 | the Animate function with
parameters that we want to have animated.
| | 02:47 | So the way this works is I get a reference to
the element or elements that I want to animate.
| | 02:53 | And in this case, it's just one, but again,
I can have a result set that comes back.
| | 02:58 | I call the Animate function with an object.
| | 03:01 | Inside the object, I list the
properties that I want to have animated.
| | 03:06 | So sin this example for the width, I am
setting a Width property on the object
| | 03:13 | for the parameters I am passing in, and I want
that to happen over the course of one second.
| | 03:18 | So in this case you can see I have
got the different Animate functions
| | 03:21 | controlling different properties.
| | 03:22 | So this is the one for the width,
this is the one that animates the font
| | 03:25 | size, this is the one that animates
the left side property, which is what
| | 03:29 | makes it move over.
| | 03:30 | However, since we are specifying things
as objects, I can have multiple of these
| | 03:36 | animations appear all at once.
| | 03:38 | So let's copy this function here, and
let's make a new button called Multiple.
| | 03:47 | So that's going to be its ID.
| | 03:48 | I am going to go down here and I am
just going to copy this guy, and name it
| | 03:55 | Multiple, and we will
label the button Everything.
| | 04:02 | So when the Everything button gets
clicked, let's animate everything.
| | 04:06 | So we will animate the width.
| | 04:08 | We will copy that and we
will paste that in here.
| | 04:12 | Let's animate the font size and we'll
copy that and we will paste that in here.
| | 04:21 | You notice also that I am passing in
a parameter for the Easing function.
| | 04:25 | I am passing in Swing, which is kind of
like a Smoothing function that makes the
| | 04:29 | animation appear bit more natural.
| | 04:31 | But I could also pass in Linear if I
wanted to for this parameter, and we will
| | 04:35 | see what effect that has.
| | 04:37 | So now, instead of animating just one
thing at a time, I have got a parameters
| | 04:41 | object that will animate all of those
properties over the course of one second.
| | 04:46 | So let's save and let's
go back out to the browser.
| | 04:49 | So now, I am going to refresh.
| | 04:54 | So now when I refresh, you see
that the Everything button is there.
| | 04:56 | So now when I click the Everything
button, you can see that everything
| | 04:58 | happens all at once.
| | 05:00 | The font size is animated up, the div
got bigger, and it moved over to the
| | 05:05 | right-hand side, because I animated the left.
| | 05:07 | Let's switch over to Firefox.
| | 05:08 | So I am going to refresh here as well.
| | 05:11 | There is my Everything button.
| | 05:14 | When I click on Everything, you can see
that everything happens all at the same time.
| | 05:19 | You can see that using the Animate
function, you can create some pretty
| | 05:22 | complex animations just by specifying
the parameters that you want to animate
| | 05:26 | from and animate to.
| | 05:29 | So the default, let's go
back to the code really quick.
| | 05:33 | When I specify these parameters like Width,
500, this is going to be the ending result.
| | 05:37 | This is what the property will look
like when the animation is complete.
| | 05:40 | The starting value is
whatever the Style Sheet sets it to.
| | 05:44 | So you can see here that the Width
starts out at 250, and it's going to end up
| | 05:48 | at 500, and similarly, for the
rest of the properties as well.
| | 05:51 | So that's how you use the Animate function.
| | 05:53 | We are at the point now where
we can build a practical example.
| | Collapse this transcript |
| Practical example 4: Image rotator| 00:00 |
What we are going to do now is take
what we have learned about events and
| | 00:05 |
the previous chapters and we are going
to build a pretty sophisticated effect.
| | 00:09 |
And what we are going to do is
build an image rotator that has a nice
| | 00:13 |
fading effect in it.
| | 00:15 |
So before I show you the code, let me bring
up the finished image rotator in the browser.
| | 00:20 |
So if you look in the Exercise Files
folder under the Effects chapter,
| | 00:24 |
you will a couple of files.
| | 00:25 |
There is the imagerotator_
start and imagerotator_finished.
| | 00:28 |
So let me just bring this up in the browser.
| | 00:31 |
You can see that what's happening is
over a couple of seconds, we have a nice
| | 00:35 |
little image slideshow where the
images are fading from one to the next and
| | 00:40 |
they are just doing this in a circular pattern.
| | 00:43 |
So there are four images and each
one is fading on top of the next.
| | 00:49 |
Let me bring this up in Firefox too,
so you can see that it works there.
| | 00:54 |
Let's bring up in Firefox browser. Same idea.
| | 00:59 |
So you can see that it's
slowly fading across the images.
| | 01:02 |
What I have done is built a cross-
browser image rotator and there are no
| | 01:06 |
plug-ins involved here.
| | 01:07 |
This is all just JavaScript and jQuery.
| | 01:10 |
So let's see how that works.
| | 01:11 |
What I am going to do is bring up the
Start version of the file in my Editor,
| | 01:18 |
and let's go to the Design View really quick.
| | 01:21 |
You can see here in the
Design View, I have got an image.
| | 01:23 |
There is actually more than one image.
| | 01:25 |
I have positioned them so that
they all stacked on top of each other.
| | 01:29 |
So let's go to the Source
View and you can see that.
| | 01:33 |
So here is the images
that we are going to rotate.
| | 01:37 |
So a couple of things.
| | 01:38 |
First, everything is contained inside
a parent div and the parent div I have
| | 01:42 |
got here is named photoShow and
then I have got four divs inside that.
| | 01:48 |
Each one of those divs contains an image.
| | 01:52 |
The first div has a class
applied to it named Current.
| | 01:56 |
So you can see that
inside each one of these divs
| | 01:58 |
there is an image pointing to a path
and each one has a height and a width.
| | 02:05 |
What I have done here is define these
four images and let's take a look at the
| | 02:09 |
styles applied to each.
| | 02:11 |
The photoShow div itself has a height
and a width applied and that matches the
| | 02:17 |
height and width of the
images that I am rotating.
| | 02:20 |
Then the divs inside the parent
div are positioned absolutely.
| | 02:25 |
So that's causing all the images
to stack up underneath each other.
| | 02:29 |
By default, I am giving
each image a z-index of 0.
| | 02:32 |
So they're going to be
underneath at the bottom of the stack.
| | 02:34 |
Then I have got two other style sheets,
one called Previous and one called Current.
| | 02:39 |
The Current style sheet
basically has a z-index of 2.
| | 02:43 |
So whichever div has that Style Sheet
applied is going to be the one that is on
| | 02:48 |
top of all the other images, and you
can see that that's this div, and that
| | 02:51 |
image is inside the div.
| | 02:53 |
So this one will be on
the top of everybody else.
| | 02:56 |
Then we have another Style Sheet named
Previous and that has a z-index of 1.
| | 03:01 |
So whichever div has this Style Sheet
will be directly under this guy right here.
| | 03:07 |
Now, that's not initially assigned.
| | 03:09 |
We are going to assign that
dynamically as part of the rotation effect.
| | 03:14 |
So now that we have got all the
contents set up, let's take a look at the code.
| | 03:18 |
So I have got my jQuery Library included,
and what I need to do now is write the
| | 03:24 |
code that sets up the image rotator.
| | 03:28 |
So what I am going to do is write a
function that executes when the page gets loaded.
| | 03:34 |
This is the jQuery document ready
event and what I am going to do is call
| | 03:40 |
setInterval on a function I am going
to write called rotateImages and I am
| | 03:47 |
going to have that run every
two seconds, so 2000 milliseconds.
| | 03:51 |
Okay, so now, I need to write
the function to rotate the images.
| | 03:54 |
There are a couple of things we need to do.
| | 04:00 |
What we are going to do is figure out
which photo is the current one and which
| | 04:04 |
photo is the next one.
| | 04:06 |
What we are going to do is take
whatever the current photo on top is.
| | 04:10 |
We are going to move it underneath
the photo that comes next.
| | 04:15 |
So that's going to be the image that fades up.
| | 04:17 |
So we are going to move the current
photo underneath the next one, set the
| | 04:21 |
next photo's Opacity to 0, and then
have it fade up in front of the photo
| | 04:28 |
that's in front of it.
| | 04:30 |
So I am going to have a variable here
named oCurPhoto and I am going to use
| | 04:37 |
jQuery to get a reference to
whichever photo is current.
| | 04:42 |
So what I am going to do is
look for inside the photoShow div,
| | 04:48 |
I am going to look for whatever div has
the current Style Sheet applied to it,
| | 04:53 |
because that's the current photo.
| | 04:54 |
Then I am going to look for the next photo
and again I am going to use jQuery for that.
| | 05:01 |
So to get the next photo, recall
from our selector and retrieving content
| | 05:05 |
section that there is a function called Next.
| | 05:08 |
So I am going to say oCurPhoto.next.
| | 05:12 |
This will get the next sibling
after wherever this current div is here.
| | 05:17 |
So if this div is current, then the
next div is this guy and if this div is
| | 05:22 |
current, then this is the next guy.
| | 05:25 |
If this div is current, there is no next.
| | 05:27 |
You can see that we are
at the end of the div list.
| | 05:29 |
We have to handle that condition.
| | 05:30 |
So if that's the case, then the
jQuery result that comes back from the next
| | 05:35 |
function will be of length 0.
| | 05:38 |
We can check that condition.
| | 05:39 |
So we say if oNxtPhoto.length,
| | 05:44 |
in other words, there is nothing in
the jQuery result set, is equal to 0,
| | 05:48 |
then what we need to do is go
back to the top of the loop.
| | 05:52 |
And to do that, remember using jQuery,
we are going to say well oNxtPhoto = and
| | 05:59 |
what we are going to do is simply get
the first div that's inside the photoShow
| | 06:09 |
parent div, which will
be this guy right here.
| | 06:12 |
So that's how we are going
to get the looping behavior.
| | 06:14 |
So now we've figured out which div is
current and which one is next, we need to
| | 06:18 |
do the CSS animation that
causes the Opacity to animate.
| | 06:22 |
So what we are going to do is tell the
current photo to remove the class that
| | 06:31 |
is current, because it's no longer the
current photo, and we are going to add
| | 06:38 |
the previous class.
| | 06:39 |
What's going to happen now is the
Current class is going to come off, Previous
| | 06:44 |
is going to go on, so it's going to
drop down one order in the z-index.
| | 06:49 |
We are going to tell the Next Photo
that we are going to set its CSS property,
| | 06:55 |
and make its Opacity 0, because
that's what we are going to animate up.
| | 07:01 |
The div will start out invisible.
| | 07:03 |
Then we are going to set the
Next Photo to be the current photo.
| | 07:12 |
So now this guy is going to move
on top and remember he is invisible.
| | 07:15 |
So his Opacity is 0, he is now on top.
| | 07:17 |
But now we need to animate it
up from Opacity 0 to Opacity 1.0.
| | 07:22 |
So it will fade up in front
of the image that's behind it.
| | 07:25 |
So we will write Animate, and we are going
to write a Custom Animation function here.
| | 07:31 |
The Animation function will simply
animate the Opacity up to 1.0 over a duration
| | 07:41 |
of 1 second, and then we are
going to have a Call Back function.
| | 07:46 |
The Call Back function will simply
tell the current photo to remove its
| | 07:57 |
previous class.
| | 07:59 |
So now, there is no more class set on it.
| | 08:01 |
It's back at the bottom of the
stack along with the other photos.
| | 08:06 |
So that is pretty much all we need to do.
| | 08:09 |
So just a quick review.
| | 08:10 |
We've found out which photo is current,
we get the one that's next in line.
| | 08:15 |
If we are at the end of the list,
we move back to the beginning.
| | 08:18 |
Whichever photo is current, we remove the
current class and make it drop down in the z-index.
| | 08:24 |
Then we take whatever is next, set it
to be invisible, and make it on top.
| | 08:30 |
Now that it's on top, all we have to
do is animate the Opacity up to fully
| | 08:33 |
visible over a second, so it will
appear to fade up in front of the image that
| | 08:37 |
it's in front of and then we tell the
photo that was directly behind the next
| | 08:43 |
photo to drop down at the bottom of the z-index.
| | 08:47 |
Since we are calling set interval, this
function will be called every two seconds.
| | 08:52 |
So this will happen over
and over and over again.
| | 08:54 |
So let's save and what we are going
to do now is go back out to the browser.
| | 08:59 |
So let's bring up the imagerotator_
start in the browser, and you can see that
| | 09:04 |
every two seconds, we are just changing which
photo is on top and animating the Opacity up.
| | 09:12 |
That's how you build an Image
Rotator with some smooth animation using
| | 09:16 |
jQuery and JavaScript.
| | 09:19 |
| | Collapse this transcript |
|
|
6. Using the jQuery UI Plug-InIntroduction to jQuery UI| 00:00 | In the chapter we're going to go look
at the jQuery UI library, which is a
| | 00:05 | set of prebuilt functionality
including things like effects and widgets
| | 00:10 | and themes that you can use to give your
web applications a polished, professional look.
| | 00:15 | jQuery UI is a companion library that goes along
with the jQuery library itself. Now, it's optional.
| | 00:23 | You don't need to use jQuery UI if
you don't want to, but it does provide a
| | 00:28 | lot of really great features and functions
that you can use in your web applications.
| | 00:32 | Okay, so let's begin by taking to look
here at the jquerui.com website, and a
| | 00:38 | couple of things stand out right away.
| | 00:41 | First you'll notice that it's laid out
pretty much the same as the jquery.com
| | 00:46 | website. You have the navigation bar up here.
| | 00:48 | You got Demos, Download, API Docs, and
so on. So layout is pretty much the same.
| | 00:53 | Over here on the right-hand side,
there is the Download section, and there is
| | 00:56 | different ways to download jQuery UI.
| | 00:59 | But first I want to focus over here
on the left-hand side. You can see that
| | 01:03 | jQuery is divided up into three sections.
| | 01:07 | There's the Interactions section.
| | 01:09 | There's the Widgets section, and if
we scroll down little bit more, there is
| | 01:14 | the Effects section.
| | 01:15 | There's also the small Utilities section,
but this is mostly used internally in
| | 01:20 | the library, and I'm not
going to go into it here.
| | 01:23 | So let's scroll back up.
In the Interactions section,
| | 01:26 | You can think of these as some of the
same effects that jQuery provides in its
| | 01:31 | base library, only expanded somewhat.
| | 01:33 | So, for example there are behaviors like
Draggable and Droppable and Resizable.
| | 01:38 | These are behaviors you can
add to your own page elements.
| | 01:41 | So for example you can use the
Resizable Interaction to make something on your
| | 01:45 | page resizable or you can use the
Draggable to make something able to be
| | 01:50 | dragged around on your page.
| | 01:53 | In the Widgets section, there are a whole
bunch of user interface widgets that you can
| | 01:58 | use in your applications. There are things
like the Accordion and then Autocomplete
| | 02:02 | box and Datepickers and Progressbar,
and a whole bunch of things you can use in
| | 02:07 | your web apps to provide a really nice UI.
| | 02:09 | Down here in the Effect section, now
some of these are similar to the ones that are
| | 02:14 | already in jQuery. You might be looking
at this and saying, well, there's not a
| | 02:17 | whole lot here that's new.
| | 02:19 | Color animation is something that
jQuery does not provide out of the box, and
| | 02:23 | so these are the ones--the Hide and
the Show--these are actually greatly
| | 02:27 | expanded in jQuery UI.
| | 02:31 | A couple of other things I want to point out
before we go into the rest of the chapter.
| | 02:33 | First let's scroll back up over here.
Under the Developer Links there's a couple
| | 02:39 | of links I want to point
out that are really useful.
| | 02:41 | First there's the Development
Planning Wiki, and if we visit the Development
| | 02:45 | Planning Wiki, you can see that this
is a web page that explains the jQuery
| | 02:50 | UI planning process.
| | 02:52 | You can use this to keep track of all
the different things that are going on in
| | 02:56 | the Development of jQuery UI. It lists
thing like events and various planning and
| | 03:00 | developing status of what they are up to.
| | 03:02 | And if we go back to the main page, one
other thing to point out is the Roadmap.
| | 03:06 | Roadmap gives a detailed
assessment of what is going on in jQuery UI
| | 03:11 | Development, and so they
list out the upcoming releases.
| | 03:13 | You can see here, there is the 1.11 release.
| | 03:16 | There is 1.12 and so on, down here.
| | 03:18 | They have got the 2.0 release
coming up, and they're listing out all the
| | 03:22 | different things that they're
working on for upcoming releases.
| | 03:25 | If jQuery UI doesn't provide what you
need today, you can visit this Roadmap to
| | 03:30 | see what is that they're working on.
| | 03:31 | So now that we have an overview of what
jQuery UI is, let's jump in and start
| | 03:37 | exercising library and see what it can do.
| | Collapse this transcript |
| Exploring the jQuery UI widgets| 00:00 | Let's dive in and take a look at some of
the widgets that jQuery UI provides for
| | 00:05 | us to use in our web applications.
| | 00:07 | So, I am going to scroll down, and I'll
start off by looking at the Accordion widget.
| | 00:13 | Now, before I go into the demo for this
particular widget, I want to point out
| | 00:17 | how the demo pages are
laid out here on jqueryui.com.
| | 00:21 | So, right here in the middle is the
widget that's being demonstrated, and then
| | 00:26 | over here on the right-hand side there
are various options you can set for that
| | 00:30 | particular widget, under the Examples section.
| | 00:32 | If we scroll down a little bit more,
you can see that there is a view source
| | 00:36 | option, and if I click on view source,
then the source code that was used to
| | 00:40 | build this particular
example right here is listed out.
| | 00:44 | When you download jQuery UI, all of
the source code for the demos comes down
| | 00:48 | with the download anyway.
| | 00:50 | So, you can either choose to use that
sample code or you can copy and paste from
| | 00:53 | here on the website. All right!
Let me go ahead and close the view source.
| | 00:58 | Last thing I want to point out is the
API documentation. Each one of the widgets
| | 01:02 | has a link to the API
documentation for that widget.
| | 01:05 | So you can see here that this is the
page that explains all the various things
| | 01:09 | that the Accordion widget can do,
explains in detail all the different options,
| | 01:15 | how to call it with various
different properties, and so on. All right!
| | 01:19 | So let's scroll back up, and
let's go back to the Demo.
| | 01:24 | So, Accordion widgets, I'm sure you
have seen these before, they are used to
| | 01:28 | break up information into
easily expandable sections, right?
| | 01:31 | So, I click on each section and then
it gets slowly revealed into place.
| | 01:35 | But of course there are various
options I can use. For example I can
| | 01:38 | customize the icons.
| | 01:40 | I can have the Accordion widget open
just by hovering instead of clicking, and
| | 01:44 | so on, and so forth.
| | 01:46 | We'll actually use the Accordion widget a
little bit later when we build our real site.
| | 01:51 | One of the things I want to point out
really quickly though, is that to use many
| | 01:53 | of these widgets is really pretty simple.
| | 01:56 | Let's go down to the view source, and
you can see here that just to use the
| | 02:02 | Accordion widget, all you need to do is
call the accordion function and pass in
| | 02:06 | whatever parameters you want to use on the ID
of the element that you want to be the accordion.
| | 02:12 | If we go down to the source code a
little bit further, you'll see that
| | 02:16 | here's the div with the ID of the
accordion on it, and it follows some
| | 02:20 | internal structure, right?
| | 02:21 | These h3s provide the titles.
| | 02:23 | These divs provide the content, and so on.
| | 02:26 | But all you have to do is set up your
content like you normally would anyway and
| | 02:30 | then just call the
accordion function and off it goes.
| | 02:33 | So, next is the Autocomplete widget.
| | 02:35 | Autocomplete allows me to have a text field.
| | 02:38 | When I type certain letters, you can
see that I'm getting a whole bunch of
| | 02:43 | predefined options that have that letter in it.
| | 02:46 | So, let's check off the A and type a J instead.
| | 02:49 | You can see that I'm getting
programming languages that just have the letter J
| | 02:54 | in them. And I can get more
specific if I start doing things like this.
| | 02:57 | And once again, the Autocomplete box has
a whole bunch of different options over
| | 03:03 | here on the right-hand side.
I can have it show up as a Combo box.
| | 03:06 | I can have various categories.
| | 03:09 | So if I type a little a again, you
can see that there is Categories in here that you can't select.
| | 03:13 | A pretty rich set of
functionality for an Autocomplete wwidget.
| | 03:16 | jQuery UI also provides buttons.
| | 03:19 | Now here are the pretty standard
simple buttons, but you can of course have
| | 03:22 | things like checkboxes.
| | 03:23 | Here they are, behaving like checkboxes.
| | 03:26 | You can assign icons to your buttons.
You can have them behave like Radio
| | 03:30 | button. You can have a Split button,
which has various different actions here.
| | 03:35 | You can build toolbars out of
buttons, pretty rich functionality.
| | 03:38 | Than there is a Datepicker widget.
| | 03:40 | I am sure you have seen these before.
It allows you to choose a date.
| | 03:43 | All right, pretty
straightforward, you can have multiple dates.
| | 03:47 | Here is Display multiple months,
right here. So you can imagine if you are
| | 03:51 | checking into a hotel or choosing plane
flights and so on, this would be very useful.
| | 03:55 | You can even have them be localized.
| | 03:57 | So if I choose Localization, you can
see that here's the Calendar in French.
| | 04:01 | We can also use various
different writing formats.
| | 04:04 | You know, here's one in a right-to-left
languages, using Hebrew. Okay, let's move on.
| | 04:09 | Here's the Dialog widget.
| | 04:10 | I am sure you have seen dialogs before,
nothing really earth shattering here.
| | 04:14 | But there's a Basic dialog.
| | 04:15 | There is Modal dialogs, and then you
can have Modal messages and so on.
| | 04:19 | These are pretty useful in modern web apps.
| | 04:22 | There is a new Menu element here in jQuery UI.
| | 04:26 | Now they are still working on the Menu
bar as of this recording, but this is the
| | 04:30 | Menu element, and you can see,
you can customize it with icons.
| | 04:33 | Here is the Progressbar. Progressbar
of course, we've all seen these before.
| | 04:38 | You can have them with various
labels and indeterminate value and so on.
| | 04:42 | This is the Slider control, again
very useful control. Here is one with
| | 04:47 | multiple sliders, all
right. Here's a Range slider.
| | 04:51 | You can see that this is pretty useful.
| | 04:53 | You can imagine like you know choosing a
range of hotel room prices you want to pay.
| | 04:57 | Down here is the Spinner control.
| | 04:59 | The spinner control is pretty
straightforward. It just allows you to use these up and
| | 05:02 | down arrows to quickly choose numbers.
| | 05:04 | There is the Tabs control.
| | 05:08 | Again, I'm sure we've all seen tabs
before. And there's the Tooltip control.
| | 05:14 | So that's a pretty brief recap of
the widgets available in jQuery UI.
| | 05:21 | So, let's move on to our next section.
| | Collapse this transcript |
| Exploring the jQuery UI effects| 00:00 | Okay, now let's take a look at the
interactions and effects in jQuery UI.
| | 00:05 | Now remember interactions and effects
are not widgets. You don't add these to
| | 00:09 | your page; what you do is you apply
these behaviors to things that are
| | 00:13 | already in your page.
| | 00:14 | So, let's begin by looking at the
Interactions section, and I am going to
| | 00:18 | click on Draggable.
| | 00:19 | Now I want to point out again that the
way the pages laid out is very similar to
| | 00:24 | the layout for widgets.
| | 00:25 | So, here's the example.
| | 00:27 | Over here on the right-hand side
are various options you can try out.
| | 00:30 | If you scroll down, there's a view
source option, and of course there's a link
| | 00:35 | to the API documentation.
| | 00:37 | So, beginning with the Draggable
interaction, you can see that when I click on
| | 00:42 | this div, I can drag it around, all right.
| | 00:44 | Now this is a div I already have in
my page and I've simply applied the
| | 00:49 | interaction of being draggable to it.
| | 00:52 | And I can also do things like constrain
movements. So for example, this one can
| | 00:56 | only be dragged vertically. This one
can only be dragged horizontally. This one
| | 01:00 | over here is only draggable within its parent.
| | 01:04 | This one here is within this
containing box right here.
| | 01:09 | There are various different things you can do.
| | 01:11 | You can have handles.
| | 01:12 | Here's one that can only be dragged
by its handle. When you click somewhere
| | 01:15 | else, you can't drag it. All right!
| | 01:17 | You can drag this around, but you
can't drag by this handle for example.
| | 01:20 | So, Draggable is a behavior that you
can apply to things that are in your page.
| | 01:26 | Let's take a look at
another example. There is Resizable.
| | 01:29 | We're going to be using Resizable in
our real-life website, when we build it
| | 01:36 | later in the course.
| | 01:37 | So, again you can see that Resizable,
when the Resizable interaction is applied
| | 01:42 | to an element, this little resize handle
appears down in the bottom of the element,
| | 01:47 | and I can just drag on that and resize it.
| | 01:51 | I can also do things like
constrain the resize area.
| | 01:54 | So for example, I can't
resize outside this parent.
| | 01:58 | I can have a maximum and minimum size,
so I can't make it any bigger than that.
| | 02:02 | I can't make it any smaller than that.
| | 02:04 | There are different things
| | 02:06 | I can, do things like animations. So I
can drag out a little ghost image, and
| | 02:10 | then it grows into my resizable area.
| | 02:13 | Again, you get the idea.
| | 02:14 | I am not going to go through all these,
because they're pretty exhaustive, but
| | 02:18 | the idea is that these are behaviors
that you apply to things in your page.
| | 02:21 | They're not predefined user interface,
the way that things look; you simply
| | 02:25 | say, I want to make something resizable
or draggable or droppable and then you
| | 02:30 | apply the jQuery UI behavior just
like you would apply any other kind of
| | 02:35 | behavior in your code.
| | 02:36 | Let's scroll down over to the effects.
| | 02:38 | Let's take a look at the Color Animation effect.
| | 02:43 | So, I am going to go ahead and toggle
the effect, and you can see that jQuery
| | 02:47 | UI provides a way of animating not
just things like size and position, but
| | 02:52 | animating color, and this is something that
jQuery itself does not provide out of the-box.
| | 02:56 | So, if you want to animate between two
colors, you can use the Color Animation effect.
| | 03:01 | There are also various other effects
you can use in jQuery UI.
| | 03:04 | Let's take a look at the Show effect.
| | 03:07 | Now again, jQuery itself provides
effects for things like showing and hiding
| | 03:11 | and fading and so on, but you can see
here that jQuery UI provides a whole
| | 03:15 | bunch of other effects.
| | 03:16 | So, for example there's the Blinds
effect, where it comes in as if you're
| | 03:20 | dropping blinds.
Here's the Bounce effect.
| | 03:24 | It bounces into place. Here's the Explode
effect, which kind of explodes into place.
| | 03:30 | Here's the Pulsate effect. You get the idea.
| | 03:33 | There's a whole bunch of prebuilt
effects that you can use in your pages.
| | 03:38 | And so once again, if we click on the
view source, you'll see that using the
| | 03:42 | effects is really very simple.
| | 03:44 | You simply use the Show method with the effect
that you want to have applied to the element.
| | 03:50 | So, just like widgets, you can use
interactions and effects to apply really
| | 03:54 | professional-looking UI to your web pages.
| | Collapse this transcript |
| Using the jQuery UI ThemeRoller| 00:00 | Now, you might be wondering if it's
possible to customize the appearance of the
| | 00:04 | widgets provided by jQuery UI.
| | 00:06 | You probably have your own custom CSS
and appearance in your web application, and
| | 00:10 | you want to make sure that the widgets
that you're going to use from jQuery UI
| | 00:14 | look the same inside your web page.
| | 00:17 | And the answer of course is yes.
| | 00:20 | You can customize the way that they look.
| | 00:21 | That's what we're going to do in this movie.
| | 00:24 | So, let's go ahead and click
on the Themes link right here.
| | 00:27 | That will take me to the ThemeRoller
application, and here is where I can
| | 00:32 | customize the way that the widgets look.
| | 00:34 | Now, before I get started, let me just
point out that this page, the ThemeRoller
| | 00:38 | application, contains all of the user
interface elements that jQuery UI provides.
| | 00:44 | So we can see, at a glance, how each thing is
going to look when we change the appearance.
| | 00:49 | Right, here's the Accordion, the
Buttons, the Autocomplete, the Spinner, the
| | 00:53 | Datepicker, the Tabs and so on. So all
the controls are right here on one page.
| | 00:57 | Now, there's two ways to use
ThemeRoller to build a custom appearance.
| | 01:03 | The first way is to simply roll your own,
in which case you have a whole bunch of
| | 01:07 | categories that you can expand out and
change the various settings for the theme
| | 01:11 | that you can then download.
| | 01:13 | The other way to do it is to use the
gallery of prebuilt themes that you can
| | 01:18 | apply to the various user interface elements.
| | 01:21 | So let me begin by just choosing a
couple of the prebuilt themes so you can see
| | 01:26 | what they look like.
| | 01:27 | So, you can see here when I click on
UI lightness, I get a nice prebuilt look
| | 01:33 | and feel for these components.
| | 01:36 | If I click on UI darkness, I get a
completely different look and feel, and if
| | 01:40 | I scroll down here to the bottom of the page,
you'll see that below the section over here,
| | 01:44 | there is a Reverse page background color option.
| | 01:47 | So, I can click that to see what the
theme will look like on a dark-themed page.
| | 01:52 | And you can see in this case the UI
darkness looks a lot better on a dark theme
| | 01:57 | page than it does on a light theme page.
| | 02:00 | So, let's try a few more.
| | 02:01 | Here's the Smoothness theme.
| | 02:03 | Here's is the Start theme.
| | 02:04 | Here is the Sunny theme. In fact let
me go back and turn of that setting
| | 02:09 | to go back to the light-colored page.
| | 02:11 | Let's scroll back up. And this one,
the Sunny one, looks kind of nice, and you
| | 02:15 | know what? I think I am going to use
this one in my practical example for later.
| | 02:19 | Now, one of the other things I want to
point out is that you can customize the
| | 02:24 | way that any one of these prebuilt
themes looks by going back over to the Roll
| | 02:30 | Your Own category after
selecting the one that you want to use.
| | 02:35 | So, in this case, if I go back to
Roll Your Own, you'll see that now these
| | 02:38 | categories have picked up all the
settings that are predefined by default in
| | 02:43 | the Sunny category.
| | 02:44 | So, let me go scroll down a little
bit and show you how some of these
| | 02:48 | changes might look.
| | 02:49 | So here's the Alert Sample, right. This
is what an error message might look like
| | 02:54 | using the Sunny UI sample.
| | 02:55 | So, let me scroll back up
and choose the Error category.
| | 02:59 | Let me choose a different background color.
| | 03:01 | So right now it's kind of
this reddish kind of color.
| | 03:04 | Let me make it purple, okay, and you
can see that when I scroll back down now,
| | 03:09 | you can see there it's changed.
| | 03:11 | I'll scroll back up. And let me
choose a different icon color.
| | 03:15 | Let's make the icon nice and green, and
when we scroll back down, you can see
| | 03:19 | that the icon is now green.
| | 03:21 | So, you can customize the way that any
one of the prebuilt themes looks inside
| | 03:26 | of the ThemeRoller application.
| | 03:28 | Now, when you're ready to download,
you can download the theme just by itself.
| | 03:33 | If you click on Download Theme, this
will take me to the Download Builder
| | 03:36 | application, which will allow me to
download all of jQuery UI as well as the theme.
| | 03:42 | But if I scroll down, you'll see that
this has now been set to Custom Theme.
| | 03:46 | It lets me choose the name of the folder.
| | 03:50 | I can rename it here if I want to.
| | 03:52 | So, I could rename it
Joe's Sunny theme or whatever.
| | 03:56 | Let me go back to the
ThemeRoller application. All right!
| | 04:00 | So that's how we use ThemeRoller to
build a custom appearance or a predefined
| | 04:06 | appearance for the widgets that you
want to use in your application using
| | 04:10 | jQuery UI.
| | Collapse this transcript |
| Downloading and installing jQuery UI| 00:00 | Now to use jQuery UI in your project
you of course have to download it and
| | 00:04 | include it in your application, and
that's what I'm going to cover here.
| | 00:08 | So here I am on the jQuery UI homepage,
and there's a couple of different ways
| | 00:13 | to download jQuery UI.
| | 00:15 | There is the Custom Download, which
I'll get to in just a second, but there is
| | 00:19 | these two other links down here.
| | 00:20 | There is the Stable quick download
which gives you a ZIP file of the current
| | 00:26 | jQuery UI Library, and at the time of
this recording that's version 1.10.2, which
| | 00:32 | you need to use with jQuery 1.6 or later.
| | 00:36 | There is also the Legacy download, which
is a version back, and that's 1.9.2, and
| | 00:41 | again you can see that
requires at least jQuery 1.6.
| | 00:45 | So if you just want to download the
quick, you know, default widgets in their
| | 00:49 | current state, just use one of these two links.
| | 00:52 | I'm going to, however, show the Custom
Download, which is this link right here.
| | 00:56 | When I click on the Custom Download
button I get taken to the Download
| | 01:01 | Builder, and the Download Builder
allows me to customize what I want to
| | 01:05 | include in my jQuery UI download.
| | 01:08 | Again, up here I've got the various
stable and legacy links, if I change my mind
| | 01:14 | I want to just download those, or I can
scroll through here and see the various
| | 01:19 | pieces of jQuery UI.
| | 01:22 | So I can choose to only include the
ones that I know I'm going to be using.
| | 01:26 | I'm going to choose to leave all of the
core options selected because these are
| | 01:31 | the pieces of jQuery UI that you're
going to need in order to use pretty much
| | 01:36 | any of the basic functionality.
| | 01:37 | But I can do things like turn off various
functions that I know I'm not going to use.
| | 01:42 | So for example, if I know I'm not
going to using the Sortable or Selectable
| | 01:45 | behaviors from the
Interactions, I can just turn those off.
| | 01:48 | Similarly, I can turn off any of the
controls that I know I'm not going to use.
| | 01:53 | So if I know I won't be using the
Progressbar and the Slider and the Spinner and
| | 01:55 | so on, I can just go ahead
and choose to turn those off.
| | 02:00 | Now I'm going to leave them all clicked
for the sake of argument. And then down
| | 02:05 | here, you get the idea,
| | 02:06 | I can do the same thing with the
effects. I can just choose not to use
| | 02:10 | whatever effects I know I'm not going to use.
| | 02:11 | And then down here at the bottom is the CSS
Theme that I want to include with my download.
| | 02:18 | Now, if I came here straight from
Download Builder on the homepage, I can
| | 02:22 | choose any one of the default ones.
So for example I can just choose to
| | 02:27 | download the Sunny theme.
| | 02:28 | If I chose to come here through the
download link on the theme roller page, I
| | 02:33 | would have the option of choosing the
custom theme that I just built, along with
| | 02:37 | all of the options I just showed you,
turning off the interactions and the
| | 02:40 | widgets and the effects and so on.
| | 02:42 | So what I'm going to do is just choose
one of the basic CSS pre-provided ones,
| | 02:47 | in this case the Sunny theme, and I'm
going to choose to leave all of these guys
| | 02:52 | clicked, so that you can see what
the resulting folder looks like.
| | 02:55 | Then I would just choose the Download
button right here, and that would download
| | 02:59 | the jQuery UI with all of
selected options to my computer.
| | 03:03 | Now I'm not going to do that right now
because it takes a few minutes and I've
| | 03:07 | already done it anyway, so let's go
over to the Desktop and take a look at the
| | 03:10 | folder and see what it looks like
when it comes down to your computer.
| | 03:15 | So here on the desktop you can see
that after I've downloaded jQuery UI,
| | 03:19 | I get this ZIP file, which is jQuery-ui-1
.10.custom.zip, and I've extracted that
| | 03:25 | to this folder right here.
| | 03:27 | So let's go ahead and open the folder,
and inside the folder is another folder
| | 03:31 | that contains all of the jQuery UI stuff.
And it's organized into three different folders.
| | 03:37 | There is the js folder, the css folder,
and the development-bundle, and I'm
| | 03:41 | going to take a look at each one of these.
| | 03:43 | Now, before I look at the folders,
let's double-click on the index file and
| | 03:46 | see what's in there.
| | 03:48 | Now the index file shows what my components are.
| | 03:50 | Now this shows all the components
because I chose to download all of them, but
| | 03:54 | this would show me all of the
components that I chose to download in the theme
| | 03:58 | that I chose to download them with.
| | 03:59 | So you can see that as I scroll
through here, I've got all my UI widgets that
| | 04:05 | are using the base preprovided Sunny CSS theme.
| | 04:10 | This gives me a quick glance at the
existing components that I chose to download.
| | 04:15 | All right, so let's minimize this.
| | 04:17 | Let's take a look at the js folder.
| | 04:20 | Inside the js folder I get
two versions of jQuery UI.
| | 04:25 | I get jQuery UI 1.10.2, or you know whatever
the current version is that you downloaded.
| | 04:31 | This is the uncompressed development
version, and here is the custom.min.js, and
| | 04:37 | you can see the difference
between this two file sizes about 200K.
| | 04:41 | Just like in regular jQuery, you have
an uncompressed development version that
| | 04:46 | you can include in your web page while
you're developing, and then you have a
| | 04:50 | compressed version that you can include
on your production website which takes
| | 04:54 | less space and less time to download.
| | 04:55 | jQuery UI also includes the latest
version of the jQuery Library itself.
| | 05:01 | Now, that's the uncompressed development version.
| | 05:04 | But you can choose to use the
compressed version if you want to.
| | 05:07 | All right, let's go back up.
| | 05:08 | Now, let's take a look at the CSS folder.
| | 05:11 | The CSS folder contains the name of
the theme that I chose to download, and in
| | 05:15 | this case it's the Sunny theme.
| | 05:17 | So if we look inside here, you'll see
that this is the CSS code, and again I get
| | 05:21 | two different version. I get the
uncompressed development version and the
| | 05:26 | compressed and minified production
version. And this is what I would put up to my
| | 05:30 | production web server. And then inside
this folder here are all of the images
| | 05:34 | that that CSS theme needs in order to use.
| | 05:37 | Let's just go back.
| | 05:38 | So this is what you would put into your
CSS folder, or you could just choose to
| | 05:44 | include the top-level folder and
write the paths in your HTML files
| | 05:49 | appropriately to go into this
folder in order to access your CSS.
| | 05:54 | Now, let's take a look at the development bundle.
| | 05:56 | Now, the development bundle folder comes
down by default, and it contains all of
| | 06:01 | the developer information that needs
to go along with building jQuery UI.
| | 06:06 | Unless you're interested in seeing
how the developers work on jQuery UI or
| | 06:11 | contributing to the source code,
| | 06:12 | you probably won't ever need to use
what's in this folder, except for two, and I'm
| | 06:16 | going to point those out right here.
| | 06:18 | The first is the docs folder.
| | 06:20 | Now, the docs folder contains the
documentation for all the various widgets.
| | 06:24 | So if you happen to be working
offline and you don't have access to
| | 06:27 | the Internet, you can come in here and see
the documentation for the various widgets.
| | 06:32 | So let's go ahead and click on the
Accordion widget and bring that up in the
| | 06:35 | browser, and you can see that
it's pretty barebones, right?
| | 06:38 | I can click on these various links and
you know read the documentation that goes
| | 06:42 | along with the widget itself.
| | 06:45 | This is true for all of the stuff I downloaded.
| | 06:48 | Let's go back to the folder.
| | 06:49 | All right, let's go back up one level.
| | 06:52 | Inside the demos folder are demos for
each and every one of the components that
| | 06:58 | I downloaded. So once again I can go
into the accordion folder and I can click
| | 07:03 | on the index file that's in that
folder and bring it up and now all the demos
| | 07:07 | that I had online on the jQuery UI
website itself are here locally on my
| | 07:12 | machine. So for example, I can click on
the default functionality link, right, and
| | 07:17 | you can see that this is the demo.
| | 07:18 | I can go back, choose the Open on hover.
| | 07:22 | So you can see that these are all the
demos that are available online, and I now
| | 07:26 | have them locally on my machine.
| | 07:29 | So I can debug them and see how
they work and otherwise use them.
| | 07:33 | All right, so let's go back to the folder.
| | 07:35 | just to recap, in order to deploy
jQuery UI, what you would do is, inside the
| | 07:40 | JavaScript folder, you would choose
which one of these two files, either the
| | 07:45 | uncompressed or the compressed version,
put that in your scripts folder along
| | 07:49 | with whatever library of jQuery that
you're using, in this case it's 1.9, and
| | 07:54 | then back up here in the CSS folder,
| | 07:58 | here in the CSS folder, you would
either copy this parent folder or these
| | 08:03 | components of the theme and put them
into your CSS folder and then reference
| | 08:08 | them like you would any other CSS
that you're using in your project.
| | 08:12 | And we'll see how to do that when we
build our practical site later on in the course.
| | Collapse this transcript |
|
|
7. Putting It All TogetherOverview of the sample web site| 00:00 |
So we have reached the point in the
course now where we can take what we have
| | 00:04 |
learned about jQuery and put it
all together into a real site.
| | 00:08 |
What we are going to do is take a site
that we have built that was built without
| | 00:13 |
jQuery and we are going to update it
with some new features to make it more Web
| | 00:18 |
2.0, more interactive, a
little bit more visually appealing.
| | 00:22 |
We are going to do a few things.
| | 00:23 |
First, drawing on our
jQuery UI widget knowledge,
| | 00:27 |
we are going to go and add an Accordion
control to our website and see how that works.
| | 00:33 |
Then we will build an image rotator that
has some nice smooth transition effects
| | 00:39 |
and we will do that just using jQuery in CSS.
| | 00:41 |
We will also build some mouse
over tooltips and we will build a
| | 00:46 |
jQuery-based image selector.
| | 00:49 |
So you will click on some thumbnails
and that changes a larger view into the
| | 00:53 |
current image and then we will use one
of the jQuery UI interactions to make a
| | 00:58 |
form field resizable and constrained.
| | 01:02 |
So let's begin by taking a look at the
current site the way that it is and then
| | 01:07 |
we will take a look at the site after
it has been modified to work with jQuery.
| | 01:13 |
Groundswell is a fictitious surfing shop
site and it has got all kinds of stuff on it.
| | 01:20 |
So here you can see that there is a news
section and we got different photos and
| | 01:25 |
you can buy some products and
that kind of stuff. So let's see.
| | 01:31 |
That's the homepage and if we go to Gear
section, you can see that they have got
| | 01:35 |
some stuff that's for sale.
| | 01:37 |
We click on the Boards and it looks like
in this section we have got boards that
| | 01:42 |
are listed here and over here I have
got the current board that I am looking at
| | 01:46 |
and if I click on the view larger link,
you will see that that takes me to a
| | 01:51 |
separate page where I can see the
larger graphic image. Then let me see.
| | 01:56 |
Go to the Lifestyle page.
| | 01:58 |
There is a Photo array that's pretty standard.
| | 02:02 |
There is also a Register link where I
can register for the site and you can see
| | 02:06 |
I can fill out a form. Pretty good.
| | 02:09 |
Let's take a look at the site however
once it has been updated to work with jQuery.
| | 02:13 |
So let's go back to the folder and we
will go to the Final version and we will
| | 02:19 |
bring this guy up in the browser.
| | 02:21 |
So this is pretty similar, but a couple of
things right away you notice off the bat.
| | 02:25 |
Over here now, this image array is
being animated and it has got a nice little
| | 02:29 |
fade effect going on and
that's all done with jQuery and CSS.
| | 02:32 |
There is no plug-in there.
| | 02:34 |
You can see that the News Section has
been updated to use the Accordion control
| | 02:39 |
that we saw in the jQuery UI chapter.
| | 02:42 |
So I can now click on these various Accordions
and read the news, and that looks a lot nicer.
| | 02:48 |
It's a lot more interactive.
| | 02:49 |
It's nice and smooth, scrolling and animated.
| | 02:52 |
So there are some changes to
the Homepage that have been made.
| | 02:55 |
Let's go check out the Gear section.
| | 02:57 |
So here is the Gear section.
| | 02:59 |
Let's go look at the Boards.
| | 03:01 |
Now you can see that here in the Board
section rather than having to click on
| | 03:06 |
the view larger link, I can just
roll over it and you see the nice little
| | 03:10 |
tooltip fades in and fades out.
| | 03:14 |
So that's a lot nicer than
having to go to a separate page.
| | 03:18 |
What other changes have we made?
| | 03:20 |
So here in Lifestyle section, if you
look at the Register, you can see that
| | 03:25 |
the Comments field is still there, but now
you got a nice little resize handle down here.
| | 03:30 |
So I can resize this up and down based upon
how much room I need to enter my comments.
| | 03:38 |
So all of this has been accomplished
using jQuery and we are going to go look
| | 03:42 |
now at how each one of these features
was implemented, so you can implement
| | 03:47 |
these features and others in your own sites.
| | 03:50 |
| | Collapse this transcript |
| Using the accordion widget| 00:00 | Let's begin by adding the accordion
control to the index page of our website.
| | 00:07 | So, what I am going to do is
open the index page in my Editor.
| | 00:13 | Let's scroll down to the Latest News
section and that's this guy right here.
| | 00:19 | So let's find that in the source code.
| | 00:21 | Recall the accordion control needs to
have a single container that it uses to
| | 00:27 | encapsulate all of the
content tabs for its content.
| | 00:31 | So, what I am going to do first is wrap the
contents of the News section inside a div.
| | 00:39 | This now gives us one container to
point the accordion control at and say yeah,
| | 00:43 | this is what you need to use as your container.
| | 00:45 | So I am going to give it an id and the
id is what we are going use to identify it
| | 00:50 | as the accordion control and I am
going to give it an id of newsSection.
| | 00:58 | Now that I have created div, I am going
to take the other part of it, and scroll
| | 01:03 | down to the end of the
newsSection and put it in right there.
| | 01:08 | That's the first thing I need to do.
| | 01:10 | So, now I have wrapped in a div.
Now, include the jQuery library and
| | 01:17 | its associated jQuery UI library.
| | 01:19 | So, we are going to go back up to the
head section, and let's quickly just look
| | 01:23 | at the folder structure.
| | 01:26 | So, here in the folder, let's look in
scripts and you can see that there is
| | 01:29 | jQuery and I am also using the
minified version of jQuery ui.
| | 01:33 | So, these are the production version script
files that I have downloaded from the site.
| | 01:39 | So, let's go back into the code.
| | 01:42 | So, a couple of things
that you need to do first.
| | 01:43 | First, I am going to include a script
and that's going to be the jQuery file.
| | 01:53 | So, that is located in the scripts
folder and recall in the scripts folder,
| | 02:01 | I am using the minified
version of the jQuery library.
| | 02:04 | So, all I need to do is name it correctly.
| | 02:07 | That's jquery-1.3.2.min.js, and
that's all I need to do there.
| | 02:15 | So, now I need to include the
script for jQuery ui as well.
| | 02:19 | So, that's also script of type text/
javascript and that one is located in
| | 02:26 | scripts folder too, scripts and
that is jquery-ui-1.7.2.custom.min.js.
| | 02:44 | So, now I have included my scripts and I
need to include the link to jQuery ui
| | 02:50 | style sheet as well.
| | 02:51 | Just remember when we rolled up that theme
and downloaded it, we need to include that.
| | 02:56 | So, it's going to copy this link and
type in a reference to the style sheet.
| | 03:03 | Let's makes sure we have the name
correct so let's pop-out to the folder and
| | 03:08 | let's look in the CSS part and
that's the sunny theme and
| | 03:16 | it's jquery-ui-1.7.2.custom.css
| | 03:20 | Okay, so that is in css/sunny and
it is the jquery-ui-1.7.2.custom.css.
| | 03:36 | So, now it's time to write the script
that's going to create the accordion control.
| | 03:41 | So, I am just going to type
script type is text/javascript.
| | 03:48 | We want this to happen when the document loads.
| | 03:50 | I am going to type a little jQuery code here.
| | 03:54 | Since I want this to
happen on the document load.
| | 03:56 | Throughout the course, what I have been
doing is writing a document ready event,
| | 04:00 | right. I've been doing something that
looks like this and that's all fine and good.
| | 04:04 | There's actually a shortcut, however,
that you can use for the document ready
| | 04:08 | event and that is just to simply
pass a function to the jQuery object.
| | 04:12 | So, I am just going to write a dollar
sign and then brace and then function.
| | 04:18 | And this is the function that's going
to be called when the document loads.
| | 04:22 | And all I need to do is tell jQuery to
get me the newsSection item, remember
| | 04:29 | that's the div that we created, and
then all I need to do is type accordion.
| | 04:36 | Remember, however, that the accordion
control by default looks for link tags
| | 04:41 | as its header and paragraph as its content.
| | 04:45 | We need to make a little fix there because
you see these are h4. These are not links.
| | 04:48 | The paragraphs are fine, but these are h4 tags.
| | 04:51 | So, let's scroll back up and type in
that little option here, because the
| | 04:56 | accordion control gives us the
option of what to specify as the header.
| | 04:59 | So I will pass in an object that says that
the header is an h4 and that should fix it.
| | 05:06 | So, now we are ready to test out the page, and
make sure that that's working. So, let's do that.
| | 05:12 | Let's go to the browser.
| | 05:13 | I am going to just click on index.htm,
bring it up, and let's scroll down.
| | 05:18 | And you can see that the accordion
control is there but something is off.
| | 05:22 | So, we had to fix the CSS Style Sheet,
and this is a common issue that you will
| | 05:26 | run into when you are
updating your existing site.
| | 05:29 | You can see that the control
works, but the CSS is clearly off.
| | 05:33 | We got to go and fix that.
| | 05:34 | So let's go make some changes to our
CSS codes so that the title looks okay and
| | 05:39 | everything is all nice and cleaned up.
| | 05:41 | So, we will switch back to the code.
| | 05:44 | So, let's go into our CSS file and fix this.
| | 05:49 | Here is our CSS file.
| | 05:50 | So, there's a couple of quick
changes we need to make to the CSS code.
| | 05:53 | What we are going to do is define a
couple of style sheets for our content.
| | 05:58 | So, let's scroll down to
where the main content is.
| | 06:02 | Here is the main content section and
in the main content section, we are
| | 06:06 | going to define a couple of style
sheets that are particular to our page to
| | 06:11 | make the h4s work correctly.
| | 06:13 | So what we will do is we will say #mainContent.
| | 06:17 | We are going to create a style sheet
here for h4, and the span.subhead inside
| | 06:24 | the h4 because that, if we look
back at the source code, and we scroll down
| | 06:30 | to the newsSection, you can see that
there is some spans in here and we need to
| | 06:35 | fix some offsets that the
accordion control is not liking.
| | 06:39 | So, what we are going to do is inside
the subhead span, we are going to define
| | 06:43 | a margin-left of 20 pixels,
so that everything is offset from the
| | 06:50 | left-hand side of the page.
| | 06:52 | Then we are going to create a style
sheet for the news section itself and we
| | 06:56 | will call that newsSection and inside
the newsSection, we are going to assign a
| | 07:04 | margin-left of 20 pixels.
| | 07:10 | And for the newsSection's h4 and the
newsSection paragraph tags, we are going to
| | 07:23 | define the margin-left to be 0,
and the margin-bottom to be 0.
| | 07:33 | In fact, actually this
probably needs more like 40 pixels.
| | 07:38 | So, now let's go back and
see what changes that has made.
| | 07:42 | So, we are going to go back to the
browser and we are going to refresh and
| | 07:49 | you can see that that's pretty
much cleaned everything up.
| | 07:51 | So, what I have done is I have gone
through and it looks like one little guy
| | 07:55 | did not make it in.
| | 07:55 | Let's go back to it and
see why that is. Let's see.
| | 08:00 | It looks like this guy is missing a span.
| | 08:04 | So, we need to copy that span right there,
we will put that span around him, and
| | 08:13 | go back and we will go back and
refresh and now everything is fixed.
| | 08:16 | So, now you can see that the text fits just
fine and the accordion control is working.
| | 08:20 | So, that's pretty much all we needed
to do to get the accordion control
| | 08:24 | integrated into the page and you will
find if you have existing sites, you may
| | 08:28 | need to mess around with your CSS a
little bit to get it to accommodate the CSS
| | 08:32 | that the controls we are going to use.
| | 08:34 | In that case, it's pretty much as an
exercise in figuring out why the elements
| | 08:39 | are positioned wrong.
| | 08:40 | And usually just by tracing through the
CSS you can almost immediately find out
| | 08:43 | what's going on or you can use
whatever built-in browser tools you have in
| | 08:47 | browsers like Firefox and IE now provide tools
for looking at what CSS is being calculated
| | 08:53 | for given elements.
| | 08:54 | So, we have pretty much built the
accordion control and it's working.
| | 08:57 | Let's make sure that it
works in Firefox as well.
| | 08:59 | Let's go back out to the folder.
| | 09:01 | Here we are in the folder, let's open
this up with Firefox and you can see here,
| | 09:09 | yeah, it's working just fine.
| | 09:09 | It is the same accordion
control, same page, same behavior.
| | Collapse this transcript |
| Creating an image rotator| 00:00 | So now that we have the accordion
working, let's go build our image rotator.
| | 00:06 | That's going to cause this image right
here to display a nice smooth slide show
| | 00:11 | through a series of images.
| | 00:13 | Let's look in our folder really quick.
| | 00:16 | So here we are in the folder and you
can see inside the _images folder, we have
| | 00:21 | a bunch of thumbnails of the
photos we want to flip through.
| | 00:26 | So you can see that each one has the name
thumb on the end, and there is four of them.
| | 00:31 | So let's go back to our code.
| | 00:36 | In the code, in the sidebar,
that's this image right here.
| | 00:40 | So that's the image that's currently there.
| | 00:42 | What we want to do however is
build a slide show around this image.
| | 00:47 | So let's clean this code up a little
bit right here and isolate that image.
| | 00:54 | What I am going to do is put a div around this.
| | 01:00 | And that's going to serve as our photo
show, in fact, I am going to give it an
| | 01:04 | id called photoShow.
| | 01:07 | What I am going to do now is copy and
paste these images right here, so I have
| | 01:11 | got the four images that we are going
to loop through and each one of them is
| | 01:14 | numbered in ascending order.
| | 01:17 | So that's 2, that's 3, and that's 4.
| | 01:20 | And for the alt, I am going to
change it from that to be Photo Gallery.
| | 01:27 | And I am going to do that for each
one of these guys, so that we got valid
| | 01:30 | alt text on each one. Let's see.
| | 01:35 | We are going to leave
everything else pretty much the same.
| | 01:39 | I also want to do something else, I
want to make sure that each one of these
| | 01:41 | images is clickable so that when the
user clicks on the image, they go to the
| | 01:47 | photo's home page of the lifestyle section.
| | 01:50 | So I am going to put in
link and I am going to say a
| | 01:58 | href="lifestyle/photos.htm", and
let's see that should be about it.
| | 02:07 | And I am going to take off that
thing there, put on to the image.
| | 02:12 | So now I am going to do that
for each one of these guys.
| | 02:16 | Copy, paste, paste, paste and the closing links.
| | 02:24 | So now I have got links around each one
of the images, so what I need to do now
| | 02:28 | is build the rotator.
| | 02:30 | And to do that, before I actually
build the code for the rotator, what I am
| | 02:34 | going to do is define
some CSS that will help me.
| | 02:38 | Now the CSS that I am going to
write is going to do a couple of things.
| | 02:42 | It's going to position the images so
that they are all underneath each other,
| | 02:46 | and I am gong to define some z-index
information so that the images appear to
| | 02:51 | bubble up from underneath each other.
| | 02:54 | Let's go to the sidebar section, and I
believe the sidebar is down here somewhere.
| | 02:59 | So here we are in the sidebar section,
so what I am going to do is define a
| | 03:03 | couple of style sheets, go a little down here.
| | 03:06 | So down here, the first thing I am going to
do is define a style for my photoShow div.
| | 03:11 | So my photoShow is going to have a
style sheet that does a couple of things.
| | 03:17 | First, I am going to set
the position to be relative.
| | 03:22 | Then I am going to define a height and
a width that encapsulates the images.
| | 03:27 | So the height is going to be 190 pixels
because that's how big the images are,
| | 03:32 | and the width will be 240 pixels
because that's how wide the images are.
| | 03:38 | And then I am going to set the margin
left to be auto, this way it correctly
| | 03:44 | positions itself inside that sidebar div.
| | 03:48 | Now that I have defined a style sheet
for the containing div, I am going to
| | 03:53 | define another style sheet, this
time it's going to be for the div that's
| | 03:56 | inside the photoShow.
| | 03:59 | Remember, this encapsulates all the
images, and each image now is going to be
| | 04:04 | encapsulated in a div as well.
| | 04:06 | I am going to write that the position
is absolute, and I am going to set the
| | 04:14 | z-index of each image to be 0.
| | 04:17 | Let's go back to the code.
| | 04:20 | So here's the div for the photoShow and
what I am going to do is I am going to
| | 04:24 | wrap each link and image
pair inside a separate div.
| | 04:29 | Because these divs are going to be what
we are hiding and showing to the user.
| | 04:33 | So I am going to do it for that one,
and I am going to do it for that one, and
| | 04:38 | for that one, and for that one.
| | 04:40 | And I will close each one off correctly.
| | 04:43 | There is that one, there is
that one, and there is that one.
| | 04:48 | Now let's go back to the CSS.
| | 04:50 | So now I have defined style sheets for
both the containing divs and for the divs
| | 04:54 | that wrap each one of the images.
| | 04:56 | So I am going to write a couple more
style sheets now that help me position
| | 04:59 | the images properly, so when they are
animated they show up correctly in the stack order.
| | 05:04 | Right now it's photoShow, and this is
going to be for the div that I am going to
| | 05:10 | give a class of previous.
| | 05:15 | And for the previous one, I am just
going to give that a z-index, index of 1.
| | 05:22 | And for the same thing I am going to
call this the current image and that's
| | 05:28 | going to have a z-index of 2.
| | 05:29 | So what this is going to do is cause
whichever image has the current style sheet
| | 05:33 | to appear on top of all the others,
and the one that has previous is going to
| | 05:36 | appear directly underneath it.
| | 05:38 | So all I need to do now is make sure
that the first image starts off with the
| | 05:42 | correct style sheet applied.
| | 05:45 | So let's go back to the code and we'll
give this guy here, the class of current.
| | 05:52 | He is going to start out on top and
all the other images will start out
| | 05:57 | underneath that one.
| | 05:59 | Now it's time to simply go write the
animation code, but before we do that let's
| | 06:03 | go out to the browser.
| | 06:06 | And let's refresh, and you can see that
so far there is no visible changes but
| | 06:10 | there are four images there.
| | 06:12 | And they are all stacked
up underneath each other.
| | 06:14 | So now let's write the rotation code.
| | 06:15 | Okay, back to the code.
| | 06:20 | So once again, we want this to happen
on the document.ready, so I am just going
| | 06:25 | to put that function in here as well.
| | 06:26 | So let's write the code now that's going
to cause each one of the images to rotate.
| | 06:30 | What I am going to do is call the
JavaScript setInterval() function and I am
| | 06:36 | going to write a little routine called
rotateImages, so this will be called.
| | 06:42 | And let's call it every two seconds.
| | 06:45 | So the value of 2000 is 2000
milliseconds which is 2 seconds.
| | 06:49 | Now we need to write the function for
rotateImages, and what we are going to do
| | 06:57 | first is get the current photo.
| | 07:01 | The current photo is going to be
the result of a jQuery operation.
| | 07:05 | That's going to get me
the photoShow's current div.
| | 07:12 | Okay, so that's going to get me
whichever div has the current class.
| | 07:17 | Then we are going to get the next photo,
this is the photo that we are going to fade too.
| | 07:24 | And that's going to be whatever the
current photo's next, remember using our
| | 07:31 | traversal knowledge from earlier in the course.
| | 07:33 | This is going to get the
next div that's in line.
| | 07:36 | If we are at the last div, that's not going
to be existent, so we need to catch that case.
| | 07:40 | So if it turns out that the next
photo's length and remember this tells us how
| | 07:45 | many items were in that jQuery array.
| | 07:48 | The length of that is 0, then
we have reached the last div.
| | 07:52 | So what we need to do then is say well,
okay in that case, the next photo is
| | 07:55 | equal to just the first photo.
| | 07:58 | So we are drawing again on our jQuery
knowledge, we are just going to go ahead
| | 08:01 | and retrieve the photoShow's first
child using the first filter right here.
| | 08:10 | And this will get us the first
div that's inside the photoShow.
| | 08:12 | So now that we have got the right
photos that we are going from and to, let's
| | 08:17 | use a little statement
chaining to do some animation.
| | 08:21 | So we are going to tell the current
photo, we are going to remove the current
| | 08:26 | class from our CSS section and we are going
to add a class, we are going to add previous.
| | 08:36 | So this will cause whichever photo was
current to drop down one level in the z-index order.
| | 08:41 | Then we are going to tell the photo
that's next that we are going to set its CSS
| | 08:46 | property, we are going to set its opacity to 0.
| | 08:53 | Then we are going to add a class, and we
are going to make this one the current photo.
| | 09:02 | And we are going to animate the
opacity using our basic animation function.
| | 09:07 | We are going to animate the opacity up
to 1.0 over a duration of 1 second, and
| | 09:17 | we want to declare a callback() function.
| | 09:20 | Remember the callback()
function feature of this.
| | 09:26 | The callback() function will tell the
current photo to remove its previous class.
| | 09:35 | So that way the next photo
after that will pop-up in the order.
| | 09:39 | So after we have done that, we are
ready to save, and now we should have our
| | 09:47 | image rotator working.
| | 09:49 | Let's go ahead and switch back
out to the browser, let's refresh.
| | 09:56 | So now you can see that every two
seconds what's happening is each div is now
| | 10:01 | animating its opacity and fading up
in front of the image in front of it.
| | 10:05 | So each image here, whichever one is
current, drops down below the one that's next.
| | 10:10 | The one that's next is set to opacity
of 0, so it's practically invisible.
| | 10:14 | And then it fades up in front
of the image in front of it.
| | 10:18 | That is the image rotator in jQuery.
| | Collapse this transcript |
| Building hover tooltips| 00:00 | So, now let's go implement that
tooltips feature that we saw, when we rolled
| | 00:04 | over the surfboard and we show the user
a large thumbnail of the board that they
| | 00:10 | are looking at, rather than
making them go to a separate webpage.
| | 00:13 | I am going to go ahead and open up my
file here in my Editor and let's go to the site.
| | 00:23 | Remember that was in the gear section,
and I am going up the boards file here.
| | 00:28 | So, a couple of things I want to point out.
| | 00:31 | Here is the webpage, and what I am
going to do is scroll down to the bottom.
| | 00:38 | So you can see down here at the bottom,
there's a div here whose class has been
| | 00:43 | set to tooltipContent, and the
tooltipContent is, if we go look at our CSS.
| | 00:52 | So, let's first find that.
| | 00:57 | That tooltipContent div is positioned
absolutely and set to have a display of
| | 01:02 | none and then opacity of zero.
| | 01:05 | So this is the large graphic that the
user is going to see when we mouse over
| | 01:11 | the view larger item.
| | 01:14 | So if we scroll up here we will see that
the view larger, that little Plus sign,
| | 01:20 | is right here and you can see that
has a link to the larger image page that
| | 01:25 | opens in a new window, and it's got
this id right here named viewlarger.
| | 01:30 | So, what we are going to do is we want
to write some script code that allows
| | 01:36 | the user to mouse over and show the
larger thumbnail, but we want to write it
| | 01:40 | in a way that doesn't take away the default
functionality when JavaScript is turned off.
| | 01:46 | So, we are not going to make any
changes here in the markup; all we are going
| | 01:49 | to do is write some jQuery code
right up at the top of the document.
| | 01:53 | What I am going to do is start
off by including the jQuery Library.
| | 01:58 | So I am going to come over here and
copy that link that I have in my Index page
| | 02:03 | and just paste it into my boards.
| | 02:06 | And remember that the gear folder is one
more level down, so I am going to put a
| | 02:10 | little extra slash in there.
| | 02:12 | So once I have done that, I am going to
write a script, and the type is going
| | 02:20 | to be text/javascript.
| | 02:23 | What we want to have happen is when
the user hovers the mouse over the view
| | 02:27 | larger item, the thumbnail image will
appear and then it will fade out when
| | 02:31 | they move their mouse back out again.
| | 02:33 | Recall from earlier we have a helper
function that does just that for us and
| | 02:37 | it's called the hover function.
| | 02:39 | We want all this to get
setup on the document load.
| | 02:42 | I am going to write a little document
ready function. And remember throughout
| | 02:46 | the course I have been doing something
like this, where I say document.ready.
| | 02:51 | There's a shortcut version that
jQuery gives you where you simply pass the
| | 02:55 | document.ready function
directly to the jQuery object.
| | 02:58 | So I am just going to go ahead
and do that here as a shortcut.
| | 03:04 | What we want to have happen is we are
going to use jQuery to get a reference to
| | 03:09 | that view larger item and remember that
it has an id on it of viewlarger and on
| | 03:18 | the viewlarger item we are
going to define a hover function.
| | 03:23 | Remember that the hover
function takes two function arguments.
| | 03:27 | The first of which is the function
that you wanted to have called when the
| | 03:31 | mouse enters the element.
| | 03:33 | The second is the function that you
want to have called when the mouse leaves.
| | 03:39 | In the function for when the hover
begins, we are going to use jQuery and
| | 03:45 | we are going to define an offset variable, which
gets the offset of the gear item in the page.
| | 03:54 | Let's scroll down real quick.
| | 03:56 | So, the gearItem is right here.
| | 04:00 | It's this div, and this div is what
contains the little thumbnail, the smaller image.
| | 04:05 | So there's the image and it has the
little viewlarger and the other links in it.
| | 04:09 | So we are going to get the id of
this guy right here, because that's
| | 04:12 | whose position we want.
| | 04:15 | So we are going to use jQuery to
do that and we are going to get the
| | 04:21 | gearItem and we are going to use our
CSS function offset and recall from
| | 04:28 | our CSS chapter, this gets us the
offset information for that item and this
| | 04:33 | works on cross-browsers.
| | 04:35 | Now that we have the offset
information for the gearItem, we are going to use
| | 04:40 | jQuery to move the overlay
on top of the small image.
| | 04:45 | So to do that, recall that the tooltip
is contained within a div named tooltip1.
| | 04:54 | We are going to set some
CSS properties on that.
| | 04:57 | We are going to set the top property
to the offset.top that just came back.
| | 05:05 | Then we are going to use a little
statement chaining to do the same thing
| | 05:09 | with the left property.
| | 05:12 | I am going to do offset.left, and then
finally we are going to make it visible,
| | 05:18 | and we will do that with some CSS.
| | 05:21 | And we will do display and we will call block.
| | 05:27 | Now, again, there's a lot
of ways to skin this cat.
| | 05:30 | I am doing separate CSS calls.
| | 05:32 | There is probably more efficient
ways to do this, but for the sake of
| | 05:35 | illustration, this way it makes it
pretty clear to see what's going on.
| | 05:38 | Then after we have positioned it, made
it visible, we are going to animate it up.
| | 05:45 | So once again, we get tooltip1 and we
are going to animate the opacity value up
| | 05:56 | to 1.0, over the course of 300 milliseconds.
| | 06:03 | So it's going to happen very quickly.
| | 06:04 | So that will make it visible, and in fact,
let's just quickly test that in the browser.
| | 06:11 | So, we will bring up the site, go
to the gear, go to the boards, mouse
| | 06:16 | over, okay there it is.
| | 06:17 | It's not going away however.
| | 06:20 | So we are going to fix that.
| | 06:22 | So that's this function here.
| | 06:23 | So to make it go away when the mouse
moves out, we will just write another
| | 06:26 | jQuery statement that tells tooltip1
to animate its opacity setting down to zero,
| | 06:40 | over the course of 300 milliseconds
and we are going to define a callback
| | 06:45 | function and the callback function is
going to set tooltip1, and we are going to
| | 06:59 | set its display back to being invisible.
| | 07:05 | So, that's all there is to that.
| | 07:07 | We are now at a point where we can go
back to the browser and test this out.
| | 07:11 | So let's switch back to the browser.
| | 07:13 | Let's refresh and now when we move it up,
you can see it's fading in. It's fading out.
| | 07:19 | Everything is all nice.
| | 07:21 | So that's creating a tooltip.
| | 07:23 | Let's move on now to the next feature.
| | Collapse this transcript |
| Making an image selector| 00:00 | For the next lesson we're going to
use jQuery to build an Image selector.
| | 00:06 | You've probably seen these before.
| | 00:08 | You've probably even built one before.
| | 00:10 | Let me just open up the Groundswell_Final site
| | 00:13 | so you can see what I'm talking about.
| | 00:15 | So, let's go to the Lifestyle
section and click on Photos.
| | 00:20 | You can see that as I click on the
different photos the image in the large image
| | 00:26 | area changes whenever I
click on one of the thumbnails.
| | 00:30 | You can also see that this text down here
in the caption area, that's changing as well.
| | 00:34 | Now, you've probably built one of
these before and they are relatively
| | 00:37 | straightforward to build.
| | 00:38 | But we're going to use jQuery to build
one that is inherently extensible and
| | 00:43 | can be accomplished in just
a couple of lines of code.
| | 00:47 | So, let's go build that now.
| | 00:49 | Let me go back out to the file system here.
| | 00:54 | So, let's go to the Start site.
| | 00:57 | I'm going to open up the site in my editor.
| | 01:04 | So, this is the home page. What we need
to open up actually is the images page.
| | 01:09 | So, I'm going to go to the Lifestyle,
and open the photos page. Okay!
| | 01:13 | So, this is photos page.
| | 01:14 | So, just put a design view really quick.
| | 01:16 | So, here are the photos.
| | 01:18 | This is the large photo right here.
| | 01:20 | You can see it has an id of photo_large on it.
| | 01:23 | Then is this guy here, this is the caption area.
| | 01:26 | And over here are the individual
thumbnails for each one of the images.
| | 01:31 | So, let's go to the code view.
| | 01:36 | You can see that each one of the
images has an id, and an alt attribute set,
| | 01:42 | and a class and so on.
| | 01:43 | So, what we're going to do is encase
each one of these images in a link, so that
| | 01:50 | when they are clicked on, the event
will be handled by our jQuery code.
| | 01:56 | So, what we're going to do is put an
anchor or a link tag in front of each one
| | 02:00 | of these guys, a href=, and then we'll
supply a pointer to the image and then
| | 02:10 | we'll close the link on each one of these guys.
| | 02:14 | So, the images are located a directory up.
| | 02:18 | So, I'm going to do that and then, _images.
| | 02:22 | The way the images are named, you can
see that in this case it is pointing
| | 02:27 | to ventura_01_thumb.
| | 02:29 | The large version doesn't
have this _thumb on the end.
| | 02:33 | So, we're just going to copy that and scroll
back and paste that in there and it's .JPG.
| | 02:44 | So, now we're going to do
that with each one of these guys.
| | 02:50 | So, I'm going to Copy and I'm
going Paste, and Paste, and Paste.
| | 02:54 | And we'll update each one of these indexes.
| | 02:58 | Now, we have links that
are pointing to the images.
| | 03:03 | There's a couple of other
things that we need to do.
| | 03:04 | What we're going to do also is
place a Title attribute on the link.
| | 03:10 | The title is what we'll use for the caption.
| | 03:14 | So, for this title it is
"Getting ready to hit Surf."
| | 03:23 | And this title is "Clearly marked!"
| | 03:30 | And this title is "Checkout the
windsurfers in the background," and
| | 03:43 | then the last title is "Winding down."
| | 03:50 | Now, we've got the links
wrapped around each tag.
| | 03:54 | And we've got titles on each.
| | 03:56 | They'll become our captions.
| | 03:57 | The idea here is if we wanted to add
more thumbnails, we would just be following
| | 04:00 | this convention and the jQuery code
would just pick this up automatically.
| | 04:05 | So, what we need to do now is write the
jQuery that will actually handle these events.
| | 04:12 | So, up here at the top.
| | 04:13 | We are into the usual suspects.
| | 04:16 | We're going to include a
link to our jQuery library.
| | 04:20 | We're going to say Script and
the type is equal to JavaScript.
| | 04:32 | The source, I'm going to
point that to jQuery library.
| | 04:35 | And our jQuery library is located one
directory up in scripts, and that is
| | 04:43 | jQuery-1.3.2.min.js.
| | 04:52 | Now, we've got the script included.
| | 04:54 | What we need to do now is write our script
that is going to handle the image clicking.
| | 05:01 | Let's do that.
| | 05:06 | So, here is what we want to do.
| | 05:07 | When the document loads, we're going to
setup the event handling code to handle
| | 05:11 | clicks on each of the images, and
then set the large image to be the large
| | 05:16 | version of the thumbnail that was clicked on.
| | 05:18 | I'm going to write a jQuery
function that executes when the page loads.
| | 05:26 | And what we want to do is loop over all
of the link tags that we just added and
| | 05:32 | setup click handlers on each one of them.
| | 05:36 | We only want to do this, however, for
links that are enclosing images that have
| | 05:41 | the Gallery class applied to them
because the gallery.css style sheet indicates
| | 05:45 | that it's a thumbnail in the image.
| | 05:46 | Just go down, and you'll
see what I'm talking about.
| | 05:48 | So, here on this image, you can see
each one of these guys has a Gallery class.
| | 05:52 | So, we only what to do this for links
that have the Gallery class applied.
| | 05:55 | So, what we're going to do is write a
little jQuery to figure that out for us.
| | 05:59 | So, we're going to look for links and
we're going to use the jQuery has selector.
| | 06:05 | Remember this is one of the
content selectors I talked about.
| | 06:08 | So, we're going to look for links that
have image with Gallery class applied to them.
| | 06:16 | And assuming we find any, we're then
going to assign click handlers to each one.
| | 06:20 | The click handler is going to be a function.
| | 06:27 | Inside the click handler, what we're
going to do is declare a couple of variables.
| | 06:32 | So, first we're going to
declare a variable called largePath.
| | 06:35 | We're going to point that at this.
| | 06:39 | So, remember, when this function gets called
it's getting called because of a click on a link.
| | 06:44 | So, that this keyword will point to
the link object that this applies to.
| | 06:48 | So, we're going to get the
attribute for the href from the link.
| | 06:57 | Then we're going to get
the caption from the title.
| | 07:06 | So, now we have the caption
and path from an href and title.
| | 07:11 | So, now what we need to do is go find
that large photo and that guy should be
| | 07:15 | right around here somewhere.
| | 07:17 | So, down here in the
mainContent. Here is the image.
| | 07:23 | That's the photo_large.
| | 07:25 | So, we need to set that guy.
| | 07:34 | So, we get a reference to the large photo.
| | 07:36 | We're going to set its attributes.
| | 07:38 | So, we're going to set the source
attribute to be the largePath that we just defined.
| | 07:48 | And then, we're going to set the
contents of the caption element. Where is that?
| | 07:57 | Caption element should be
down here somewhere. Yup!
| | 07:58 | There's caption1 right there.
| | 08:00 | In fact, we can get rid of these
other guys from the base site, because we
| | 08:03 | don't need them anymore.
| | 08:05 | We're going to set the content of caption1.
| | 08:08 | We're going to set its text content
to be the caption that we just applied.
| | 08:17 | Now, the last thing that we need to do is
we don't want these links to be followed.
| | 08:20 | We don't want the browser to
actually try to follow the link.
| | 08:23 | So, we need to return
False from this event handler.
| | 08:29 | That will tell the browser, don't
worry about it, we've handled it.
| | 08:32 | You don't need to go ahead and follow the link.
| | 08:34 | And we've written the code.
| | 08:35 | Let's make sure everything looks right. Okay!
| | 08:37 | Let's go back out to the browser.
| | 08:41 | So, now we're going to open up
the version in the Start folder.
| | 08:48 | So, yup, this is the start version.
| | 08:49 | Let's go to the Index page, go to the Photos.
| | 08:53 | So, you can see now that as I'm
clicking both the caption and the large
| | 08:58 | image are changing. All right!
| | 09:02 | This is extensible.
| | 09:03 | So, now if I go back to the code.
| | 09:06 | Let's imagine that we added a whole bunch of
new images and we'll just do a Copy and Paste.
| | 09:10 | So, now if we go back to
the browser and we refresh,
| | 09:15 | you can see that a whole bunch of new
images have been added, but it's still
| | 09:19 | responding to the same event handler.
| | 09:22 | We'll didn't have to update
the event handler code, at all.
| | 09:24 | That's using jQuery to build an image selector.
| | 09:27 | Let's move on to the next example.
| | Collapse this transcript |
| Using the Resizable effect| 00:00 | This feature that we are going to add
to our Groundswell site is the ability to
| | 00:05 | resize the form element for entering
comments on our registration form and this
| | 00:12 | is going to illustrate using one of
the jQuery UI interactions, which is the
| | 00:16 | Resizable interaction.
| | 00:18 | So what I am going to do is click on the
Register link here and you can see that
| | 00:23 | there is a Comments field
here and it's pretty sizeable.
| | 00:26 | The user can type their comments.
| | 00:27 | But what if we want to make this
resizable so the user has more area to type in?
| | 00:33 | So what we are going to do is go over
to the code and implement the jQuery UI
| | 00:38 | Resizable interaction to let the
user resize that comments area.
| | 00:43 | So let's go to the code.
| | 00:47 | So here we are in the folder for the
example, and inside the lifestyle,
| | 00:52 | there is a register file.
| | 00:54 | I am going to open that up in my editor.
| | 00:56 | Let's find that in the design.
| | 00:58 | So that's down here in the code.
| | 01:02 | So this is the text area right here,
and this text area, we are going to make
| | 01:07 | resizable and you can see it's wrapped
inside of a div named comments section,
| | 01:13 | and the text area itself has an id of comments.
| | 01:16 | So a couple of things we are going to do.
| | 01:18 | First, we need to include the necessary
jQuery library and the jQuery UI library
| | 01:26 | at the top of the file.
| | 01:27 | So we are going to go back at the
top and we are going to do that.
| | 01:30 | And we also include the CSS file.
| | 01:33 | So I am just going to copy and
paste this and the file is in the sunny
| | 01:41 | sub-folder because that's
the thing we downloaded.
| | 01:43 | And it's called jquery-ui-1.7.2.custom.
| | 01:55 | Okay, so now we have included the style
sheet. Now we need to include the script file
| | 02:00 | for both jQuery and jQuery UI.
| | 02:03 | So we are going to do that.
| | 02:05 | We are going to type script and the
type is equal to JavaScript and the source
| | 02:14 | is the scripts folder and it's jquery-1.
3.2.min.js and that's that script right
| | 02:26 | there and then we are going to
include the jQuery UI and that's
| | 02:32 | jquery-ui-1.7.2.custom.min.js.
| | 02:40 | All right, so now that we have included
the script, we can assign the resizable
| | 02:45 | behavior to our text area.
| | 02:49 | So let's go ahead and do that and
remember that's just a simple matter in
| | 02:54 | jQuery of when the page loads, and I
am going to declare my little page load
| | 02:59 | function right here.
| | 03:02 | So when the page loads, we are going
to use jQuery to get a reference to the
| | 03:10 | Comments section div and we
are going to make that resizable.
| | 03:17 | So that's pretty much all we
need to do to make it resizable.
| | 03:20 | Let's see how that works out.
| | 03:23 | So jump over to the browser.
| | 03:25 | I am going to refresh.
| | 03:28 | So you can see now that a little resize
handle has been added here at the bottom
| | 03:33 | of the Comments field, so we can resize.
| | 03:37 | But you can see that
there is a bit of a problem.
| | 03:39 | We don't want the user to be able to
resize this thing across the entire page.
| | 03:43 | It will be nice if we can just
constrain it somehow so that they can't make it
| | 03:47 | too small or too big.
| | 03:49 | So let's set about solving that problem.
| | 03:52 | So let's go back to the code.
| | 03:55 | So what we need to do is specify that there
is a maximum and minimum width for the field.
| | 04:04 | So here in my function, I am going
to declare a couple of variables.
| | 04:08 | First, I am going to declare a maxWidth
variable and what I am going to do is
| | 04:14 | I am going to set that to be whatever
the current width of the field is.
| | 04:18 | That way it can't get any
bigger than it currently is.
| | 04:20 | So I am going to use jQuery to retrieve
a reference to the Comments section div,
| | 04:27 | and I am just going to ask for its width.
| | 04:32 | Remember from our CSS section that we can
get the width of any element by doing this.
| | 04:37 | Now in the resizable call, pass in
some parameters to resizable, because
| | 04:42 | remember it takes some parameters like
what we want the min width and max width
| | 04:45 | to be, and so on and so forth.
| | 04:47 | So we are going to pass in an object
and I am going to say that the maxWidth
| | 04:52 | can't be any more than the maxw.
| | 04:55 | That's should fix the max problem.
| | 04:57 | Let's go back to the browser and see.
| | 04:58 | So I am going to refresh and yeah, sure enough,
it can't get any wider than it used to be.
| | 05:07 | That's its maximum, so that's good.
| | 05:07 | I still have to fix the minimum problems though.
| | 05:10 | So let's go back to the code.
| | 05:13 | So we are going to do the same thing
for the minimum width and minimum height.
| | 05:16 | I am going to declare another variable
named min width and I am going to set
| | 05:22 | that to be equal to max width.
| | 05:23 | So that way, the text area will
only stay as wide as it currently is.
| | 05:30 | It won't get any more narrow
and it won't get anymore wide.
| | 05:33 | And finally, I am going to declare
another variable and this one is going to
| | 05:35 | be called min height.
| | 05:38 | I am going to do the same kind of
trick that I did with the width.
| | 05:40 | I am going to copy that, I am going to
paste this and now I am going to ask for
| | 05:44 | whatever the current height is.
| | 05:45 | Okay, so now, I know how
wide it is and how high it is.
| | 05:48 | I did just set the right
parameters. There is maxWidth.
| | 05:53 | I am going to do min height and that's
minh and I am going to do min width and
| | 06:04 | that will be minWidth.
| | 06:07 | Now I have set all the right parameters,
all I need to do now is save, and
| | 06:11 | we will go back to the browser,
and now we will refresh.
| | 06:15 | So now you can see that I can
only resize the element up and down.
| | 06:20 | I can't make it any wider, I can't make
it anymore narrow, and I can only resize
| | 06:24 | it down to the point where it was
as high as it was to begin with.
| | 06:29 | So I have pretty much used jQuery UI
now to provide a feature to my users.
| | 06:33 | They can now type in the field and now
they can enter text and if they don't
| | 06:38 | think it's big enough, well, they
can just go ahead and resize that down.
| | 06:41 | I will just scroll the page down.
| | 06:44 | So they can make it as nice
and large as they want to.
| | 06:46 | And just to make sure it works
cross browser, let's try it on Firefox.
| | 06:54 | So I am going to open this up in the
Firefox browser and I'll scroll down and
| | 07:01 | you can see, yup, there is the resize handle,
and sure enough, yup, working just the same way.
| | 07:07 | So that's pretty much all the features that
we are going to use from the jQuery UI library.
| | 07:11 | However I highly encourage you to experiment.
| | 07:14 | You can take the source code for the
Groundswell site as you have it in your
| | 07:18 | example files folder, if you
have access to the example files.
| | 07:21 | Feel free to play around with the
jQuery UI settings and see what you can make happen.
| | Collapse this transcript |
|
|
8. Accessing Data with AJAXWorking with Asynchronous JavaScript and XML (AJAX)| 00:00 | It's time to talk about AJAX.
| | 00:02 | AJAX is used all over the web these days.
| | 00:05 | Using AJAX, your web pages can retrieve
data from remote services and communicate
| | 00:10 | with your web server without
having to reload the entire page.
| | 00:15 | Over the past several years AJAX has
become one of the foundations of building
| | 00:20 | modern web applications.
| | 00:22 | jQuery makes working with
AJAX really, really easy.
| | 00:26 | If you're not familiar with AJAX,
I highly suggest that you go take a look at
| | 00:31 | Ray Villalobos's JavaScript and AJAX
title, which is right here on lynda.com.
| | 00:36 | I have got it up right here in
the browser so you can see it.
| | 00:40 | I am not going to go deeply into AJAX
and what it is and how it works, because
| | 00:44 | Ray has already done that, and I highly
suggest you watch this title if you need
| | 00:49 | to get familiar with AJAX.
| | 00:50 | The other thing I want to point out is
that I'm going to be using a different
| | 00:52 | tool in this chapter.
| | 00:54 | I am going to be using a tool called
Aptana Studio, and that's this tool right here.
| | 00:59 | And the reason I'm going to be using
Aptana Studio is because it has a built-in
| | 01:03 | local web server that I can use for testing.
| | 01:07 | So I don't have to upload my pages
to my web server in order to test out
| | 01:11 | the AJAX functionality;
| | 01:13 | I can just do it right here on my local
machine using the local web server that
| | 01:17 | Aptana Studio has built-in.
| | 01:19 | You don't have to use this if you want to.
| | 01:22 | You can follow along with me, and
you can post your files up to your web
| | 01:26 | server, or use a local web server that you may
already have configured on your local computer.
| | 01:31 | That's up to you.
| | 01:32 | I'm going to be using Aptana because
I happen to like the tool, and it has a
| | 01:35 | built-in local web server.
| | 01:37 | And if you want to use it, I also
recorded a title here on lynda.com, Up and
| | 01:41 | Running with Aptana Studio 3.
| | 01:43 | If you want to learn how to use Aptana
Studio, it's a completely free product.
| | 01:48 | It's a really great editor.
| | 01:49 | I've covered how to use it in this title here.
| | 01:52 | It's only about an hour and half long.
| | 01:54 | Let's go back to Aptana Studio.
| | 01:56 | So here in Aptana Studio I have imported
my exercise files as a project here, and
| | 02:02 | I'm going to open up the basic_start file.
| | 02:07 | And what we are going to show
is how to use the AJAX function.
| | 02:12 | Now, jQuery provides a whole bunch of
AJAX-related functions. In fact let's go
| | 02:17 | back out to the browser, and let's head
over to api.jquery.com, and we will scroll
| | 02:27 | down to the AJAX section.
| | 02:29 | So AJAX has a low-level interface that
we are going to be looking at called the
| | 02:36 | AJAX function. That's this right here.
| | 02:37 | And the AJAX function performs an
asynchronous HTTP request to the server.
| | 02:44 | And there is a whole bunch of settings and
properties that you can pass to the function.
| | 02:50 | I am going to scroll down to some of these.
| | 02:52 | Again, I'm not to go over all of these
because some of these are pretty advanced,
| | 02:55 | and some of them you'll probably never
touch in your development. But you can
| | 02:59 | see that there's quite a few of them.
| | 03:01 | But the way that it works is you simply
use the $.ajax function to simply make
| | 03:06 | a request to a server and get a response back,
and that's what we are going to do in our example.
| | 03:12 | So let's jump back to the code.
| | 03:14 | Now, there's a couple things I
have that you should be aware of.
| | 03:17 | I have got two different
helper sample data files here.
| | 03:21 | This one is testdata.txt.
| | 03:25 | This one is testxmldata.xml. And we'll
be using both of these in this chapter
| | 03:31 | as the files that we'll be retrieving from
our server, in this case a local test server.
| | 03:37 | Okay, so let's close that for now.
Let's go back to basic_start.
| | 03:42 | Here we are in the page, and you can
see that in my document's ready function I
| | 03:47 | have a function here called getData.
getData is the function that we are going
| | 03:52 | to fill out that's going to
retrieve data from the server.
| | 03:56 | Here in the getData function what I
am going to do is type $.ajax, and then
| | 04:04 | inside this function I'm going to pass
a whole bunch of properties, so let's
| | 04:10 | go ahead and do that.
| | 04:10 | The first thing I'm going to pass in
is a property called the URL.
| | 04:14 | This is the URL of the data that
I want to get information from.
| | 04:21 | In this case, I am just going to use the
testdata.txt file, and you can see it's
| | 04:27 | at the same level in the folder as this
HTML page is, so I don't have to write
| | 04:33 | any path. I am just going to say testdata.txt.
| | 04:37 | So that's the first one.
| | 04:39 | The next property I am going to put
in is what kind of request this is, and
| | 04:44 | that's the type property.
| | 04:46 | It can either be get or it can be post,
depending on what kind of HTTP request
| | 04:52 | you're going to use.
| | 04:53 | Get requests are usually used for
operations that are not destructive; in other
| | 04:58 | words they don't change data on the server.
| | 05:01 | If I was going to be changing data on the
server, instead of using get I would use post.
| | 05:07 | But that's not what I'm doing.
| | 05:08 | I am simply retrieving data, so I am going
to use get and leave that the way that it is.
| | 05:13 | Then I'm going to specify what kind of data
I expect to get back, and that is dataType.
| | 05:19 | Now, dataType could be a bunch of
different things. It can be text.
| | 05:22 | It can be a ray buffer.
| | 05:24 | It can be a whole bunch of
things to represent binary data.
| | 05:27 | I am just going to say text because I'm
expecting to get text data back, and you
| | 05:31 | can see here that that's exactly what this is.
| | 05:33 | It's just textual data.
| | 05:35 | Now I've specified the major
pieces that I need to specify.
| | 05:38 | The only thing to do now is tell
jQuery what to do when things go right and
| | 05:44 | when things go wrong.
| | 05:45 | I am going to say on success you
should call the successFn, which is this
| | 05:56 | function right here.
| | 05:57 | And then if something goes wrong, error,
you should call the errorFn, which is
| | 06:07 | this function right here.
| | 06:10 | The next thing I am going to do is say, you
know what, no matter what happens, whether
| | 06:14 | things went right or whether things
went wrong, there is another function you
| | 06:18 | should call, and that's called complete,
and on complete I am going to supply a
| | 06:25 | function just directly in line here, and
it's going to take the XML HTTP request
| | 06:29 | object along with a status indicator.
| | 06:31 | And this function is just
going to say console.log.
| | 06:39 | The request is complete,
and we will close that off.
| | 06:45 | All right, we are requesting the text data.
| | 06:48 | We are using a get request.
| | 06:50 | We are expecting to get text back, and
we've got functions for when things go
| | 06:53 | right, functions for when things go wrong, and
a function that just gets called regardless.
| | 06:59 | All right, now in the success
function we need to say what to do with the
| | 07:04 | data that comes back.
| | 07:05 | So when this function gets called,
result is going to be the data that came
| | 07:10 | back from the server.
| | 07:11 | What I am going to in that case is, if
you look down here in my document, I have
| | 07:16 | got a paragraph with an ID of content.
| | 07:18 | So what I am going to do is use
jQuery to get a reference to that content
| | 07:22 | paragraph, and I am going to use the
append function to append the result data
| | 07:29 | into that paragraph, so
now I am going to save it.
| | 07:33 | What I am going to do now is I'm going
to run this in my local web server, and in
| | 07:39 | Aptana Studio I can do that up here my
Run menu. I can run it using a variety of
| | 07:44 | different browsers that I
have using the local server.
| | 07:49 | If this looks different for you, that's okay.
| | 07:51 | You can always look at the run
configurations here, and down here in the
| | 07:56 | web browser section you can add
your own local server with whatever
| | 08:01 | browser you happen to be using.
| | 08:03 | The instructions are right
here, so let me close this.
| | 08:07 | What I am going to do is run this
using Chrome as my local server.
| | 08:11 | So let's go ahead and do that, and you
can see that here in the document, this is
| | 08:16 | the paragraph with this gray outline around it.
| | 08:18 | You can see that this is some text data.
| | 08:21 | This is the contents of that
test data file that was on the server. Ao the
| | 08:25 | AJAX function went out and requested the data,
got it, came back, and put it in this paragraph.
| | 08:30 | Just to show you that that's
what's happening, let's bring up the
| | 08:34 | Developer Tools in Chrome.
| | 08:36 | Here is my Developer Tools.
| | 08:39 | And what I'm going to is I am just
going to crank up the font size a little bit
| | 08:41 | so you can see what's going on in
here, and I'll just make this a little bit
| | 08:46 | wider, alright, okay.
| | 08:49 | And over here in the sources what I am
going to do is put a breakpoint right here.
| | 08:58 | So I will put a breakpoint right there.
| | 09:01 | Let's refresh it and see what happens.
| | 09:04 | Okay, so we are going to refresh, and
you can see that the breakpoint has now
| | 09:10 | been hit where the AJAX
function is about to get called.
| | 09:14 | Okay, so there is the AJAX object.
| | 09:16 | It's going to be looking for the testdata.txt, okay.
| | 09:20 | So now we have breakpoint down here in
the success function, and we'll see what
| | 09:24 | result is when the function
gets called and comes back.
| | 09:28 | All right, so I am going to go ahead
and click Run, and you can see that now we
| | 09:31 | have hit the breakpoint here in the
success function, and if I scroll over and
| | 09:36 | hover over this result, you can see
that that's the same content of that
| | 09:40 | test data file that we have on the server.
| | 09:43 | So the server came back, and we have a
result of okay, and we're just going to go
| | 09:47 | ahead and append that result into
the paragraph, so let's step right.
| | 09:52 | And I am going to step over this function.
| | 09:54 | Now, watch up here in the paragraph,
when we step over and you can see that that
| | 09:58 | data got inserted in.
| | 09:59 | That's essentially how you use the
base AJAX function in jQuery to retrieve
| | 10:06 | data from a server.
| | Collapse this transcript |
| Using AJAX helpers| 00:00 | In addition to the basic AJAX function,
jQuery provides a set of shorthand helper
| | 00:06 | methods that help cover some common
scenarios that arise when using AJAX with
| | 00:11 | jQuery, and we're going to take
a look at a couple of those now.
| | 00:14 | So here in the jQuery API documentation,
I'm going to click in the AJAX section
| | 00:19 | on the Shorthand Methods.
| | 00:21 | You can see there is a small set of these.
| | 00:23 | The get function loads data from the
server using an HTTP get request, and that's
| | 00:29 | sort of like using the AJAX function
with the type property of get, only this is
| | 00:34 | a shorter more convenient way of doing that.
| | 00:37 | The get function has a couple
of specialized counterparts.
| | 00:39 | There is getJSON for getting JSON data
from the server, and then there is the
| | 00:44 | getScript version, which loads a
JavaScript file and then executes it.
| | 00:47 | There is the post function, which is
again, kind of like using the basic AJAX
| | 00:51 | function, with a post option, but this
is a more shorthand way of doing it.
| | 00:55 | Then there is the load function, which
loads data from the server and takes the
| | 00:59 | content that comes back and
puts it into the matched element.
| | 01:02 | And so we are going to take a look
at using the get function and the load
| | 01:06 | function in this movie.
| | 01:07 | So let's take a look at the get function.
| | 01:10 | The get function takes a URL and it
takes any data that you want to send to the
| | 01:14 | server--so these could be you know URL-
encoded properties that would normally be
| | 01:18 | sent on the query string.
| | 01:20 | And then there's a function to call and
case things are successful, and then there
| | 01:24 | is an optional dataType.
| | 01:25 | Now if you don't provide a dataType,
the jQuery library will just simply try to
| | 01:30 | make an intelligent guess as to what
kind of data you're looking to come back,
| | 01:34 | either XML JSON, text, whatever.
| | 01:37 | This is a pretty simple function to use.
| | 01:39 | Let's go back over to our code and
take a look at an example of using it.
| | 01:43 | So here in Aptana Studio, I've got
my Helpers_start document open, and it
| | 01:50 | looks pretty similar to the one that we used
in the previous movie for the AJAX function.
| | 01:55 | Here, on my document ready function, I
have a function called getData, and getData
| | 02:00 | is what we're going to fill out.
| | 02:01 | Now, last time when we did this--
remember we did $.ajax and that's not we're
| | 02:06 | going to be doing this time.
| | 02:07 | This time we are going to
be using the get function.
| | 02:10 | And to do that I am simply going to
write $.get, or of course I could have
| | 02:15 | written you know jQuery.get, but
dollar sign is more convenient.
| | 02:18 | So I write $.get, and I am going to get
the same text file, so it's going to be
| | 02:25 | testdata.txt. And then I need to
give the name of the success function
| | 02:29 | and that's this
function right here, successFn.
| | 02:35 | When successFn is called, the result
will be the data that came back from the
| | 02:39 | server, and then we're going to get a
reference to our content paragraph, which is
| | 02:43 | right here and put the result inside of it.
| | 02:47 | Okay, so we're going to save this, and
then once again, using Aptana Studio, I am
| | 02:52 | going to run this using my local web
server. And you can do this however you want to.
| | 02:56 | You can post this to whatever server
you use it for testing or whatever IDE
| | 03:01 | you happen to be using.
| | 03:02 | But I am going to run this using my
local server here in Aptana, so I'll bring it
| | 03:06 | up in Chrome, and you can see that what's
happening is the result is coming back
| | 03:10 | from the server and being
placed into the paragraph.
| | 03:12 | All right, so let's go back to the code.
| | 03:14 | Now, it turns out that this combination
right here of getting data and then using
| | 03:19 | the successFn to put the result into
an element on the page is so common that
| | 03:25 | jQuery actually gives you a shorthand
way just of doing that, and so let's go
| | 03:30 | back up here to get data and comment this out.
| | 03:32 | What we're going to do this time is
simply, on the element itself, dollar sign
| | 03:37 | and we're going to get the content paragraph,
| | 03:40 | we're going to call the load function.
| | 03:42 | And the load function will actually
go out and kick off an AJAX request, and
| | 03:46 | we're going to ask for testdata.txt.
| | 03:50 | Now, that's all that we need to do.
| | 03:52 | So this right here, load, is going to go
out to the server, look for this URL,
| | 03:59 | take the result, and put it into whatever
element matches this selector right here.
| | 04:04 | So we are going to save, and just
to be sure that we're not somehow
| | 04:08 | triggering the successFn,
| | 04:09 | let's go ahead and comment that out.
| | 04:11 | So we'll save and we'll run this again
using the internal server, and you can
| | 04:16 | see that it worked.
| | 04:17 | So we refresh, and you can see that the
text data is coming back from the server
| | 04:20 | and being put into the element on
the page all with one line of code.
| | 04:24 | So if you have a need to use AJAX that
fits one of these comment scenarios then
| | 04:29 | the jQuery AJAX helper functions
can make your job a lot easier.
| | Collapse this transcript |
| Understanding AJAX data types| 00:00 | In this example we're going to see how
to use jQuery's AJAX features to deal
| | 00:04 | with different kinds of data
coming back from the server.
| | 00:07 | Because data won't always be coming
back in the form of HTML or text, sometimes
| | 00:12 | it will be JSON, sometimes it will be
XML, sometimes it will be binary format,
| | 00:16 | jQuery's AJAX functions make dealing
with different kinds of data pretty easy.
| | 00:22 | Back here in the API documentation
for jQuery, I am going to click on the
| | 00:26 | Shorthand Methods again.
| | 00:28 | Let's take a closer look at
the jQuery.getJSON function.
| | 00:33 | getJSON is basically shorthand,
which is equivalent to just calling the
| | 00:39 | AJAX function that you can see here,
with a dataType of json, a url, a data
| | 00:44 | and a success function.
| | 00:46 | And so here the arguments are,
| | 00:47 | there is a url, and that's the url
that you want to get the JSON data from.
| | 00:52 | There is the data object, which is optional.
| | 00:54 | It's the properties or data, or you can
think of parameters that are sent to the
| | 00:59 | server with the request, and then there
is a success function, which is called
| | 01:03 | when the function returns successfully.
| | 01:06 | Let's take a look at how we can use this
in practice, so let's jump over to the code.
| | 01:11 | Here in the code I have my
DataTypes_start document open, and what we're going to
| | 01:17 | do is first work with some JSON data.
| | 01:21 | We're going to write a function called
getJSON data when the document loads, and
| | 01:28 | that's this function right here.
| | 01:30 | Now, I have already put in a
definition for the Flickr API.
| | 01:34 | So, Flickr is an online photo service
which provides a whole bunch of pictures,
| | 01:39 | and it has a freely available JSON
service where we can call the API provided by
| | 01:45 | Flickr and get back photos
that match a certain kind of tag.
| | 01:49 | Now, I am not going to go
deep into how Flickr works.
| | 01:51 | You can look it up on your own time.
| | 01:53 | But we're going to use Flickr in this
example because it has an option for
| | 01:55 | providing JSON data.
| | 01:57 | So what I am going to do is on the next
line here, I am going to write $.getJSON,
| | 02:04 | because we're going to get some JSON
data. And the URL that we are going to use
| | 02:08 | is this Flickr API URL right here.
| | 02:11 | So I am going to pass that in as the
first argument, so that's Flickr API, and
| | 02:15 | then I need to provide some
parameters to the Flickr API so it knows what
| | 02:20 | photos I'm looking for.
| | 02:22 | I am going to pass in, first, I am going
to ask for tags, which will be, let's see.
| | 02:28 | Let's look for photos having to do with
the space needle, and tag mode will be any.
| | 02:36 | And again, these
parameters are specific to Flickr.
| | 02:38 | You can look up what these mean.
| | 02:40 | And the format is going to be json, so
we are telling Flickr that we want data
| | 02:46 | back in JSON format.
| | 02:48 | Let's assume that that works. What we
are going to do then is call the successFn,
| | 02:54 | and the successFn is down here.
| | 02:59 | When the successFn gets called,
this result right here is not going to be a
| | 03:03 | text string or HTML.
| | 03:05 | It's going to be JSON, and
it's going to be a JSON object.
| | 03:09 | And so what I am going to do is use
jQuery's each iterator to iterate over each
| | 03:15 | one of the items that
came back in the result set.
| | 03:18 | Now again, this is going to be
determined by what the structure of the JSON data
| | 03:23 | that you get back is.
| | 03:24 | Now, I happen to know that Flickr comes back
with an items structure inside the result.
| | 03:32 | So for each thing in the result.items--
and I am going to declare a function
| | 03:37 | that's going to handle each one of
these and it's going to take an index and
| | 03:41 | it's going to take the item itself.
| | 03:43 | So for each one of these guys, what I
am going to do is make a new image tag,
| | 03:49 | and I am going to do that by using
jQuery's HTML constructor to make a new image tag.
| | 03:55 | And the image tag, I am going to
give the attribute for the source.
| | 04:00 | So I am going to set the source
attribute for the image to item.media.m and
| | 04:07 | again, this is specific to Flickr.
| | 04:09 | So, once I've set the attribute, I am
going to take that image and I am going to
| | 04:14 | append it to the content div.
| | 04:19 | Once again just a review, make a new
image, set the source attribute to the
| | 04:23 | source inside the JSON structure for
that particular item, and then append
| | 04:27 | the whole thing to the content div, which is
this guy right here, with the id of content.
| | 04:33 | So, now I need to limit the number of
photos I am getting back, because his
| | 04:37 | is going to come back with a whole bunch of
photos, and I don't want to do a whole bunch.
| | 04:40 | What I am going to do is say, if i ==
4 then we're going to just return false,
| | 04:48 | which tells this each iterator right
here to stop running, and that should limit
| | 04:52 | our results to just 4 photos.
| | 04:55 | So, it looks like, if I've done this
correctly, I am going to save this and now I
| | 04:59 | am going to run it in the browser, okay.
| | 05:02 | So let's go ahead and run this in my
local server, and you can see that the API
| | 05:09 | went out to Flickr and got a whole bunch
of photos tagged with the space needle.
| | 05:13 | Now, these pictures are going to look
different for you based upon when you run
| | 05:18 | this example, so here you can see this
is a pretty clear Space Needle photo.
| | 05:22 | Here is one where it's way back in the
background. The others are just Seattle.
| | 05:26 | I am not sure why they came up, but
they were tagged with Space Needle.
| | 05:30 | So let's bring up the Developer Tools
so that you can see what's happening.
| | 05:33 | So here in the successFn, what I am
going to do is put a breakpoint, and now I am
| | 05:40 | going to refresh the page, and you can
see there is the breakpoint being hit,
| | 05:44 | all right, and here is the result.
| | 05:45 | Now you can see that the
result is a JSON structure.
| | 05:50 | This JSON structure is defined by Flickr.
| | 05:52 | But you can see that there is an array
of 20 things here in the items array, and
| | 05:57 | each one of these is an object, right,
and each object has a whole bunch of
| | 06:01 | information about the picture and here
is the media property, and there is the
| | 06:06 | URL to the photo itself.
| | 06:08 | So, what I am doing is I'm iterating
over each one of these results.items set,
| | 06:12 | and then for each item I'm
building up the individual image.
| | 06:17 | So I'll take the breakpoint off and let
it go, and we'll close the Developer Tools.
| | 06:21 | Okay, so that's dealing with JSON data.
| | 06:23 | Let's go back and take a look at how to
deal with XML data, because XML data is
| | 06:27 | another common piece of data
that you work with on the Internet.
| | 06:30 | So let's scroll back up. Then we'll
comment out that function and call another
| | 06:34 | one called getXMLData.
| | 06:35 | And getXMLData is this function
right here, so let's fill that one out.
| | 06:43 | And for this example we're going to
use our test XML data.XML file, and I just
| | 06:50 | made this up.
I threw some XML in here there is my name.
| | 06:54 | Here is the title, so this
is what we're going to use.
| | 06:57 | Back here on the code,
let's write the code to get the XML data.
| | 07:00 | In this case I am going to use $.get,
| | 07:02 | and just get, I am not getting JSON here,
so all I am going to do is ask for XML
| | 07:07 | data, and I need to get the test
| | 07:09 | xmldata.xml file. And this time I am
going to write my own result function
| | 07:16 | just right here inline.
| | 07:18 | So I am going to write function result,
and now we are going to flesh this out.
| | 07:24 | Now in this particular case when this
function gets called, result is going
| | 07:28 | to be an XML document.
| | 07:30 | It's not going to be XML string data.
| | 07:32 | It's not going to be text.
| | 07:34 | It's going to be a parsed XML
document, and that means I can use DOM XML
| | 07:39 | functions on that result.
| | 07:41 | For example, I can do things like var
title = result. Because this is a document, I
| | 07:47 | can say getElementsByTagName, and I will
get to title first, and that comes back
| | 07:55 | with an array, so we get the first one.
| | 07:57 | Okay, and then I'll do the same thing
for var name =. And I'll just use this
| | 08:02 | again, copy and paste, only
this time I want the name.
| | 08:08 | That gives me the tags for title and
name, and now I am going to say var val =
| | 08:15 | and I am going to say title.firstChild.
nodValue. And again this is regular old XML, okay?
| | 08:26 | In the title, the first child of this
title tag is the text inside the tag.
| | 08:31 | That's just how the DOM works.
| | 08:32 | So I am going to say + " by " +
name.firstChild.nodeValue. So now I've got the
| | 08:48 | title by name, and then all I need to
do at that point is say $ and get a
| | 08:56 | reference to my content div
and say append that value.
| | 09:02 | Now, we're calling function when the
document loads, so let's save this and
| | 09:07 | watch what happens.
| | 09:08 | So I am going to run this in my local
server, and you can see it says jQuery
| | 09:11 | Essential Training by Joe Marini, alright.
| | 09:14 | Again, let's bring up Dev Tools
so you can see what's happening.
| | 09:18 | I am going to put a breakpoint right
here inside the result function, and then I
| | 09:23 | am going to refresh.
| | 09:24 | And you can see that
there is the breakpoint, okay.
| | 09:26 | So, here is the result, right, and you
can see that the result is a document.
| | 09:30 | It's an XML document.
| | 09:31 | So, jQuery correctly identified the
incoming data as XML, parsed it into an XML
| | 09:36 | document, which I can now
use my XML DOM functions on.
| | 09:40 | So for example if I step over these
functions, you'll see that title, right, is a node.
| | 09:46 | That's a title tag, and name is a tag, right.
| | 09:50 | Then when I step over this function,
you can see that I now have a string that
| | 09:54 | extracts the value of each one of the
contents of those two tags, and then here
| | 09:59 | is the content where I do the
appending of the value into this div.
| | 10:03 | So watch this area right here. So when I step,
you can see that the string got put in there.
| | 10:08 | In a nutshell, that's how you work with
different kinds of data types using the
| | 10:12 | jQuery AJAX functions.
| | Collapse this transcript |
| Using global AJAX event handlers| 00:00 | The jQuery AJAX library provides a set
of global AJAX event handlers that you
| | 00:06 | can use to register functions to
listen in for interesting events that take
| | 00:10 | place during the lifecycle of
an AJAX request on a given page.
| | 00:14 | Here in the API documentation let's go
ahead and click on the global AJAX event
| | 00:18 | handlers, and you can see that there is
about a half dozen functions that you
| | 00:21 | can use to register events for when
something interesting happens in an AJAX request.
| | 00:28 | Now again, these are not functions
that you call; these are functions that
| | 00:32 | get called for you.
| | 00:33 | And so for example, you use the AJAX send
function to register an event handler
| | 00:39 | that gets called when an AJAX
request is about to be sent.
| | 00:44 | And again, these are global, so these are
for all of the AJAX requests on your page.
| | 00:49 | So for example, you might use the
ajaxStart and ajaxComplete events to show some
| | 00:55 | kind of user interface on your webpage
to let the user know that there is an
| | 01:00 | AJAX request taking place, and that
they need to be patient while data is
| | 01:04 | retrieved from the server.
| | 01:06 | You might use, for example,
the ajaxError event handler to centralize all of
| | 01:11 | your error handling rather than attach
individual error functions to each one of your requests.
| | 01:17 | Let's take a look at these events in action.
| | 01:20 | We're going to jump over to the
code here, and here in my code I've got
| | 01:24 | Globals_Finished up in my editor,
and that's this file right here.
| | 01:29 | So you can see that I've got a whole
bunch of functions. There is Start.
| | 01:33 | There is Stop.
There is Send, Complete, Error, and Success.
| | 01:38 | So I've registered functions, and
basically what I am doing in each one of these
| | 01:42 | functions is just using the
developer console to log some message about
| | 01:46 | something happening with AJAX.
| | 01:48 | And then after all of these global
event handlers have their functions
| | 01:52 | registered, I call this get data
function right here. And getData, all it's doing
| | 01:57 | is using the get shorthand method to
get the testdata.txt file, which we've been
| | 02:02 | using in this chapter, and there is a
successFn right here. And in the successFn
| | 02:07 | we just simply log out that the result
is being set, and we put the contents of
| | 02:12 | the result parameter right here,
into this content paragraph right here.
| | 02:18 | So let's save that.
| | 02:20 | Let's bring this up in the
browser, and let's see what happens.
| | 02:24 | So I am going to run this in my local server.
| | 02:28 | So you can see that "This is some text data."
| | 02:30 | got set into that paragraph.
| | 02:32 | Let's bring up the Developer Tools, and
let's switch over to the Console, and you
| | 02:37 | can see that in the order in which
things happened, each one of those event
| | 02:41 | handlers put out a little
string to the Developer Console.
| | 02:46 | So right here we have AJAX is starting and
then it says About to request data and
| | 02:50 | then Setting the result and then it
says Looks like everything worked!
| | 02:53 | Everything's finished!
The AJAX request ended.
| | 02:56 | And if we go back to the code--let's scroll up--
| | 03:02 | you can see that those strings
correspond to each one of these functions.
| | 03:08 | So for ajaxStart it says AJAX starting,
and then ajaxStop it says AJAX request
| | 03:12 | ended and so on and so forth.
| | 03:15 | Using these global event handlers,
you can register events that will get called
| | 03:19 | for every single AJAX request.
| | 03:21 | In fact, let's take a look at what
happens when an error occurs, and we have our
| | 03:26 | ajaxError handler right here. And this
function takes some parameters. So do the
| | 03:31 | other ones as well, but they're optional,
and I'm not using them in this example.
| | 03:35 | But here in the case of ajaxError,
we have parameters for the event, the jqXHR
| | 03:40 | object, any of the AJAX settings,
and the actual error that happened.
| | 03:44 | So let's scroll down, and make
a request for a file that we know
| | 03:49 | doesn't exist, right.
| | 03:50 | So testdata1.txt is not real, so let's
save that and then let's go back to the
| | 03:54 | browser, and now let's refresh the
page, and you can see that it didn't work.
| | 03:59 | When we bring up the Developer Tools,
right here we have our AJAX starting.
| | 04:03 | It says About to request data, but then
you could see that there was an error.
| | 04:07 | It seems like requesting
testdata1.txt was a problem.
| | 04:10 | If we expand that out, we can see that
there was a whole bunch of things that
| | 04:14 | took place in here,
right, and then it says, Hmmm.
| | 04:17 | seems that there was a
problem and then not found.
| | 04:20 | But you can still see
that Everything's finished!
| | 04:21 | and AJAX request ended
functions still completed.
| | 04:25 | So let's go back to the code.
| | 04:28 | In this case, rather than the
ajaxSuccess function being called that says looks
| | 04:34 | like everything worked,
| | 04:36 | this time the AJAX error
function got called and it says Hmm.
| | 04:39 | Seems Like there was a problem, and the
not found message is passed in by jQuery
| | 04:45 | as the error of why things went wrong.
| | 04:48 | These global event handlers in many
ways provide some nice centralization of
| | 04:52 | AJAX functionality so that you can
provide some really great user experience
| | 04:56 | to your users like global settings of
showing when requests are in progress, or
| | 05:00 | centralized error handling, and it
really makes working with AJAX and jQuery a
| | 05:05 | lot easier.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Okay, well that brings us to the end
of jQuery Essential Training. I hope you
| | 00:04 | have enjoyed learning
about jQuery along with me.
| | 00:07 | You should now know everything you
need to get started using jQuery to build
| | 00:11 | your own highly
interactive and modern web pages.
| | 00:15 | I hope to see you soon out on the web.
| | 00:17 | Take what you've learned, and
go out there, build great sites.
| | Collapse this transcript |
|
|
