Tutorials:Getting Started with jQuery - jQuery JavaScript Library

17 Apr 13

XX XX

jquery easyui

unghorton

jQuery

28 Mar 13

Hussein Ismail

$("a").click
This should show the alert as soon as you click on the link.
it selects all a elements
$("a") is a jQuery selector
$ itself is an alias for the jQuery "class"
This is similar to the following code:
jQuery provides two approaches to select elements.
he first uses a combination of CSS and XPath selectors passed as a string to the jQuery constructor (eg. $("div > ul a")). The second uses several methods of the jQuery object. Both approaches can be combined.
$("#orderedlist")
$("#orderedlist > li")
This selects all child lis of the element with the id orderedlist and adds the class "blue".
For every onxxx event available, like onclick, onchange, onsubmit, there is a jQuery equivalent.
find() allows you to further search the descendants of the already selected elements
each() iterates over every element and allows further processing.
Another task you often face is to call methods on DOM elements that are not covered by jQuery.
An additional challenge is to select only certain elements from a group of similar or identical ones
filter
This selects all li elements that have a ul element as a child and removes all elements from the selection.
The [expression] syntax is taken from XPath
nd can be used to filter by attributes
anchors that have a name attribute
all selectors were used to select children or filter the current selection.
known as siblings
chaining to reduce the code size and gain better performance

22 more annotations...

22 Mar 13

Rob Butz

=WEB= javascript_jquery

04 Mar 13

Helen Davies

jquery tutorial resources

09 Feb 13

firstname lastname

jQuery Tutorial

25 Jan 13

jeewantha samaraweera

http://api.jquery.com/class-selector/

03 Jan 13

feax2002

javascript jquery read again no evernote no need to copy

27 Dec 12

Rodrigo Azevedo

tutorial jquery

13 Dec 12

Nicholas Olsen

20 Oct 12

Marcel Rossouw

"download the tablesorter plugin"

jquery tutorial css ajax reference development plugins

10 Oct 12

Ken Garland

javascript

04 Sep 12

wdqbupt

need to make sure that we start adding events etc. as soon as the DOM is ready
selects all a elements
$("a") is a jQuery selector
$ itself is an alias for the jQuery "class"
$() constructs a new jQuery object.
select the list itself
$("#orderedlist")
find() allows you to further search the descendants of the already selected elements
$("#orderedlist").find("li") is mostly the same as $("#orderedlist li")
in an .each() function,
this refers to the actual element
siblings
$(this).next() to find the next sibling
$(this).parents("p")
shortcut for the $(document).ready(callback) notation:
$(function() { // code to execute when the DOM is ready });

14 more annotations...

11 Aug 12

sessoms

This is similar to the following code:
```
 <a href="" onclick="alert('Hello world')">Link</a> 
```
The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.
The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.

Claude Falguière

"interface plugin collection"

jquery meta:tutorial basics

02 May 12

T. Karhu

javascript jquery

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

01 May 12

Robert Ensink

Ref-Knowledge SW Engineering Web Technologies javascript framework

17 Apr 12

Noemi A

We don't need to write an onclick for every single element
clean separation of structure (HTML) and behavior (JS)

05 Mar 12

Philippe Marchand

jquery tutorial javascript ajax css web

20 Feb 12

Cinzia Bocchi

jquery tutorial

18 Feb 12

jquery tutorial

11 Feb 12

Jorge Gamba

toread jquery tutorial featured introduction learning toprocess

29 Jan 12

Abhay Bothra

The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.
XPath selector
This selects all li elements that have a ul element as a child
By using end(), the first find() is undone, so we can start search with the next find() at our #faq element, instead of the dd children
The following is a shortcut for the $(document).ready(callback) notation:
```
 $(function() {
```

3 more annotations...

27 Jan 12

hanzhao

as soon as the DOM is ready
$(document).ready(
$("a") is a jQuery selector, in this case, it selects all a elements
therefore $() constructs a new jQuery object.
$ itself is an alias for the jQuery "class"
The click() function we call next is a method of the jQuery object. It binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function when the event occurs.
This is similar to the following code:
```
 <a href="" onclick="alert('Hello world')">Link</a> 
```
The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.
With this in mind, we explore selectors and events a little further.
Find me: Using selectors and events
To get started, we want to select the list itself. The list has an ID "orderedlist". In classic JavaScript, you could select it by using document.getElementById("orderedlist"). With jQuery, we do it like this:
```
 $(document).ready(function() {    $("#orderedlist").addClass("red");  });
```
#orderedlist > li

We want to add and remove the class when the user hovers the li element, but only on the last element in the list.

 $(document).ready(function() {    $("#orderedlist li:last").hover(function() {      $(this).addClass("green");    },function(){      $(this).removeClass("green");    });  });

$("#orderedlist").find("li")
```
 
```
find() allows you to further search the descendants of the already selected elements,
$("#orderedlist").find("li") is mostly the same as $("#orderedlist li").
each() iterates over
Think of a form you would like to reset after you submitted it successfully via AJAX.
$("form")[0].reset();
reset()
in an .each() function, this refers to the actual element
reset() function belongs to the form element and not to the jQuery object
select only certain elements from a group of similar or identical ones. jQuery provides filter() and not()
$("li").not(":has(ul)")
The [expression] syntax is taken from XPath
$("a[name]")
```
 
```
This adds a background color to all anchor elements with a name attribute.
$("a[href*='/content/gallery']").click(function() { // do something with all links that point somewhere to /content/gallery });
select the previous or next elements, known as siblings.
better performance, as '#faq' is only selected once.
Here we use some chaining to reduce the code size
select parent elements (also known as ancestors for those more familiar with XPath).
The following is a shortcut for the $(document).ready(callback) notation:
```
 $(function() {    // code to execute when the DOM is ready  });
```
addClickHandlers
For the document ready event, this refers to the document
This prevents that the click event is applied again and again to the same links, causing a crash eventually.
The easiest way to achieve this is to wrap the callback inside another function:

33 more annotations...

20 Jan 12

Sola Soyombo

02 Dec 11

bipin trpiathi

Query provides filter() and not() f
his selects all li ele

10 Nov 11

etherington

jQuery provides two approaches to select elements

31 Oct 11

Andreas Formiconi

jquery tutorial javascript ajax tutorials css programming

28 Sep 11

Isidro Vila Verde

ltw jquery tutorial

27 Sep 11

Everton Denis

jQuery

06 Sep 11

jacky dwane

jquery ned35

28 Aug 11

Cory Berry

jquery

25 Aug 11

Adriana Farina

jquery

23 Aug 11

rpmehta26

J-Query Tutorials....!!

jquery

09 Aug 11

smruti3

The [expression] syntax is taken from XPath and can be used to filter by attributes
To match only a part of the value, we can use the contains select "*=" instead of an equals ("="):
end(), the first find() is undone, so we can start search with the next find() at our #faq element, instead of the dd children.
$(this).parents("p").addClass("highlight");

2 more annotations...

14 Jul 11

neachtan

0. WEB DESIGN Formation jQuery

01 Jul 11

jquery tutorial javascript ajax css reference web development

28 Jun 11

Jim Finn

jquery tutorial imported

24 Jun 11

Chuck Huie

Javascript jQuery

09 Jun 11

bencosmos

.each() function

Luca Cavallotto

basi di jquery

jquery tutorial

This page just loads the jquery.js library (make sure the URL points to where you stored your copy of jquery! This example assumes that you store it in the same directory as this example file). Two comments indicate where we will expand this template with code.
we need to make sure that we start adding events etc. as soon as the DOM is ready.
To do this, we register a ready event for the document.
$(document).ready(function() { // do stuff when DOM is ready });
$("a") is a jQuery selector, in this case, it selects all a elements
The click() function we call next is a method of the jQuery object. It binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function when the event occurs.
To get started, we want to select the list itself. The list has an ID "orderedlist". In classic JavaScript, you could select it by using document.getElementById("orderedlist"). With jQuery, we do it like this:
```
 $(document).ready(function() {    $("#orderedlist").addClass("red");  });
```
stylesheet with a class "red"
```
$(document).ready(function() {    $("#orderedlist > li").addClass("blue");  }); 
```
This selects all child lis of the element with the id orderedlist and adds the class "blue".
add and remove the class w
hen the user hovers the li element, but only on the last element in the list.
$(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); },function(){ $(this).removeClass("green"); }); });

10 more annotations...

16 May 11

shackledomen

We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.

06 May 11

nYodha

jQuery tutorial

05 May 11

Nawid Tabibi

jquery getting-started tutorial

02 May 11

Jagadeesh Jejji

JQuery

28 Apr 11

Paul Jinks

Looks like a good place to start for jquery.

jquery tutorial

21 Apr 11

Giordano DLZ

Tutorials:
Getting Started with jQue
Basic knowledge of JavaScript and the document object model (DOM) is required
an introduction to the jQuery library
It covers a simple hello world example, selector and event basics, AJAX, FX and usage and authoring of plugins.
a copy of the jQuery library
The jQuery Starterkit
we put jquery.js into the same directory and open starterkit.html and custom.js with your favorite editor and starterkit.html with a browser.
empty html page
<script type="text/javascript" src="jquery.js"></script>
// we will add our javascript code here
This page just loads the jquery.js library
This example assumes that you store it in the same directory as this example file)
we need to make sure that we start adding events etc. as soon as the DOM is ready.
we register a ready event for the document
ready
<a href="">Link</a>
$("a").click
This should show the alert as soon as you click on the link
You should see a pop-up window with "Hello world!" message regardless of what link was clicked.
custom.js file
it selects all a elements
$("a") is a jQuery selector
$ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object.
The click() function we call next is a method of the jQuery object. It binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function when the event occurs.
onclick
The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.
selectors and events
The first uses a combination of CSS and XPath selectors passed as a string to the jQuery constructor (eg. $("div > ul a")).
two approaches to select elements.
The second uses several methods of the jQuery object.
Both approaches can be combined.
ID "orderedlist"
document.getElementById("orderedlist")
$("#orderedlist")
you should see that the first ordered list has a red background. The second list is not modified.
the child elements of this list
$("#orderedlist > li")
This selects all child lis of the element with the id orderedlist and adds the class "blue".
.hover
therefore $("#orderedlist").find("li") is mostly the same as $("#orderedlist li").
find() allows you to further search the descendants of the already selected elements
[0].reset();
Also note that, since the reset() function belongs to the form element and not to the jQuery object, we cannot simply call $("form").reset() to reset all the forms on the page.
While filter() reduces the selection to the elements that fit the filter expression, not() does the contrary and removes all elements that fit the expression.
show() and hide().

45 more annotations...

31 Mar 11

chew barkla

$ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object.

28 Mar 11

ntd63t

$("a").click(function() { alert("Hello world!"); });
onclick="alert('Hello world')"
document.getElementById("orderedlist")
$("#orderedlist")
add some more classes to the child elements
$("#orderedlist > li").addClass("blue");

4 more annotations...

15 Mar 11

kwalleni

jQuery

$ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object

getElementById("orderedlist"). With jQuery, we do it like this:

 $(document).ready(function() {    $("#orderedlist").addClass("red");  });

```
$("#orderedlist > li").addClass("blue");  }); 
```
This selects all child lis of the element with the id orderedlist and adds the class "blue".
find() allows you to further search the descendants of the already selected elements,
each() iterates over every element and allows further processing. Most methods, like addClass(), use each() themselves.
to select only certain elements from a group of similar or identical ones. jQuery provides filter() and not() for this. While filter() reduces the selection to the elements that fit the filter expression, not() does the contrary and removes all elements that fit the expression. Th
The [expression] syntax is taken from XPath and can be used to filter by attributes.
To match only a part of the value, we can use the contains select "*=" instead of an equals ("="):

6 more annotations...

08 Mar 11

khanh vo

Tutorials:Getting Started with jQuery

Learn Tutorials

03 Mar 11

jquery delicious

23 Feb 11

Bryan Bishop

tutorial javascript reference programming tutorials rails

14 Feb 11

tanzhongping

jscript jquery

08 Feb 11

ment).ready(function() { $("#orderedlist").addClass("red")
$("#large").tablesorter({ // striping looking widgets: ['zebra'] });

05 Feb 11

Justin Lowery

Until now, all selectors were used to select children or filter the current selection. There are situations where you need to select the previous or next elements, known as siblings. Think of a FAQ page, where all answers are hidden first, and shown, when the question is clicked. The jQuery code for this:
```
 $(document).ready(function() {    $('#faq').find('dd').hide().end().find('dt').click(function() {      $(this).next().slideToggle();    });  });
```

14 Jan 11

Tip Ng

This guide is an introduction to the jQuery library. Basic knowledge of JavaScript and the document object model (DOM) is required. It starts from ground up and tries to explain details where necessary. It covers a simple hello world example, selector and

development jquery tutorial learning

12 Jan 11

sobtiankit

$ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object
each() iterates over every element and allows further processing

07 Jan 11

hard stone

To start, we need a copy of the jQuery library, which we can get from the main download page. The jQuery Starterkit provides some markup and CSS to work with. After downloading and extracting its content we put jquery.js into the same directory and open starterkit.html and custom.js with your favorite editor and starterkit.html with a browser.
As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.
To do this, we register a ready event for the document.
```
 $(document).ready(function() {    // do stuff when DOM is ready  }); 
```
$("a") is a jQuery selector, in this case, it selects all a elements. $ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object. The click() function we call next is a method of the jQuery object. It binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function when the event occurs.

This is similar to the following code:

 <a href="" onclick="alert('Hello world')">Link</a>

The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.
Find me: Using selectors and events

jQuery provides two approaches to select elements. The first uses a combination of CSS and XPath selectors passed as a string to the jQuery constructor (eg. $("div > ul a")). The second uses several methods of the jQuery object. Both approaches can be combined.
To try some of these selectors, we select and modify the first ordered list in our starterkit.
To get started, we want to select the list itself. The list has an ID "orderedlist". In classic JavaScript, you could select it by using document.getElementById("orderedlist"). With jQuery, we do it like this:
```
 $(document).ready(function() {    $("#orderedlist").addClass("red");  }); 
```
The starterkit provides a stylesheet with a class "red" that simply adds a red background. Therefore, when you reload the page in your browser, you should see that the first ordered list has a red background. The second list is not modified.
Now lets add some more classes to the child elements of this list.
$(document).ready(function() { $("#orderedlist > li").addClass("blue"); });
This selects all child lis of the element with the id orderedlist and adds the class "blue".
You can find a complete list of all events in the jQuery Events Documentation.
With those selectors and events you can already do a lot of things, but there is more.
$(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).append( " BAM! " + i ); }); });
find() allows you to further search the descendants of the already selected elements, therefore $("#orderedlist").find("li") is mostly the same as $("#orderedlist li").
each() iterates over every element and allows further processing. Most methods, like addClass(), use each() themselves.
In this example, append() is used to append some text to it and set it as text to the end of each element.
Another task you often face is to call methods on DOM elements that are not covered by jQuery. Think of a form you would like to reset after you submitted it successfully via AJAX.
```
 $(document).ready(function() {    // use this to reset a single form    $("#reset").click(function() {      $("form")[0].reset();    });  }); 
```
An additional challenge is to select only certain elements from a group of similar or identical ones. jQuery provides filter() and not() for this. While filter() reduces the selection to the elements that fit the filter expression, not() does the contrary and removes all elements that fit the expression. Think of an unordered list where you want to select all li elements that have no ul children.
$(document).ready(function() { $("li").not(":has(ul)").css("border", "1px solid black"); });

Maybe you want to select all anchors that have a name attribute:

 $(document).ready(function() {    $("a[name]").css("background", "#eee" );  });

Until now, all selectors were used to select children or filter the current selection. There are situations where you need to select the previous or next elements, known as siblings. Think of a FAQ page, where all answers are hidden first, and shown, when the question is clicked. The jQuery code for this:
```
 $(document).ready(function() {    $('#faq').find('dd').hide().end().find('dt').click(function() {      $(this).next().slideToggle();    });  }); 
```
Within the click handler, the function passed to the click() method, we use $(this).next() to find the next sibling starting from the current dt. This allows us to quickly select the answer following the clicked question.
In addition to siblings, you can also select parent elements (also known as ancestors for those more familiar with XPath). Maybe you want to highlight the paragraph that is the parent of the link the user hovers. Try this:
$(document).ready(function(){ $("a").hover(function(){ $(this).parents("p").addClass("highlight"); },function(){ $(this).parents("p").removeClass("highlight"); }); });
For all hovered anchor elements, the parent paragraph is searched and a class "highlight" added and removed.
Lets go one step back before continuing: jQuery is a lot about making code shorter and therefore easier to read and maintain. The following is a shortcut for the $(document).ready(callback) notation:
$(function() { // code to execute when the DOM is ready });

23 more annotations...

23 Dec 10

roger coryell

jquery

10 Dec 10

Ezequiel Lavaca

jquery

05 Nov 10

albertomoratilla

jquery ajax

31 Oct 10

Taylor Davis

jQuery tutorial

29 Oct 10

Travis Taylor

delicious jquery javascript tutorial ajax tutorials reference webdev css delicious_import

27 Oct 10

jason cooper

javascript jQuery tutorial

26 Oct 10

vteixeira

jquery tutorial

19 Oct 10

Entro Adun

jquery

16 Oct 10

Jesse Bruton

Writing plugins towards end --- Formatting content loaded by Ajax after it's loaded.

ajax jquery tutorial

A very common problem encountered when loading content by Ajax is this: When adding event handlers to your document that should also apply to the loaded content, you have to apply these handlers after the content is loaded. To prevent code duplication, you can delegate to a function. Example:

02 Sep 10

Joyce Lima

jquery javascript tutorial ajax reference css tutorials

01 Sep 10

greenup greenup

javascript

27 Jul 10

Ralf Hafner

js jquery tutorial beginners

10 Jul 10

Darren Mc Adam

jQuery code

09 Jul 10

Giovanni Lofrumento

jquery

15 Jun 10

Asraf Khan

JQuery Basic Tutorial

JQuery Tutorial

10 Jun 10

Sven Wolfermann

jquery tutorial ajax webdev reference

20 May 10

Andreas Klinger

jquery plugin tutorial

$("#rating a").click(function(e){
// stop normal link click e.preventDefault();

16 May 10

Prakash P

Unsorted Bookmarks

14 May 10

$(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });

jquery

11 May 10

rachelaudrey

jquery javascript

08 May 10

Alex Semenyuta

ajax javascript jquery tutorial

25 Apr 10

Danny Powell

jquery tutorial

17 Apr 10

belkthornberg

html jquery javascript tutorial

15 Apr 10

Luc Juggery

"This selects all child lis of the element with the id orderedlist and adds the class "blue"."

jquery

11 Apr 10

Steve King

. The list has an ID "orderedlist"

09 Apr 10

itzgeoff

jquery

07 Apr 10

development documentation library jquery

02 Apr 10

Sanjay Mysoremutt

jqueryui delicious

31 Mar 10

Xlaze .

jquery tutorial

12 Feb 10

Andy Kaplan-Myrth

The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.

jquery javascript ajax tutorial web

18 Jan 10

miguel ibarra

jquery tutorial

11 Jan 10

alex g

jquery tutorial

06 Jan 10

xkeshav

$(function()

jQuery_Tutorials

16 Dec 09

adrian liem

for:landak

14 Dec 09

E Millfran

jquery tutorial

12 Dec 09

Johannes Kuhs

jquery

02 Nov 09

murat sahin

17 Oct 09

shaoshuai0102

jquery javascript

11 Oct 09

Steven Wadsworth

jquery javascript tutorial ajax tutorials webdev reference css

08 Oct 09

Sean Lynch

jquery tutorial

07 Oct 09

Mark Schulz

This guide is an introduction to the jQuery library. Basic knowledge of JavaScript and the document object model (DOM) is required. It starts from ground up and tries to explain details where necessary. It covers a simple hello world example, selector and

jQuery javascript tutorial ajax tutorials webdev reference css

Tutorials:Getting Started with jQuery - jQuery JavaScript Library - The Diigo Meta page

Find me: Using selectors and events

Would you like to comment?

Top Tags

Check out another URL