Web Design Academy offers a Practical jQuery Course. In This post we will discuss what jQuery is and how you can use it to improve your websites and applications.

If you have anything to do with web development, you probably have heard the term ‘jQuery’ over a million times already. Believe it or not, jQuery has risen to popularity in a short span of time and today it stands as one of the most well-loved and popular entities when it comes to developing for the internet.

In this article, we shall be taking a look at jQuery in detail — its origins, advantages, jQuery Mobile, jQuery UI and why you should study jQuery.

This post is part of the Why Study Series:

  1. Why Study Web Design
  2. Why Study WordPress
  3. Why Study HTML5
  4. Why Study CSS3
  5. Why Study Mobile Website Design
  6. Why Study jQuery
  7. Why Study PHP

Introduction

jQuery is an open source, cross-browser, CSS3 compliant JavaScript library that has made client side scripting relatively easier. It can produce dynamic web pages as well as Flash-like animations. Like it or hate it, jQuery enjoys tremendous popularity among developers, and it surely deserves its popular spot! As stated by Wikipedia, jQuery today powers over 55% of the 10,000 most visited websites on the internet.

Origins of jQuery

jQuery was first released in January 2006 at BarCamp NYC by John Resig. Support for AJAX was added the very next month, and jQuery moved to the completely open source MIT license later in May that year. Following that, September 2006 witnessed the release of XML version of the API and the Visual jQuery Magazine.

Twelve months later, in September 2007, a new user interface library greeted jQuery. Things had already started to gain momentum, and exactly a year later, in September 2008 (Wow! September surely seems to be the preferred month for jQuery folks), Microsoft and Nokia announced their support for jQuery. Microsoft has tried to adopt jQuery for use within Visual Studio (so as to integrate it with its ASP.NET AJAX Framework), whereas Nokia has integrated jQuery in the web run-time widget development platform.

2009 was the year that saw jQuery gain wide acceptance and build an outreach platform. The first-ever jQuery podcast and an online summit were accomplished in November, whereas December greeted jQuery with the .net Magazine’s Award for Best Open Source Application. Later, in 2010, a mobile project was announced for jQuery. The next two years saw many new event APIs and re-writing of certain selector engines, and the rest is history!

The Advantages

The foremost advantage of jQuery is that it is not rocket science, in comparison to its alternatives. You can easily add plugins on top of the base library, and this in turn saves a lot of time and efforts (and head aches). In fact, one of the primary reasons why Resig and his team considered the creation of jQuery was to save time — when it comes to development for the web, time matters a lot, and jQuery caters to the shortage of time by being a flexible and nimble solution.

Furthermore, jQuery comes with the MIT License, which ensures that the project enjoys fast and steady growth as there are no legal or licensing hassles to worry about. This in turn has led to the growth of a loyal and broad community, thereby leading to jQuery’s popularity. Bug fixes, patches, updates, support — have no fear, you are in safe hands with the jQuery community!

It is common knowledge that jQuery interacts well with AJAX (else, why would Microsoft bother with it in the first place?). This gives jQuery a distinct advantage over the other complicated alternatives such as the likes of Flash and bare CSS.

In short, to sum it up:

  1. jQuery is flexible and speedy for development.
  2. It comes with MIT License and is open source.
  3. The project is supported by a wonderful community.
  4. IT HAS PLUGINS!
  5. Bugs are killed…..er…. fixed pretty quick.
  6. IT LOVES AJAX!

jQuery Mobile — Oh, The Goodies!

Before we wind up this article, let’s take a look at jQuery Mobile and jQuery UI as well.

Basically, jQuery Mobile is a web framework which is optimized for touch devices. Naturally, such optimization means that it can work with a great deal of devices, ranging from smartphones to tablets. The latest stable build 1.1.1 was released in July this year.

So, does it have any advantages of its own? Of course it does!

  • jQuery Mobile is compatible with most major mobile platforms, such as iOS, BlackBerry, Windows Mobile, Symbian and Android.
  • Since it is based on jQuery (obviously!), it does not have a difficult learning curve for new developers.
  • It supports custom themes.
  • It is extremely lightweight and quick (in development mode, the size goes somewhere around 70 KB).
  • Let’s mention it again: it is touch-optimized.
  • It loves responsive designs, HTML5 and AJAX.

Sounds like the Duke Nukem of mobile web frameworks, right? Indeed, jQuery Mobile has got its own share of awesomeness. However, it isn’t without some minor drawbacks either:

First up, if you directly import the jQuery Mobile library (alongside its CSS file), it will generate new calls to the server (and possibly slow down the overall functioning of your app).

The styling of jQuery Mobile has a good deal of rounded corners gradients — what if your design doesn’t have any?

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

jQuery UI contains many widgets that maintain state and therefore have a slightly different usage pattern than typical jQuery plugins. All of jQuery UI’s widgets use the same patterns, so if you learn how to use one, then you’ll know how to use all of them.

Why You Should Study jQuery

  • One of the primary benefits of jQuery—a benefit shared with some other JavaScript libraries—is that it seamlessly handles crossbrowser issues. JavaScript implementations differ among browsers to varying degrees, and it can cause a developer to prematurely and severely age to get everything working across browsers with JavaScript. Relax: the authors of jQuery have done most of the work for you.
  • jQuery uses a simple, clean, powerful syntax that makes it easy to select the DOM elements on the page you want to change with JavaScript and allow you to chain actions and effects together for efficient code. It is quite common to replace a dozen or more lines of JavaScript with a single line of jQuery code. jQuery uses the CSS (Cascading Style Sheets) version 3 selector specification for selecting elements, so you don’t have to learn a different syntax to use jQuery. This assumes, of course, that you’re familiar with the CSS3 syntax.
  • jQuery is highly extensible. As mentioned earlier, the core jQuery library is kept tight and focused, keeping out non-essential features. It also provides a plugin framework that makes it easy to extend jQuery, and there are both official jQuery plugins as well as thousands from third parties. This way your page has to download only the specific set of features it needs. Any time you need a feature not included in the core jQuery library, there is a good chance that someone has already written a plugin that does what you need.

TIP: You can find a list of available plugins at jquery.com, the home of jQuery, with user ratings to help you find the best ones.

  • jQuery supports building pages using unobtrusive JavaScript, an approach to using JavaScript in Web pages. Among other things, unobtrusive JavaScript is concerned with the separation of functionality between a Web page’s structure/content and presentation. This keeps nuggets of code out of HTML elements on the page, such as with event attributes such as onclick. Instead, you wire up event code in a script block, keeping the behavior implemented in code separate from the structure of the page.
  • One of the goals of jQuery is to make things that are hard in JavaScript easy when using jQuery. So jQuery includes many utility functions to do things like trim strings, parse JSON data, check whether one DOM element is within another, and search array elements using a filter.
  • jQuery is one of the most widely used JavaScript libraries available, with support from some of the most heavily trafficked Web sites in the world. According to the jquery.com Web site, Google, Amazon, IBM, Microsoft, Twitter, Dell, CBS News, Bank of America, and many others use it on their Web sites, and it is in use in many open source projects including Mozilla, DotNetNuke, and WordPress. Such widespread use ensures that jQuery will receive active development support for years to come, and a vibrant user community has formed around the library.

If you want to add rich user interactivity or Ajax features to your Web site, there really is no reason not to consider jQuery. Once you learn what jQuery can do and how small and efficient it is, it’s easy to understand why Microsoft abandoned its own Ajax Library in favor of jQuery! Even if you begin using jQuery and find some highly specialized situation that the library doesn’t support, you can always fall back to writing your own custom JavaScript for that one situation.

Where To Study jQuery

Should you want to add to your web design knowledge, then our jQuery for Web Designers would be a great addition to your skill-set.

This jQuery course is for web designers that want to take their websites to the next level. We will start with the basics of jQuery, what you can do with it and how to do it. jQuery is a very well sought after skill in the web design industry and we put together a course for web designers that has no experience in writing any JavaScript. If you understand CSS and the way it works then this course would be a great addition to your skill-set.

In this jQuery for Web Designers Course we will cover all aspects of the jQuery framework and then move on to using the jQuery UI and jQuery Mobile frameworks. All three of these frameworks will most definitely put you in a great position for employment or at least give you the ability to build much better websites with advanced features.

View Course Information

About
Web Design Academy
Practical Web and Graphic Design Courses. We offer a range of subjects to cover all aspects of Website Design, Software Development and Graphic Design. We also have subjects in Search Optimisation and Social Media Marketing. Become a Front End Developer, Full-Stack Developer or Designer.
Showing 2 comments
  • Johan
    Reply

    Excellent article. I really enjoyed your jQuery course. It is very powerful indeed and you made it very easy to learn. 5 Stars for your courses.

    • Web Design Academy
      Reply

      Hi Johan, It was really great having you on the course. Keep in touch and enjoy your new jQuery Skills.

Leave a Comment

Start typing and press Enter to search

Pin It on Pinterest

Responsive Web Design CoursePHP Course South Africa