Learning Jquery

Learning Jquery


Basics of jquery |Jquery fundamentals |Learn jquery | Learning jquery | Jquery for beginners

Jquery consists of all javascript code internally. It helps reduce our effort as most of the browser handling etc is done internally. We as developers or consumers of Jquery Library do not need to worry about it. Thus jquery helps make our life very very easy.

In this article I will explain only the things a newbie Jquery developer must know. This essentially doesnt include concepts or principles. Has very little lecturing -- just some straight example code with brief descriptions demonstrating what you can do with jQuery.


Many of us maybe familiar to javascript, so for sake of simplicity in understanding Jquery I have compared it javascript wherever possible.



Link To Remote Source code of jQuery

This contains most of the functions we make use of in Jquery. This is nothing but an online libraray of Jquery.



<script type="text/javascript"







Events in Jquery

Some commonly used events



Document Load event

Similar to window.onload in javascript


$(document).ready(function() {

// all jQuery code goes here




Document Resize event

Similar to window.onresize in javascript


$(document).resize(function() {

// all jQuery code goes here



Click event

Similar to onclick in javacript

$("a").click(function() {

// do something here

// when any anchor is clicked




More List of events available

blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select.    




Selecting Elements in Jquery

$("div"); // selects all HTML div elements, same as document.getElementByTagName in javascript


$("#myElement"); // selects one HTML element with ID "myElement". same as document.getElementById in javascript


$(".myClass"); // selects HTML elements with class "myClass"


$("p#myElement"); // selects HTML paragraph element with ID "myElement"


$("ul li a.navigation");

// selects anchors with class "navigation" that are nested in list items


jQuery supports the use of all CSS selectors, even those in CSS3. Here are some examples of alternate selectors:


$("p > a"); // selects anchors that are direct children of paragraphs


$("input[type=text]"); // selects inputs that have specified type


$("a:first"); // selects the first anchor on the page


$("p:odd"); // selects all odd numbered paragraphs


$("li:first-child"); // selects each list item that's the first child in its list



jQuery also allows the use of its own custom selectors. Here are some examples:

$(":animated"); // selects elements currently being animated


$(":button"); // selects any button elements (inputs or buttons)


$(":radio"); // selects radio buttons


$(":checkbox"); // selects checkboxes


$(":checked"); // selects checkboxes or radio buttons that are selected


$(":header"); // selects header elements (h1, h2, h3, etc.)




Accessing and changing CSS class names for elements



$("p").css("width", "400px"); // adds a width to all paragraphs

$("#myElement").css("color", "blue") // makes text color blue on element #myElement

$("ul").css("border", "solid 1px #ccc") // adds a border to all lists





Showing and Hiding Elements with jQuery



The syntax for showing, hiding an element (or toggling show/hide) is:

$("#myElement").hide("slow", function() {

// do something once the element is hidden


$("#myElement").show("fast", function() {

// do something once the element is shown


$("#myElement").toggle(1000, function() {

// do something once the element is shown/hidden



Remember that the "toggle" command will change whatever state the element currently has, and the parameters are both optional. The first parameter indicates the speed of the showing/hiding. If no speed is set, it will occur instantly, with no animation.


A number for "speed" represents the speed in milliseconds. The second parameter is an optional function that will run when the command is finished executing.


You can also specifically choose to fade an element in or out, which is always done by animation:





$("#myElement").fadeOut("slow", function() {

// do something when fade out finished


$("#myElement").fadeIn("fast", function() {

// do something when fade in finished


To fade an element only partially, either in or out:

$("#myElement").fadeTo(2000, 0.4, function() {

// do something when fade is finished




The second parameter (0.4) represents "opacity", and is similar to the way opacity is set in CSS.

Whatever the opacity is to start with, it will animate (fadeTo) until it reaches the setting specified, at the speed set (2000 milliseconds).


The optional function (called a "callback function") will run when the opacity change is complete. This is the way virtually all callback functions in jQuery work.




jQuery Animations and Effects


You can slide elements, animate elements, and even stop animations in mid-sequence. To slide elements up or down:


$("#myElement").slideDown("fast", function() {

// do something when slide down is finished



$("#myElement").slideUp("slow", function() {

// do something when slide up is finished



$("#myElement").slideToggle(1000, function() {

// do something when slide up/down is finished




To animate an element, you do so by telling jQuery the CSS styles that the item should change to. jQuery will set the new styles, but instead of setting them instantly (as CSS or raw JavaScript would do), it does so gradually, animating the effect at the chosen speed:





opacity: .3,

width: "500px",

height: "700px"

}, 2000, function() {

// optional callback after animation completes





Animation with jQuery is very powerful, and it does have its quirks (for example, to animate colors, you need a special plugin). It's worth taking the time to learn to use the animate command in-depth, but it is quite easy to use even for beginners.




This is Just the Beginning

There is so much more you can do with jQuery beyond these basics I've introduced here. Hope this basic level of information regarding Jquery coding.





Basics of jqueryJQuery SlideJquery Trim StringJQuery Animate Div Height and WidthGoogle JQuery CDNHow to call function in JQueryHow To Hide Div On Click Using JQueryJquery Dropdown Selected ValueJQuery Form With ValidationAsp.net JQuery Calendar ControlJQuery Select Change


My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.

I'm Satalaj.