Getting started with JQuery

For working with jquery we need to download the jquery.js file.Also need to add the following javascript code in our file.

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

 window.onload = function(){ alert("welcome"); }

instead of above code, jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event:

$(document).ready(function(){
   // Your code here
});

Inside the ready event, add a click handler to the link:

$(document).ready(function(){
   $("a").click(function(event){
     alert("Welcome to cabot blog!");
   });
 });

Adding and Removing a CSS Class

To add and remove a class we can use jquery. For example, if we have a class like below

<style type="text/css">
   a.boldtext { font-weight: bold; }
</style>

If we want to add a class to the anchor tag below

<a href="http://jquery.com/">jQuery</a>

we can add it as :

$("a").addClass("boldtext");

Also to remove a class:

$("a").removeClass("boldtext");

we can add a css to a div or a tag using jquery as specified below

$("a").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

Special Effects Using jquery

To add a special effect when we click on the anchor tag we can write code as

$("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Now, if you click any link, it should make itself slowly disappear.

Jquery Events

We can create a new jquery event using the code specified below

var e = new jQuery.Event("click");

Describes the nature of the event. This returns a string.

$("a").click(function(event) {
  alert(event.type);
});

result:click

event.pageX/Y

The pageX/Y property pair returns the mouse coordinates relative to the document.The return value is string.

$("a").click(function(event) {
  alert("Current mouse position: " + event.pageX + ", " + event.pageY );
});

Result:”Current mouse position: 130, 640″

event.result

Will contain the last value returned by an event handler . The return value can be anything

$("p").click(function(event) {
 return "hey"
});
$("p").click(function(event) {
 alert( event.result );
});

Result:”hey”
There are several predefined methods in jquery.Some of them are:

event.preventDefault()

Prevents the browser from executing the default action. Use the method isDefaultPrevented to know whether this method was ever called (on that event object).
Stops the browser from changing the page to the href of any anchors.

$("a").click(function(event){
 event.preventDefault();
 // do something
});
event.isDefaultPrevented()

Returns whether event.preventDefault() was ever called on this event object. This returns true/false

$("a").click(function(event){
 alert( event.isDefaultPrevented() );
 event.preventDefault();
 alert( event.isDefaultPrevented() );
});

bind(type,[data],fn )

Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.

Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

For example

$("p").bind("click", function(e){
 var str = "( " + e.pageX + ", " + e.pageY + " )";
 $("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
 $("span").text("Double-click happened in " + this.tagName);
});
$("p").bind("mouseenter mouseleave", function(e){
 $(this).toggleClass("over");

});

here object ‘p’ is binded to different events like  click, dblclick, mouseenter mouseleave etc.