Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

JavaScript in Drupal

jQuery Overview

Video loading...

  • 0:07
    Introduction to jQuery Nate Haug
  • 0:15
    Let's kick things off with a quick overview of a presentation
  • 0:18
    of the basics of jQuery.
  • 0:20
    This presentation will cover the bare minimum
  • 0:22
    that you need to know in order to get
  • 0:23
    started using jQuery with Drupal.
  • 0:26
    We also have another DVD in the Lullabot Learning Series called
  • 0:29
    An Introduction to jQuery that covers each of these concepts
  • 0:32
    more in depth.
  • 0:33
    Let's get started.
  • 0:36
    First of all, what is jQuery?
  • 0:38
    jQuery itself stands for JavaScript Query,
  • 0:41
    which we'll see where the query comes into things
  • 0:44
    later in this presentation.
  • 0:47
    It's a JavaScript library smaller than most images on the page.
  • 0:51
    Compressed, it's only about 23k, more or less,
  • 0:54
    depending on which version of jQuery you're actually using.
  • 0:59
    Overall though, it significantly reduces the amount of code
  • 1:02
    that you would need to write.
  • 1:03
    As a developer, writing JavaScript code can actually be really
  • 1:06
    tedious and rather confusing.
  • 1:08
    And jQuery simplifies all of it, making it so that all of your code
  • 1:12
    works across all different browsers, which is the next benefit.
  • 1:16
    Any code that you write in jQuery, you can pretty much rest
  • 1:19
    assured that it'll work across all browsers and all platforms
  • 1:22
    without any additional changes.
  • 1:26
    Lastly, jQuery provides a set of visual effects that
  • 1:30
    can add wow factor to your site, such as fading
  • 1:32
    in or sliding up and down.
  • 1:35
    Let's take a look at some jQuery syntaxes.
  • 1:39
    First of all, jQuery only contains one function in the entire library,
  • 1:44
    the dollar sign function.
  • 1:47
    And the dollar sign function can do multiple things
  • 1:49
    depending on the arguments that you pass into it.
  • 1:52
    The first thing, and the most common thing
  • 1:54
    you'll be doing with the dollar sign function is doing selectors.
  • 1:57
    Selectors allow you to find elements on the page
  • 2:00
    so then you can operate on them.
  • 2:03
    If you pass an HTML into the dollar sign function,
  • 2:05
    it will automatically create Dom objects that you can then place
  • 2:08
    on to the page, wherever you like.
  • 2:12
    And lastly, the dollar sign also provides a set of detection scripts
  • 2:16
    that allow you to determine which version of browser
  • 2:19
    you're currently working with.
  • 2:21
    And even though this isn't really necessary within jQuery most
  • 2:24
    of the time, you can now use the dollar sign function to check
  • 2:29
    information about the browser.
  • 2:31
    In later versions of jQuery we're now
  • 2:33
    no longer using the browser property,
  • 2:35
    though it's still available.
  • 2:37
    Instead, we're checking the support.
  • 2:39
    This support object will tell you information about the browser,
  • 2:42
    such as whether or not it properly renders the box model
  • 2:45
    or supports opacity, making it so you
  • 2:48
    can fine-tune your scripts to provide
  • 2:51
    a good experience for all users.
  • 2:55
    So let's talk a little bit about jQuery selectors.
  • 2:59
    jQuery selectors allow you to find an element on the page
  • 3:02
    so that you can operate on it.
  • 3:03
    Selectors are one of the main reasons why the jQuery library
  • 3:06
    became so popular to begin with.
  • 3:09
    First of all, you can pretty much use any of your existing knowledge
  • 3:13
    about CSS and reapply it to jQuery.
  • 3:17
    So, for example, you can find an element by class,
  • 3:20
    simply by using a dot in front of the name of the class,
  • 3:22
    just like in CSS.
  • 3:24
    You can also use the hash symbol, just like CSS,
  • 3:28
    to find an element by its ID.
  • 3:31
    Or, if you want to, you can even select multiple elements
  • 3:33
    by separating them with a comma.
  • 3:37
    You can even use advanced CSS selectors as provided
  • 3:41
    by the CSS 3 specification.
  • 3:43
    Even if the user's browser doesn't yet support CSS 3,
  • 3:46
    jQuery provides the functionality to make
  • 3:48
    it so that you can use CSS 3 advanced selectors
  • 3:51
    across all browsers.
  • 3:53
    In this particular example, we've made it so that we can select
  • 3:56
    an element by its attribute.
  • 3:58
    So for example, this particular selector
  • 4:01
    will find all text fields on a page by checking its attribute
  • 4:04
    type is equal to text.
  • 4:08
    You can even do more advanced selectors, such as this attribute
  • 4:12
    selector that will find all images on the page that end with a ping.
  • 4:17
    So basically, finding all ping images on the page.
  • 4:22
    It's important to note that this attribute selector is probably one
  • 4:25
    of the biggest differences in the jQuery API between older
  • 4:28
    versions and the newer ones.
  • 4:31
    The first version of jQuery ever included in Drupal was in Drupal 5
  • 4:35
    and it was jQuery 1.0.4.
  • 4:38
    Later versions of Drupal then included newer versions of jQuery.
  • 4:43
    Drupal 6 included jQuery 1.2 and newer versions of jQuery
  • 4:47
    can be added to Drupal core by using the jQuery update module.
  • 4:52
    Drupal 7 includes the latest release as of now of jQuery, jQuery 1.4.
  • 4:59
    So just keep in mind that if you're using older versions of jQuery,
  • 5:03
    you'll need to include this @ sign in your attribute selectors.
  • 5:06
    All newer versions of jQuery, that @ sign can now be omitted.
  • 5:14
    So once you've found an element on the page using the jQuery selector,
  • 5:18
    you'll likely want to do something with it.
  • 5:21
    Most commonly, you'll apply an effect to that element
  • 5:24
    that you have selected.
  • 5:26
    jQuery provides a set of effects, the most
  • 5:28
    common of which, or basic of which, is called hide,
  • 5:32
    and its complement, show.
  • 5:34
    This will simply immediately take an element that is visible on the page
  • 5:37
    and hide it immediately.
  • 5:39
    Interestingly though, the hide effect,
  • 5:42
    though being the most simple effect that jQuery provides,
  • 5:45
    is also one of the most extravagant.
  • 5:47
    If you add a parameter to the hide method,
  • 5:50
    then it will in fact make an effect that's pretty exciting.
  • 5:55
    This is the way it looks, taking an element and slowly hiding it.
  • 5:59
    We'll collapse it to the left and to the top,
  • 6:02
    and fade it out at the same time.
  • 6:08
    Besides just using slow, and its complement, fast, you can
  • 6:12
    also pass in a particular integer.
  • 6:15
    If you pass an integer value, jQuery will interpret
  • 6:18
    that as the number of milliseconds that that effect
  • 6:20
    will take to complete.
  • 6:22
    So, for example, 3,000 would take 3 seconds
  • 6:25
    to complete a particular event.
  • 6:30
    So besides just hide and show, you can also
  • 6:34
    use some effects such as fade out.
  • 6:36
    And fade out will simply fade out the element.
  • 6:40
    It also has a complement, fade in.
  • 6:43
    And this is the way that these effects look.
  • 6:53
    Lastly, besides hide, show, fade out, and fade in,
  • 6:58
    there's also slide up, and its complement, slide down.
  • 7:02
    And this is the way that this effect looks.
  • 7:11
    And that's a general summary of the effects
  • 7:13
    that are available within jQuery.
  • 7:18
    Besides these effects, there's also some very useful toggle commands
  • 7:22
    that you can use that do the opposite, whether or not
  • 7:25
    an element is shown or hidden.
  • 7:27
    So, for example, if an element is currently slid up and hidden,
  • 7:32
    then you can use slide toggle, and it will slide down.
  • 7:34
    If it's already down, then it will slide the complement, back up.
  • 7:39
    There's also some great effects that you can use by toggling classes.
  • 7:43
    Toggling classes will essentially add
  • 7:45
    or remove a class based on whether or not
  • 7:48
    that element currently has it.
  • 7:50
    So, for example, you could toggle a class, such as hover to make it
  • 7:53
    so that an element is hovered when the mouse is over it,
  • 7:57
    and then remove the class hover when the mouse is moved back out.
  • 8:01
    Class manipulations are great, because they make it so that you
  • 8:03
    can apply all of the powers of CSS simply by toggling
  • 8:07
    on or off a particular class.
  • 8:13
    One of jQuery's greatest features is its ability to chain
  • 8:16
    together separate requests.
  • 8:18
    It's also where the word query comes into the word jQuery.
  • 8:23
    So, for example, let's take an h1 element, which we've selected here
  • 8:28
    on the first line of this code.
  • 8:30
    And then we've pre-pended the word hello,
  • 8:32
    and then appended an exclamation mark, making it
  • 8:35
    so that the word hello now surrounds this h1 with an exclamation
  • 8:40
    mark at the end.
  • 8:41
    And then we can fade it out and fade it in.
  • 8:44
    Each one of these actions will take place in sequence.
  • 8:48
    So that first the pre-pend will happen, then the append, then
  • 8:50
    the fade out, then the fade in.
  • 8:52
    And you can chain together these commands endlessly,
  • 8:55
    all of these effects actually taking place on the original element that
  • 8:58
    was selected.
  • 9:00
    Chainability was a great innovation introduced in the jQuery library.
  • 9:07
    So once you've found an element on the page,
  • 9:10
    and once you're able to actually do some effects on it,
  • 9:13
    you'll probably want those effects to actually take
  • 9:15
    place based on the user action.
  • 9:18
    These 3 steps put together the basics
  • 9:20
    of just about all jQuery scripts.
  • 9:23
    So a jQuery event allows you to actually trigger this action
  • 9:26
    in response to the user clicking, or hovering, or doing
  • 9:29
    some other action on the page.
  • 9:32
    These are the most common events used within jQuery.
  • 9:35
    So click, obviously, makes an element react to a user clicking.
  • 9:40
    Changes responds to any change within a select list,
  • 9:43
    or radio button, or checkbox.
  • 9:46
    Toggle is very similar to click, only it will
  • 9:49
    execute these actions alternatingly.
  • 9:51
    Hover, very similarly, will respond to rolling the mouse over something
  • 9:56
    and then rolling it back out.
  • 9:58
    Each one of these events all take a function name as their arguments.
  • 10:02
    This function name is what will actually be executed when the user
  • 10:06
    does this particular action, whether clicking,
  • 10:09
    or changing a form element, or hovering
  • 10:11
    the mouse over a particular item.
  • 10:14
    Besides adding events, you can also remove
  • 10:17
    events that you've previously bound by using the unbind method.
  • 10:24
    So that does it for basic coverage of the jQuery concepts.
  • 10:29
    First of all, there's only one function within the jQuery library,
  • 10:32
    the dollar sign function.
  • 10:35
    With this dollar sign function, most commonly
  • 10:37
    you'll be selecting an element on the page using a selector.
  • 10:41
    Once you've found that element, you'll apply an effect to it.
  • 10:47
    Together, selectors and effects aren't that much use,
  • 10:50
    unless you're actually doing them in response
  • 10:51
    to a user's action on the page, for which we use jQuery's events.
  • 10:56
    And lastly, all of jQuery's abilities
  • 10:59
    are completely chainable, making it so you can put together
  • 11:01
    a long sequence of events simply by concatenating them
  • 11:04
    all on top of the same selector.
  • 11:08
    So this covers the fundamentals of the jQuery library.
  • 11:11
    We'll be doing some more hands-on examples throughout this video,
  • 11:14
    but for a more in-depth coverage of all of these features
  • 11:17
    within the jQuery library, check out the Lullabot Learning Series
  • 11:21
    DVD, An Introduction to jQuery.
  • 11:23
    Let's go write some code.

jQuery and JavaScript in Drupal Series

Loading ...

Jquery Overview

Loading...
11 minutes 34 seconds // Drupal 7, Drupal 6 // HDCC //

Provides a high-level overview of jQuery to people who are brand new to this JavaScript library.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.

Share