How To Get Started with jQuery: Make JavaScript Programming Easier

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

At last count, more than 90% of all websites were running JavaScript. As the most popular JavaScript library, jQuery is used by a majority of modern websites, and around 65% of the 10 million most popular sites on the web.

What this means is that if you want to be web developer, website designer, or webmaster, you need to know how to work with jQuery.

Introduction to jQuery

What is jQuery?

JavaScript is the programming language used to add interactivity to websites. jQuery is a library of pre-built JavaScript functions that handle tasks commonly managed with JavaScript. In essence, jQuery makes it easier and faster to use JavaScript.

jQuery is a library of commands that make it easy to locate, select, and manipulate HTML elements on a webpage in response to visitor activity. For example, using jQuery you can select a specific element, such as all of the <h2> header elements, and cause them to be manipulated in some way based on visitor activity – such as changing font size when the mouse hovers over them.

The strength of jQuery is in its ability to easily locate and select HTML elements without requiring that any additional attributes be applied to the HTML element.

jQuery Makes Hard Things Easy

Anything that you can do with jQuery you can also do with JavaScript. The difference is that many things that can be quite complicated to accomplish with JavaScript are very easy to do with jQuery. Let’s look at two examples: toggle and trigger.

Hide or Display Page Elements With Toggle

The CSS display property can be used to hide HTML elements. Select any HTML element with a CSS selector and apply a value of none to the display property, and the element will be hidden from view. If you want to make an HTML element hide on command, the CSS display property is how you can make it happen.

It isn’t very hard to use JavaScript to hide or show an HTML element by controlling the CSS display property. However, the jQuery toggle() method includes many built-in options that make it easy to produce powerful toggle effects that would be very hard to duplicate with JavaScript. If you include jQuery UI in addition to boilerplate jQuery in your HTML document, you can also use a number of jQuery UI effects to control how toggled elements are hidden and displayed.

If you want to learn how to use the jQuery toggle() method, there are lots of places to get started:

Execute a Script With the Trigger Event Handler

Another task that jQuery makes extremely easy is to trigger an event handler even if the actual event hasn’t transpired. For example, let’s say you have a script that is executed every time a specific button is clicked using the JavaScript onclick event. Now, what if you also want that same script run anytime a different action takes place as if the button itself had been clicked? The trigger() event handler is the answer.

Basic usage of the trigger method involves applying the trigger method to a specific event, and using it to trigger a second event when the first event transpires. That might sound complicated, but basic use of the trigger method is straightforward. Use the following resources to cover the basics and also get a look at some more advanced uses of the method.

Advantages to Using jQuery

If jQuery just makes it easier to use JavaScript, why do we use jQuery at all? Why not just stick with JavaScript and avoid having to learn a whole new set of commands and implementations?

According to Wikipedia, there are at least four advantages offered by jQuery.

  1. jQuery encourages the separation of scripting and HTML. While scripts can be written directly into HTML documents, the current thinking within the web design and development community is that HTML, CSS, and JavaScript should all be maintained separately. This is complicated by the fact that there must be a way to associate scripts with specific HTML elements and events. Without jQuery, the easiest way to do this is to add event attributes to the HTML document that call JavaScript functions. However, jQuery gets around the need to do this by providing a simple syntax for adding event handlers dynamically using JavaScript. This allows for complete separation of the JavaScript from the HTML document.
  2. jQuery encourages coders to write shorter clearer scripts. jQuery is designed for brevity. Anything you can do with jQuery you can also do with plain JavaScript. However, the jQuery code will typically be much shorter and clearer than the JavaScript code to accomplish the same task.
  3. Using jQuery eliminates cross-browser inconsistency. While JavaScript is rendered somewhat differently by different browser engines, jQuery has been developed to handle cross-browser differences and provide a consistent experience across browsers.
  4. jQuery is extensible. The jQuery library has been designed to be easily supplemented with new elements, events, and methods. Once these new items are added to the local jQuery library, they can be easily reused across a website as a plugin.

Getting Started with jQuery

If you’re ready to start learning how to use jQuery, and you aren’t already familiar with JavaScript, the first step to learning jQuery is to learn JavaScript.

As we’ve mentioned, jQuery is a library of JavaScript commands. As a result, jQuery follows the same basic syntax and structure as JavaScript. Having a strong grasp of JavaScript’s syntax, structure, and basic functions is critical to mastering jQuery. According to the jQuery Foundation:

All the power of jQuery is accessed via JavaScript, so having a strong grasp of JavaScript is essential for understanding, structuring, and debugging your code. While working with jQuery regularly can, over time, improve your proficiency with JavaScript, it can be hard to get started writing jQuery without a working knowledge of JavaScript’s built-in constructs and syntax.

Your Development Environment

Before you start coding, you’ll need to get your development environment set up. The good news is that all you really need to get started writing jQuery is a web browser, a text editor, and a copy of jQuery.

While any web browser will do, developers use either Mozilla Firefox or Google Chrome. While you should also have Internet Explorer or Edge, Opera, and Safari available to test your code in multiple browsers, if you aren’t already using Firefox or Chrome, go download and install the latest version of one or both of these free applications and use it for development purposes.

Sure, you could use Notepad to write code, but why would you? There are many great text editors available for free or very reasonable cost that provide many features designed to making coding easier and less error-prone. Some of our favorites are Atom, TextMate for Apple computers, Notepad++ for Windows computers, and Brackets.

Lastly, since jQuery is a library of commands built on JavaScript, you’ll need to call the jQuery library from any document that uses jQuery. In order to do this you’ll either need to download jQuery, or link to a jQuery library hosted online.

Resources

We’ve scoured the web for the best jQuery tutorials, ebooks, and interactive courses. Our recommendation is that you make use of several of these resources and work your way through the resources that best fit your learning style.

Our recommended training progression begins with some basic interactive tutorials that will show you the power of jQuery and demonstrate what is possible with the world’s most popular JavaScript library. Next, dive deeper into jQuery by reviewing in-depth tutorials offered by some of the most-respected names in web development including the Mozilla Developer Network and the jQuery Foundation. Finally, master jQuery by working your way through an ebook or paperback text.

Free Interactive Courses

There’s only so much that a written document can do to explain how a programming language works and what it can do. To really get a handle on the power of a language, you have to see it in action. Free interactive courses are one of the best ways to get a quick handle on the basic syntax of a programming language while also learning what it can really do.

Since the jQuery Foundation recommends learning JavaScript before you dive into jQuery, we recommend that you do the same. These free courses will have you writing basic JavaScipt in no time:

  • JavaScript Road Trip Part 1 from CodeSchool: Only part 1 of this road trip is free. The rest of the trip is hidden behind a pay wall. Run through the free content and then head to Codecademy to keep learning.
  • JavaScript by Codecademy: This content in this full-length online course is free. Access to quizzes is optional and does carry a price tag. The course should take about ten hours to complete, and will leave you capable of writing basic JavaScript code. With this course under your belt you’ll be ready to tackle some jQuery.

There are two interactive jQuery courses you should take to get a good basic understanding of what is possible with jQuery. These courses include:

  • Try jQuery: A free introduction to jQuery put together by the jQuery Foundation in partnership with CodeSchool.
  • jQuery by Codecademy: This course will take about three hours to complete. Just as was the case with the JavaScript course, the content of the course is free but if you want to take the quizzes you’ll have to pay for those. Our recommendation is to work through the free content and then move on to additional resources. By the time you finish, you’ll know how to use jQuery to select HTML elements, how to style those elements, and how to tie website visitor actions to jQuery code so that the website responds interactively.

In-Depth Tutorials and Learning Guides from Industry-Leaders

Learning JavaScript and jQuery should go hand-in-hand. If you’re ready to go deeper with jQuery, you’ll also need to broaden your knowledge of JavaScript. One of the best places to learn about JavaScript is the Mozilla Developer Network (MDN). Check out these great resources:

  • JavaScript Basics: While you may have learned the basics of how to actually use JavaScript through the interactive courses we recommended, at MDN you’ll learn how professional developers think about and use JavaScript. If you read through carefully, this document will take a couple of hours to fully digest.
  • JavaScript Guide: This extensive guide and tutorial will walk you through all of the foundational topics of the JavaScript language including functions, error handling, loops, grammar, expressions, and much more. Make it through this guide and you will know more JavaScript that the average web designers.

If you made it through the JavaScript resources at MDN, you’ll be fully prepared to tackle the training offered by the jQuery Foundation. At the jQuery Foundation website you’ll find an extensive Learning Center organized into chapters. Each chapter is dedicated to a specific topic such as About jQuery, Effects, Ajax, Plugins, and more. This authoritave resource is detailed and technical – just the thing you’ll need if you’re going to master jQuery.

Ebooks and Paperbacks

Once you work your way through the resources we’ve already covered you’ll be ready to use jQuery to tackle any common web design scenario. In addition, you’ll be knowledgeable enough to find the help you need to tackle more complex problems using the jQuery API.

Once you’re ready to become an advanced jQuery developer, there are a few texts that can help you on your way.

Free Ebooks

We located two free ebooks that have an excellent reputation within the jQuery community. With some jQuery coding experience under your belt, develop a new level of understanding of the most popular JavaScript library by working your way through one or both of these high-quality texts:

  • jQuery Fundamentals by BoCoup, LLC.: Part ebook and part interactive tutorial, this text covers the jQuery both in written format and with practical examples.
  • jQuery Succinctly, written by Cody Lindley and hosted by Syncfusion: A hundred page text that covers the concepts essential to advanced jQuery development. If you’re just getting started, this isn’t the text for you, but if you’re a reasonably competent JavaScript or jQuery developer ready to take the next step, this text is an excellent choice.

Paperback Texts

If you prefer a physical text, here are some of the best jQuery texts available today:

  • Learning jQuery: Karl Swedberg, a current member of the jQuery Foundation Board of Advisors, along with Jonathan Chaffer, a web developer and influential Drupal programmer, designed this text to be suitable for JavaScript newbies or experienced developers alike. This text is also available for Kindle.
  • JavaScript and JQuery, Interactive Front-End Web Development: This text by Jon Duckett complements his leading text on HTML and CSS, and may be the most popular JavaScript and jQuery text avaliable today.
  • jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa: Katz and De Rosa are both active members of the jQuery Foundation – Katz as a memeber of the Board of Advisors and De Rosa as a member of the Content team. This authoritative text is a fast-paced look at jQuery ideally suited to beginning JavaScript developers.

Designing With jQuery

In this section, we’ll look at how to use jQuery to design amazing interacting websites. By the end of it, you’ll know the tools available to you, and have all the knowledge, resources, and tools you will need.

JavaScript

JavaScript is a programming language built into every modern web browser. Along with HTML and CSS, it is the third-leg in the modern web technology triad.

JavaScript is a high-level general programming language that can be used for a wide variety of scripting tasks both on and off the web. The primary way designers use JavaScript is to power user interactions. Styling changes and AJAX calls are two examples of user interactions that can be powered with JavaScript. Let’s look at each briefly.

But first, we’ll take a step back and discuss some aspects of JavaScript.

Changing Style with JavaScript

While styling of a webpage is generally the domain of cascading style sheets (CSS), JavaScript can be used to manipulate CSS. Styles can be manipulated directly by selecting an element and using the style property, like this:

<div id="my-div">Contents of My Div</div>
<script>
  document.getElementById("my-div").style.backgroundColor = "blue";
</script>

That bit of JavaScript grabs the element with an id of my-div and applies a background color of blue. While directly manipulating CSS with JavaScript is useful, if you want to change a bunch of styles all at once it’s a lot easier to include those styles in your site CSS, and then apply the styles using JavaScript. Here’s one way this can be done:

<style>
.first-state {
  background-color: #303030;
  color: #fff;
  border: 3px solid #ddd;
  width: 200px;
  height: 200px;
}
.second-state {
  background-color: #ddd;
  color: #333;
  border: 3px solid #333;
  width: 300px;
  height: 300px;
}
</style>
<div id="my-div" class="first-state">Contents of My Div</div>
<script>
  document.getElementById("my-div").onclick = function() {
    this.className = "second-state";
    }
</script>

Now, when the div element with the id attribute of my-div is clicked, the first-state class will be removed and replaced with the second-state class, and the second-state class CSS will be applied.

Add Class Animation

Updating Content on the Fly with AJAX

AJAX, which stands for Asynchronous JavaScript and XML, is a technique used to add content to a webpage without refreshing the page. The basic idea is that JavaScript sends data to a web server behind the scenes, receives a response from the server, and adjusts the contents of the webpage based on that response.

That might sound a bit too theoretical, so let’s get practical. AJAX makes things like autocomplete features, infinite scrolling, and instant search results possible. In each case, the web page sends data to the web server and loads the response into the webpage without refreshing.

Implementing an AJAX call is a challenging task, and goes beyond basic JavaScript programming. However, as a front-end developer or designer, AJAX is one JavaScript feature you can hardly do without. In the next section, we’ll highlight a great AJAX resource.

JavaScript Resources

If your JavaScript skills are a little rusty, here are three excellent resources that will get you back up to speed:

While JavaScript is powerful, jQuery allows you to do a lot more with less effort.

jQuery: Preparing to Rock the World

Think of jQuery as a bunch of pre-built JavaScript building blocks. Let’s look at a basic example. Here’s how you would select a an element with the id of my-div first in JavaScript and next in jQuery.

// JavaScript
document.getElementById( 'my-div' );
// jQuery
$( '#my-div' );

Selecting an element by id is pretty easy to do in both languages. However, as you can see, it takes roughly 25 fewer keystrokes to do it in jQuery than in JavaScript.

Adding jQuery to Your HTML Document

You have to load jQuery before you can use it, and there are two simple ways to do so. You can either download jQuery and include a local copy or use a hosted copy such as Google Hosted Libraries.

Here’s the code you’d include in your HTML document to load jQuery:

<!--load local copy of jQuery-->
<script src="/js/jquery.min.js?x43436"></script>
<!--load from Google Hosted Libraries-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Note that when you write jQuery, you must load your code after the jQuery core has loaded.

Using jQuery With WordPress

One special consideration to be aware of is that when you use jQuery on a WordPress website you must use jQuery to prefix your code rather than $. There are workarounds you can use to get the $ prefix to work, but failing that, just prefix your code with jQuery, like this:

// Normal jQuery
$( '#my-div' );
// jQuery for WordPress
jQuery( '#my-div' );

jQuery CSS

Just as you can use JavaScript to manipulate CSS, you can do the same thing with jQuery.

We can manipulate classes quite effectively with jQuery. The script below watches for a mouse click on the element with an id of my-div and then removes one class and adds a different class. You can use this code to alternate between two CSS classes.

var myDiv = $( '#my-div' );
$ ( myDiv ).click( function () {
  if ($( '#my-div' ).hasClass( 'first-state' ) ) {
    $( '#my-div' ).removeClass( 'first-state' );
    $( '#my-div' ).addClass( 'second-state' );
  } 
  else if ($( '#my-div' ).hasClass( 'second-state' ) ) {
    $( '#my-div' ).removeClass( 'second-state' );
    $( '#my-div' ).addClass( 'first-state' );
  } 
})

That’s helpful, although, we could have done that a lot more easily by using .toggleClass() instead.

var myDiv = $( '#my-div' );
$ ( myDiv ).click( function () {
  $( myDiv ).toggleClass( 'first-state' );
  $( myDiv ).toggleClass( 'second-state' );
})

Let’s see that transition in action.

Toggle Class Animation

There are many additional jQuery CSS methods. Most notably, the .css() method can be used to manipulate the CSS of a targeted element directly. Other methods, such as .height() and .width() can be used to target specific CSS values.

jQuery Effects

A wide variety of effects are built into jQuery. These effects are strung together with other jQuery methods and functions to control the execution of changes to page elements.

That’s a mouthful, so let’s look at an example. If we go back to our .toggleClass() function, we can add some effects to smooth out the transition.

var myDiv = $( '#my-div' );
$( myDiv ).click( function () {
  $( this ).fadeOut( 'slow' , function() {
    $( this ).toggleClass( 'first-state' );
    $( this ).toggleClass( 'second-state' );
  })
  $( this ).fadeIn( 'slow' );
} )

What that code does is fade the element out, toggle the classes, and fade the changed element back in.

Toggle Effect Animation

The fadeOut() and fadeIn() effects are just two of several jQuery effects available. In addition, all effects can employ a number of different options to fine tune their behavior.

jQuery Events

We’ve already seen one jQuery event several times in this tutorial: .click(), which fires when a user clicks the targeted element. However, there are many additional events available.

Events used to target user action include .click(), .dblclick(), .hover(), .mouseenter(), .mouseleave(), and .mousemove(), which are all fairly self-explanatory. There are also several event handlers that watch for changes to page elements:

  • .change() detects when form elements change. Similarly, .submit() detects when a form is submitted.
  • .focus() is triggered when a targeted element gains focus.
  • .ready() fires as soon as the browser has built the webpage.
  • .resize() triggers code to run when the viewport is resized.
  • .trigger() ties one event to another related event.

There are additional jQuery events we haven’t covered in this brief guide. Learn more by referring to the jQuery documentation or the suggested resources.

jQuery UI

jQuery UI is an extension to jQuery that includes powerful UI widgets and tools. Implementing a jQuery UI feature, such as an accordion widget, is trivially simple compared to coding the same feature from scratch.

jQuery UI features can be broken into four categories: widgets, effects, interactions, and utilities. Let’s take a look at each. But first, we need to know how to add jQuery UI to an HTML document.

Adding jQuery UI to an HTML Document

You have two options when it comes to loading jQuery UI: download it and include a local copy or include a CDN-hosted copy.

<!--load local copy of jQuery UI-->
<link rel="stylesheet" href="/css/jquery-ui.css?x43436">
<script src="/js/jquery-ui.min.js?x43436"></script>
<!--load from Google Hosted Libraries-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

In addition, keep these points in mind:

  • The CSS stylesheet link should go in the document head.
  • The jQuery UI script should go just above the closing body tag.
  • The jQuery core (jquery.js or jquery.min.js) must be loaded before jQuery UI (jquery-ui.js or jquery-ui.min.js) is loaded.

jQuery UI Themes

When you download a copy of jQuery UI the download builder allows you to include a theme. This is because jQuery UI widgets require default styling. The jQuery UI theme you select defines the default widget styles, and the relevant code is included in jquery-ui.css.

If you do opt for the Google-hosted option, note that the theme name is dropped in just before the file name: …/smoothness/jquery-ui.css. Smoothness is the default jQuery UI theme. You can use any theme by substituting the theme name when building the URL.

In addition, the jQuery UI website offers a ThemeRoller which you can use to build your own theme and include it when you download jQuery UI.

jQuery UI Widgets

Widgets make it relatively effortless to create useful UI elements that would take a mountain of code to create with pure JavaScript and CSS. Let’s take a look at some of the most helpful jQuery widgets (click any to be taken to a demo):

  • Accordions allow you to hide information behind a heading and display it by toggling each section open and closed.
  • Tabs are an alternative to accordions. They’re a space-saving way to present information.
  • Buttons in jQuery UI are beautiful and consistently presented.
  • A Datepicker can be added to a form to ensure dates are properly selected and formatted.
  • Progressbars provide a visual indication of how much progress has been made toward the accomplishment of a goal.
  • Sliders allow users to select a single value or a range of values when submitting a form.
  • A Spinner adds up and down arrows for entering numbers in a form field.
  • Tooltips can be used to provide field-specific information to form users.

To give you a sense of how easy widgets are to implement, here’s all of the code you would need to use to create a set of accordions:

<!-- add the jQuery UI stylesheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- add the accordion content to the page -->
<div id="accordion">
  <h3>Accordion Section 1</h3>
  <div>
    <p>Accordion content. You can use paragraphs, lists, links, whatever.
  </div>
  <h3>Accordion Section 2</h3>
  <div>
    <p>Like I said.
      <ul>
        <li>You</li>
        <li>Can</li>
        <li>Use</li>
        <li>Lists</li>
      </ul>
  </div>
  <h3>Accordion Section 3</h3>
  <div>
    <p>That's it. It's super easy.
  </div>
</div>
<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- apply the accordion widget to the page content -->
<script>
$( function() {
  $( "#accordion" ).accordion();
} );
</script>

As you can see, the HTML is much longer than the few lines of jQuery required to turn the HTML into accordions.

jQuery UI Accordions Animation

jQuery UI Effects

Most of the methods in this category are expansions of core jQuery methods. For example, if you want to manipulate classes, the .addClass(), .removeClass(), and .toggleClass() methods are all available in jQuery UI, along with an additional method, .switchClass(). The difference is that in jQuery UI these methods include additional options, such as the ability to add transition effects directly to the method itself.

Let’s look at an example. Remember when we used .fadeIn() and .fadeOut() to change the appearance of a div? Well, we can create a much nicer effect with a lot less code by using jQuery UI.

var myDiv = $( '#my-div' );
$( myDiv ).click( function () {
  $( this ).toggleClass( 'second-state' , 1000 );
} )

Here’s that transition in action.

jQuery UI Toggle Class Animation

A few additional effect methods you’ll want to know include:

  • The .show() method removes display: none; from the targeted element.
  • The .hide() method adds display: none; to the targeted element.
  • The .toggle() method will switch the targeted element between a visible and hidden state.
jQuery UI Effect Animations

There are 15 different effect animations with names like blind, bounce, clip, drop, and explode. Let’s look at an example of the slide effect.

var myDiv = $( '#my-div' );
var myButton = $( '#my-button' );
$( myButton ).click( function () {
  $( myDiv ).toggle( "slide" );
} )

In this case, we added a button to slide the div on and off the screen. Let’s see what our div looks like when hidden with that bit of jQuery.

jQuery UI Hide Animation

These jQuery transition effects can be applied to the .show(), .hide(), and .toggle() methods. The jQuery UI website includes an effect preview tool which you can use to decide which effect best fits your implementation.

Easing jQuery UI Transitions

The jQuery core includes just two easings: swing and linear. However, jQuery UI adds more than 20 easings. Let’s take a look back at our implementation of the .toggle() method, this time adding two different easings.

var myButton = $( '#my-button' );
$( myButton ).click( function () {
  $( '#first-div' ).toggleClass( 'second-state' , 2000 , 'easeInOutQuad');
  $( '#second-div' ).toggleClass( 'second-state' , 2000 , 'easeInOutExpo');
} )

In this example, there are two divs. Both will transition to the second state in 2 seconds. However, each will use a different easing. Let’s take a look.

jQuery UI Easing Animation

jQuery UI Interactions

Interactions are a set of jQuery UI methods that allow website and app users to select and move page elements. There are five jQuery UI interactions. Clicking on any of the links below will take you to a demo of each interaction at the jQuery UI website.

  • The Draggable interaction allows users to reposition a web page element by dragging and dropping it with their mouse.
  • The Droppable interaction works hand-in-hand with the draggable interaction. To use it, both a draggable and a droppable item must be available on the webpage. When the draggable item is dropped onto the droppable item, an action is triggered.
  • Resizable does exactly what you think it should: it makes a page element resizable.
  • Selectable can make the items in a list selectable either by clicking on them one at a time, or by holding down Ctrl or clicking and dragging across multiple items to select multiple items at once.
  • Sortable makes it possible to rearrange list items in any order.

jQuery UI interactions aren’t the sort of thing you’d expect to implement on the average website. However, if you’re creating an interactive web app, game, or complex form, these interactions will come in handy.

jQuery UI Utilities

jQuery UI can be extended and the widget factory is the utility used to do so. Widget factory allows you to package up multiple jQuery UI methods, styles, and functions into a single reusable widget.

If you’re familiar with object-oriented programming, it might be helpful to think of jQuery UI widgets as objects. So, a jQuery UI accordion is actually an object of the accordion class. What the widget factory allows you to do is to define new classes of widgets and then use that class to create multiple objects, much in the same way you create a class and reuse it over and over in OOP.

Another useful jQuery UI utility is the .position() method. This method allows you to define the position of any element relative to another element or user action. The method is pretty simple once you get the hang of it. Let’s look at an example.

$( '#second-div' ).position({
  my: 'left top',
  at: 'right bottom',
  of: '#first-div'
});

That bit of code says that the left top corner of the element with the id of second-div should be positioned at the right bottom corner of the element with the id of first-div, like this:

jQuery UI Position Animation

In addition, items can be positioned based on user actions. Let’s adjust the code to use the position of the mouse rather than the first div to determine the position of the second div.

$( document ).mousemove( function (event) {
  $( '#second-div' ).position({
    my: 'center',
    of: event,
    collision: 'fit'
  })
})

That code adds a listener for the .mousemove() event that will be triggered anytime the mouse enters the document. When that happens, the .position() of the targeted div will be determined based on the position of the mouse.

Let’s see it in action.

jQuery UI Position Mousemove Animation

jQuery Mobile

jQuery Mobile is another extension of the jQuery library. It is used to create touch-optimized responsive websites and apps.

When thinking of jQuery Mobile, the emphasis really should be placed on touch-optimized. There are many core jQuery and jQuery UI methods and events that just aren’t applicable to a mobile device, and jQuery Mobile addresses that shortcoming. Unlike jQuery UI, which can be used to power just one or two facets of a website, jQuery Mobile is designed to be an all-or-nothing solution for touch-based responsive websites and apps.

The library includes a large array of responsive, touch-optimized buttons, datepickers, form elements, swipe events, navigation elements, tables, tabs, sliders, and more. In addition, jQuery Mobile includes a ThemeRoller.

The challenge with using jQuery Mobile is its all-or-nothing approach. It is designed to create full-replacements for desktop versions of websites and apps. If you’d rather have a single site or app that works on all devices, jQuery Mobile is not what you’re looking for. If you do use jQuery Mobile for an app or website that works on all devices — touch-enabled and not — you will need to find a way to switch jQuery Mobile on and off by detecting the device type, size, and presence of a touchscreen.

Design Resources

We already pointed out a few places where you can learn JavaScript. If you don’t already know some JavaScript, develop those skills before diving into jQuery. Once you have some JavaScript under your belt, the following resources will get you up to speed with jQuery, jQuery UI, and jQuery Mobile.

  • jQuery Foundation Learning Center is the official (and one of the best) places to learn jQuery. Here you’ll find a chapter-based course that covers the basics, events and effects, AJAX, plugins, and more. When you’re ready, you can also learn how to use jQuery UI and jQuery Mobile.
  • Learn jQuery From Scratch is a project-based tutorial that will help you gain confidence as a jQuery programmer.
  • CodeCademy jQuery Course teaches you jQuery syntax, as well as how write basic functions, modify DOM elements, use events, and implement effects.
  • jQuery Fundamentals by Bocoup is an ebook with a built-in JavaScript console so you can try out the code right in the browser. It covers jQuery basics, traversing and manipulating DOM elements, events, effects, and AJAX.

Designers Need jQuery

Extensions to jQuery, jQuery UI, and jQuery Mobile add a wealth of widgets, interactions, methods, effects, and touch-optimized tools. Mastering these will make you a better designer and developer because you’ll be able to build powerful, interactive web apps without wasting any keystrokes.

Other Interesting Stuff

We have more guides, tutorials, and infographics related to coding and website development:

What Code Should You Learn?

Confused about what programming language you should learn to code in? Check out our infographic, What Code Should You Learn? It not only discusses different aspects of the languages, it answers important questions such as, “How much money will I make programming Java for a living?”

What Code Should You Learn?
What Code Should You Learn?

Text written by Jon Penland. Compiled and edited by Frank Moraes.

Jon Penland

About Jon Penland

Jon has worked in many capacities in the high tech world, including engineering and development. He’s written many articles for WhoIsHostingThis.com, including expert reviews of web hosts, programming resource guides, and even front-end development tutorials. He lives in Georgia with his wife and five children.
Table of Contents＋－

Most Popular Blog Posts

Need Web Hosting?

If you’re in the market for a new web hosting provider, be sure to check out our user reviews, our A-Z hosting guide and our top three popular hosting picks:-

Comments

Thanks for your comment. It will show here once it has been approved.

Your email address will not be published. Required fields are marked *