Programming Simplified

Friday, February 21, 2014

show()

HTML element can hidden using the show() method.

The optional speed parameter takes three values as in hide() methods:

"slow", "fast" and "milliseconds".

Syntax:

$(selector).show(speed,callback);

Example:

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

$("h1").show(1000);

});

hide()

HTML element can be hidden using the hide().
The optional speed parameter takes three values: "slow", "fast" and "milliseconds".
The optional callback parameter is executed after the execution of hide() completes.

Syntax:
$(selector).hide(speed,callback);

Example:
$("button").click(function(){
$("h1").hide(1000);
});

Thursday, January 30, 2014

Common jQuery Effects

hide()/ show()/ toggle()
fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()
slideDown()/ slideUp()/ slideToggle()
animate()
stop()
callback
chaining

Wednesday, January 29, 2014

jQuery Event Methods

Events

All the user actions on a HTML page to which the page can respond is called an Event.

There are several events that are supported by jQuery.

Some common DOM events are:

click
dbclick
mouseenter
mouseleave
hover
mouseup
mousedown
keypress
keyup
keydown
submit
blur
change
focus
reload
resize
unload
scroll

Example:

In this example hide() and show() functions are used to hide a <p> element using two buttons one having id=hide and other id=show. When you click the hide button the line hides.

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

</script>

</head>

<body>

<p>If you click on the "Hide" button, I will disappear.</p>

</body>

</html>

jQuery functions in separate file

Functions in separate file

The jQuery functions could be kept in a separate file with an extension .js

The file could be referred in the HTML page using src attribute.

For example if you have written your jQuery codes in a separate file called "myjquerycode.js" in the same folder in which the html file is placed. then you could refer it using following lines in your HTML page.

</head>

jQuery Selector Examples

$("*") -> selects all elements

$(this) -> selects current element

$("p.myclass") -> selects <p> elements with class="myclass" (same with other elements)

$("p:first") -> selects first <p> element (same with other elements also

$("ul li:first") -> selects first <li> of first <ul> element

$("ul li:first-child") -> selects first <li> element of every <ul> element

$("[href]") -> selects all elements with href attribute.

$("a[target='_blank']") -> selects all <a> elements with target attribute equal to "_blank".

$("a[target!='_blank']") ->select all <a> elements with target attribute not equal to "_blank".

$(":button") -> select all <button> elements and <input> types="button".

$("tr:even") -> select all even <tr> elements

$("tr:odd") -> select all odd <tr> elements

jQuery syntax

jQuery Syntax

All jquery methods are inside a document ready event:

$(document).ready(function(){

..... jQuery functions

});

$(function(){

..... jQuery functions

});

this prevents the jQuery code to execute before the document is loaded or ready.

the basic syntax of jQuery is:

$(selector).action();

$ -> sign to define jQuery.

(selector) -> to find HTML elements

.action () -> action to be performed on the HTML element(s).

Example:

$(this).hide(); -> hides the current element

$("p").hide(); -> hides all <p> elements

$("h2").hide(); -> hides all <h2> elements

$(".myclass").hide() -> hides all elements with class="myclass"

$("#myid").hide() -> hides all elements with id="myid"

Programming Simplified

Friday, February 21, 2014

hide() and show() in jQuery

show()

hide() and show() in jQuery

hide()

Thursday, January 30, 2014

Common jQuery Effects

Wednesday, January 29, 2014

jQuery Event Methods

Events

jQuery functions in separate file

Functions in separate file

jQuery Selector Examples

jQuery Selector Examples

jQuery syntax

jQuery Syntax