JQuery Introduction

Look to the future, because that's where you're going to spend the rest of your life. JQuery Mobile is a touch optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smart phone, tablet , desktop and mobile devices. jQuery Mobile uses HTML5 & CSS3 for laying out pages with minimal scripting. jQuery Mobile is built on top of the jQuery library, which makes it easy to learn if you already know just even a smidgen of HTML. It uses HTML5, CSS3, JavaScript and AJAX to accomplish its work for laying out pages with minimal scripting. Sometimes, it's easy to become overwhelmed by how much there is to learn in this industry. If jQuery happens to be on your personal "need to learn soon" list, you've found the place. Browse my jQuery demos, working examples and tutorials and learn to use jQuery to create animations, dynamic page formatting, and so much more. Learn how to add complex functionality to your site with jQuery plug-ins that create menus, forms, effects, and slideshows. I do demo updates daily, so stop by often have fun and learn JQuery..inside and out Quickly, and Hassle Free. We highly recommend using this site with the Google Chrome Browser or another browser that supports modern JavaScript features and includes good developer tools.

Let's Get Started

What Exactly Is jQuery?

According to jQuery.com, jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
In simpler terms, jQuery allows you to turn ten lines of traditional JavaScript code into two! Combine an enormous range of features with cross-platform compatibility and you have one robust framework. Before you know it, you'll be creating everything from rich forms to Flash-like menus. Don't worry if the task of learning yet another new framework seems daunting. My demos and working examples will take you step by step to see all jQuery has to offer.

jQuery Mobile is a user interface framework based on jQuery that works across all popular phones, tablet, e-reader, and desktop platforms. Built with accessibility and universal access in mind, we follow progressive enhancement and responsive web design (RWD) principles. HTML5 Markup-driven configuration makes it very, very easy to learn this superior UI, and it's powerful API makes it easy to deeply customize the library to you particular needs.

Why Would I Use jQuery Library Over Others?

Ultimately, it comes down to preference. Each framework has its own specific advantages. But, there is a reason why jQuery is the most popular framework available. Cross-Browser Compatibility. With any JavaScript implementation, a web developer can expect to spend a large portion of his or her time compensating for each browser's quirks. Luckily, the jQuery library neutralizes these browser inconsistencies, thus allowing developers more time to work code.

 

CSS Selectors:  By utilizing the CSS syntax, developers can use their existing knowledge to traverse their documents. With the addition of many CSS 3 and XPATH selectors, jQuery provides you with a wonderful mechanism for manipulating the elements on your page.

Chaining:  jQuery uses a pattern called "chaining" for its methods. Every time you run a method on a jQuery object, the method returns that very same jQuery object. Consequently, you won't have to retype your selectors for each method. Using such a ".NET" type of functionality allows for lower file sizes and greater code readability.

JQuery Pages & Dialogs

A page in jQuery Mobile consists of an element with a data-role="page" attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-role="header", class="ui-content", and data-role="footer". The baseline requirement for a page is only the page wrapper to support the navigation system, the rest is optional.

A page can be styled as a dialog that makes the page look like it's a modal style overlay. To give a standard page the appearance of a modal dialog, add the data-rel="dialog" attribute to the link. Transitions can also be set on dialog links.

Ajax Navigation & Transitions

jQuery Mobile includes an Ajax navigation system to support a rich set of animated page transitions by automatically 'hijacking' standard links and form submissions and turning them into an Ajax request. The back button is fully supported and there are features to prefetch & cache, dynamically inject, and script pages for advanced use cases.

Whenever a link is clicked or a form is submitted, that event is automatically intercepted by the Ajax nav system and is used to issue an Ajax request based on the href or form action instead of reloading the page. While the framework waits for the Ajax response, a loader overlay is displayed.

When the requested page loads, jQuery Mobile parses the document for an element with the data-role="page" attribute and inserts that code into the DOM of the original page. Next, any widgets in the incoming page are enhanced to apply all the styles and behavior. The rest of the incoming page is discarded so any scripts, stylesheets or other information will not be included. The framework will also note the title of the incoming page to update the title when the new page is transitioned into view.

Now that the requested page is in the DOM and enhanced, it is animated into view with a transition. By default, the framework applies a fade transition. To set a custom transition effect, add the data-transition attribute to the link.

Content & Widgets

Inside your content container, you can add any standard HTML elements - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the head after the jQuery Mobile stylesheet.

jQuery Mobile includes a wide range of touch-friendly UI widgets: form elements, collapsibles, collapsible sets (accordions), popups, dialogs, responsive tables, and much more. For best performance, use the download builder to pick the components you need.

Listviews

jQuery Mobile includes a diverse set of common listviews that are coded as lists with a data-role="listview" added. Here is a simple linked list that has a role of listview. We're going to make this look like an inset module by adding a data-inset="true" attribute and we add a dynamic search filter with data-filter="true" and a text field.

Form elements

The framework contains a full set of form elements that are automatically enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no data-role needed. Be sure to wrap these in a form element and always properly associate a label with every form element.

Responsive Design

jQuery Mobile has always been designed to work within a responsive web design (RWD) context and our docs and forms had a few responsive elements from the very start. All the widgets are built to be 100% flexible in width to fit easily inside any responsive layout system you choose to build.

The library also includes a number of responsive widgets like responsive grids, reflow tables and column chooser tables, and sliding panels.

Theming

jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a data-theme="b" attribute to any of the widgets on this page to turn it black.

Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme.

When you're ready to build a custom theme, use ThemeRoller to drag and drop, then download a custom theme.