jQuery Fundamentals – 1

Posted: April 30, 2014 in jQuery
Tags: , , , , ,

jquery1

Two of my team members started working on jQuery and ExtJS technologies since last month part of developing few web based modules. I am thinking of taking this opportunity to build a knowledge base of jQuery which will be a one stop shop ready reference for the work that we are currently doing.

I will be posting a series of lessons on jQuery in the coming weeks. Hope you will get immensely benefited by reading these posts. Ok let’s get started.

http://jquery.com/

jQuery is a fast, small, and feature-rich and very popular JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

  • jQuery is a JavaScript Library.
  • jQuery greatly simplifies JavaScript programming.
  • jQuery is easy to learn.
  • jQuery is a single script file
  • jQuery is cross browser
  • jQuery makes interacting with DOM a piece of cake
  • jQuery has numerous selectors which would help you to interact with DOM effortlessly
  • jQuery has very rich event infrastructure/ event methods
  • Many rich jQuery plug-ins are available in market for almost any task out there
  • jQuery provides the ability to leverage Ajax with very little effort.
  • jQuery has got lightweight Footprint. Only 32kB minified and gun zipped

One can do amazing number of things using jQuery Library especially increased productivity and cross browser support.

  • Internet Explorer
  • Chrome
  • Firefox
  • Safari
  • Opera
  • OS
  • Android

If you are thinking of learning jQuery and don’t know where to start, I believe you are in the right place. By following the lessons that I am planning to post in my blog for next couple of weeks and by practicing them you will be able to have a very good start and get quite a bit from this course.

To get the most out of the posts on jQuery, I expect that you are familiar and comfortable in Java Script, HTML and CSS. But at the same time I am not expecting you to be an expert of these technologies.

Why should we use jQuery?

 

jquery2

Interesting question hah.

The more time you spent exploring answer to this question the more appreciation you will have for jQuery.

It brings together HTML5 and CSS, the jQuery JavaScript library greatly eases the pains of Web application development.

You will find jQuery intuitive and easy to learn — this library is built on shorter, simpler code, after all. With simple syntax and open coding standards, developers can shorten the time it takes to deploy an application or site.

In addition, developers don’t have to be experts in programming or Web design to create great styles for their sites. Any developer who has spent hours coding and testing CSS files will surely appreciate the simple implementation that jQuery brings to the table.

Visual Studio 2010 supports the integration of the jQuery library via the Manage NuGet Packages dialog box. This activates the Intellisense feature of Visual Studio, which gives the developer immediate access to jQuery methods and syntax without having to leave code view to do research. There isn’t a better tool to work in a Microsoft-based .Net environment.

Microsoft is showing that it’s serious about HTML5, which includes a lot of jQuery elements, by promoting the use of jQuery libraries that the HTML5 crowd has adopted. Microsoft is encouraging the use of jQuery, not only in mobile development but also in new Metro-style UI apps.

  • The jQuery library is free.
  • It’s light. Since jQuery pushes content to the client, it therefore reduces the wait time for server response. Plus, it’s smaller than Flash, so it results in smoother playbacks and less errors.
  • It works anywhere. HTML5 is cross-browser compatible-it will work on any browser, mobile phone or tablet, and even on Apple devices.
  • There’s a low learning curve. Since it’s based on plain old JavaScript, developers can learn jQuery fast.

In future, you may have to implement and deliver content to a variety of different platforms, including desktops, tablets and smart phones. HTML5 and jQuery is one of the best solutions for this kind of development.

Since jQuery is a major component of HTML5, it is worth the time, money and effort for developers to learn jQuery.

This library can deliver stunning effects with little coding-and, with more and more HTML5 integration, it will be a huge part of the future of Web development. If your goal is to build a site or Web app that is engaging and interactive, then jQuery is a necessary tool for your toolbox.

Most importantly you don’t need to worry about cross browser compatibility rather all your focus would be on designing and building your application

How to reference jQuery Script into a webpage?

To get started download jQuery script from http://jquery.com

If you need support for Internet explorer browser version   6 – 8 then go for jQuery 1.x else go with jQuery 2.x

 

jquery3

During development phase it is highly recommended to use the uncompressed version and during deployment we can ship the minified version.

After downloading the file you have to reference the script to the web page.


<html>
 <head>
    <title>How to reference jQuery</title>
    <script type ="text/javascript" src ="jquery.js" ></script>
 </head>
</html>
 

 Apart from Visual studio you can think of the following tools/editors while working with jQuery

  • Eclipse
  • Web Storm
  • Aptana Studio
  • Notepad ++

 

<html>
 <head>
    <title>How to reference jQuery</title>
    <script type ="text/javascript" src ="jquery.js" ></script>
 </head>
 <body>
  jQuery enabled web page!!!
 </body>
</html>
JQuery Ready function

http://api.jquery.com/ready/

We should use $(document).ready to detect when a page has been loaded and is ready to use.

Called once DOM hierarchy is loaded           but before all images haven been loaded where as window. Load event is called until images, CSS and everything is loaded.

The .ready() method is generally incompatible with the <body onload=””> attribute. If load must be used, either do not use .ready() or use jQuery’s .load() method to attach load event handlers to the window or to more specific items, like images.

<html>
<head>
 <title>How to reference jQuery</title>
 <script type ="text/javascript" src ="jquery.js" >
 $( document ).ready(function()
 {
 // Handler for .ready() called.
 alert("1");
 });
 </script>
</head>
<body>
 jQuery enabled web page!!!
</body>
</html>
jQuery Documentation

Suggest you to book mark the below URL since we end up referring to this page quite often.

http://api.jquery.com/

Make it as a habit to refer the API documentation before you jump start and Google for code samples. You will also find code samples for some parts of the documentation right here in this page.

At times you can even run a live demo in the API documentation page.

jquery4

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s