Jquery Series Part 1:- Basics & Introduction

Jquery is a JavaScript library which makes life with JavaScript and DOM easier and common tasks really simple and trivial
$(“table tr:nth-child(“even”).addClass(“striped”);
Selectors are the most powerful feature of Jquery.The raw power of Jquery is in selecting and grabbing an element and then playing with that elements style or its surrounding elements.
The concept of Unobtrusive Java Script tells us that any JavaScript code placed inside the <body> tag is incorrect so this means that we have to separate our behavior from our markup or ui
Without using the concept of unobtrusive JavaScript we can say these lines of code to be correct
1. <input type=”button” onclick=”document.getElementById(‘testDiv’).style.color = ‘red’;” />
Now if we want to use the concept of unobtrusive java script here and want to separate the behavior and markup then we can simply use

<input type="button" id="testButton" />

Now we can have this script in the header section thereby separating the behaviour from the markup

window.onload = function (){

document.getElementById('testButton').onClick = changeColor;

};

function changeColor()

But ultimately what has happened is that we have increased no of lines of code in lust to separate but as far as good programming practices are considered on the client side then this approach is the best although it increases no of lines of code.
So what jQuery does is simplify this simple unobtrusive JavaScript concept using few lines of code.
It also has various other magic features which we will discuss in other articles of this series such as chaining
Jquery handles most of the browser issues by itself which is a major advantage of using jQuery over raw JavaScript
Jquery waits until the page is loaded so that we have all the controls created before any call or action to them this is another added advantage.
Jquery is fully extensible that’s what millions of developers are doing out there using jquery.
Jquery is so extensible, one reason for embedding so much extensibility is its light weight it’s just 15-17 KB of download depending on your version on the client system with minimal still powerful set of functionality.If you are not satisfied and want more then you are open to extend it or use already available rich set of plugins and other third party tools available for jquery.
$() is the wrapper used to wrap jQuery() what $ does is it selects the set of elements and return a JavaScript object containing array of all DOM elements that match the selector
Another important power of Jquery that it returns the set of all objects which were initially selected upon performing one operation on those set of elements ie if i select all the p elements of div’s with class = “dance” and perform a single line function $(‘dance’).fadeOut(); it will first fadeout all the divs and p’s with the required class dance and after fading out it will again return all these objects for further performing some actions on these set of objects.
So actually we can chain these elements a thousand layer deep all in a single line of code as shown
1. $(‘dance’).fadeOut().addClass(“dancing”); that’s all after performing fadeout now the objects will follow what is written in dancing css class and this will fire only when fadeout is completed not along with fadeOut that a real power with jQuery Chaining
There are various so called commands in jquery such as html and others which will directly allow you to play with the selected DOM elements
1. $(‘#someElement’).html(“This text is added afterwards”);
This was one example of selecting but jQuery is much more advanced in selecting then any of my articles or sessions can convey to you its real power can be leveraged only by you all creative minds out there, i can just introduce it to you but afterall its your creativity of playing with the DOM which will lead to ultimate cool things to inspire others.
Some examples i have prepared for you of much advanced selectors remembers these selectors though seeming advanced to you are nothing for jQuery it can handle much more advanced selectors.
1. $(“p:even”);
  This selector selects all even <p> elements.$(“tr:nth-child(1)”);
  
  This selector selects the first row of each table.
  
  $(“body > div”);
  
  This selector selects direct <div> children of <body>.
  
  $(“a[href$=pdf]”);
  
  This selector selects links to PDF files.
  
  $(“body > div:has(a)” this selector selects direct div of the body tag which have a elements that the links.
Also you can check one of my other post on using regular expression syntax with jquery to select group of elements having common word in their id’s.https://www.smallworkarounds.com/index.php/2009/01/04/jquery-and-regular-expressionstrick-1/
I will be doing more basic,intermediate and advanced level tutorials on Jquery, Microsoft Ajax Library and combination of both in order to get maximum output and using Client Side Ajax Control Templates and Data View Controls to maximize for scalability.

Stay tuned for more on Jquery!!!!!!!!!!!

Happy Programming !!!!!!!!

smallworkarounds

Jquery Series Part 1:- Basics & Introduction

1 Comment

Add comment Cancel reply