- hide()/ show()/ toggle()
- fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()
- slideDown()/ slideUp()/ slideToggle()
- animate()
- stop()
- callback
- chaining
Thursday, January 30, 2014
Common jQuery Effects
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
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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<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>
<button id="hide">Hide</button>
<button id="show">Show</button>
</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><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="myjquerycode.js"> </script>
</head>
jQuery Selector Examples
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
});
OR
$(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"
Monday, January 27, 2014
jQuery tutorial
jQuery
jQuery is an open source JavaScript library which simplifies the interaction between HTML and JavaScript. It was created by John Resig in 2005 and released in January of 2006.
What is jQuery ?
- It is a JavaScript library
- It greatly simplifies JavaScript programming.
- It is lightweight
- Works on "write less, do more".
- Makes it easier to use JavaScript in websites.
- Wraps many common tasks that may require lines of JavaScript.
- Can be called using functions.
- Many big companies like
- Microsoft
- IBM etc. use jQuery.
Why jQuery ?
- Fully documented
- Great community
- Tons of plugins available
- Small size
- Works in all browsers.
- Contains:
- HTML / DOM manipulations
- CSS manipulations
- HTML event methods
- Effects and Animations
- AJAX
- Utilities
Example:
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function){
$("button").click(function){
$("p").hide();
});
});
</script>
<body>
<h1>Example page for jQuery</h1>
<p>This line hides when you click the button</p>
<button>click to hide</button>
</body>
</html>
In above example jQuery function will hide the line under the paragraph tag upon clicking the button.
How to add jQuery to your webpage ?
1. Download from jQuery.com
2. Include from a CDN (Content Delivery Network) like Google or Microsoft.
Example: Include from Google
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
Example: Include from Microsoft
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>
*Note: Inclusion from jQuery leads to faster loading of the website.
jQuery Syntax, Effects, Functions etc in coming posts...
Subscribe to:
Posts (Atom)