jQuery Fever: Introduction

Hey Guys,

I welcome you all to this tutorial series of Jquery titled ‘jQuery fever’. Here you will get the chance to everything you wanna know about Jquery, starting from what it is to how you can use it.

You know, i started my career of Web Development with Jquery, i searched a lot over Google and trust me it took me more than an hour to know what it was and how it worked. So here am writing this post to give you guys a brief introduction about it.

But before we go ahead, Guys, please make this a habit…. as a developer whenever you start learning or implementing new things, the first thing you need to know is it’s background. You need to the reason for the innovation because if you know the reason then its easier for you to co-relate.

Why to use Jquery ???

Before the introduction of Jquery, developers wrote the client-side scripting in conventional JavaScript, which was quite troublesome for ASP, PHP developers (… and ASP.NET nowadays). I know developers who hate to code in JavaScript because they are not familiar with the syntax. So to free the developers from this trauma, Jquery was introduced.

And you know what the best part is, it’s open source, light weight which means you have ample plug-ins available on the web and you can even create one of your own to suit your needs.

What is Jquery ???

Jquery is a lightweight javascript library which simply adds a layer of abstraction between developer and JavaScript, so you don’t need to go into the details of learning js. Jquery provides simplified functions and selector that takes the load off your shoulder so that you don’t need to go into the implementation details of Js anymore. So now question that comes to our mind is “What all can we do with Jquery ???”. Well with Jquery can do almost everything starting from HTML document traversal to AJAX interaction.

Remember back in college when we practiced C, initially we wrote custom basic string functions to calculate the length of string, to check if sub-string exists, palindrome and stuff like that. But later we came to know about string.h header file that made our work even simpler by proving default implementation.

Jquery works in the same manner, replacing your big and complex JavaScript function with few lines of Jquery Code. You don’t even need to know JavaScript for learning Jquery and that’s not all in fact Jquery is a proven boon for designers as well. You can play well with css, create your own effects and much much more.

Now let’s move on and see how we write Jquery Selectors to select elements and execute functions on them.

What are Jquery Selectors ???

Jquery Selectors allows you to select DOM elements or the HTML tag elements from your page based on some specific requirement. To understand this in better way let’s consider this example: Suppose selection committee for basket ball team keeps minimum criteria on Height of 6 feet, so all the aspiring players whose height is below 6ft. won’t be participating. This height criteria is what the selector is and same works in Jquery as well. Jquery Selectors helps you to select few required DOM elements of you choice out of the thousands available on the page, like you can select all the Div elements on the page a span with particular class or first div from the header section.

Jquery uses the conventional css selectors syntax for this purpose. Sizzle.js is what providing this power to jquery to select DOM elements. It comes pre-loaded in jquery.js file which you download from Jquery Website. Before you go ahead, just open you jquery.js file and you will find that second half of it is sizzle.js itself. Good news is this that Sizzle.js is now adding support for css3 selectors which means that very sooner jquery selectors are gonna get more n more powerful.

jQuery Selectors is a vast topic and am gonna need a lot of code to explain you all that, so i will continue writing the jQuery Selectors in the next post. I am gonna tell you how you can write jQuery Selectors and also how you can create your own selectors. Till then enjoy reading.

— To Your Coding Success

You might also like