This link has been bookmarked by 312 people . It was first bookmarked on 06 Apr 2007, by XO Q.
-
17 Apr 13
-
28 Mar 13
-
$("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 Mar 13
-
04 Mar 13
-
09 Feb 13
-
25 Jan 13
jeewantha samaraweerahttp://api.jquery.com/class-selector/
-
03 Jan 13
-
27 Dec 12
-
13 Dec 12
-
20 Oct 12
Marcel Rossouw"download the tablesorter plugin"
-
10 Oct 12
-
04 Sep 12
-
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, -
thisrefers 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 });
-
-
11 Aug 12
-
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.
-
-
02 May 12
-
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
-
17 Apr 12
-
We don't need to write an onclick for every single element
-
clean separation of structure (HTML) and behavior (JS)
-
-
05 Mar 12
-
20 Feb 12
-
18 Feb 12
-
11 Feb 12
-
29 Jan 12
-
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 firstfind()is undone, so we can start search with the nextfind()at our #faq element, instead of the dd children -
The following is a shortcut for the $(document).ready(callback) notation:
$(function() {
-
-
27 Jan 12
-
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,thisrefers 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()andnot() -
$("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,
thisrefers 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:
-
-
20 Jan 12
-
02 Dec 11
-
Query provides
filter()andnot()f -
his selects all li ele
-
-
10 Nov 11
-
jQuery provides two approaches to select elements
-
-
31 Oct 11
-
28 Sep 11
-
27 Sep 11
-
06 Sep 11
-
28 Aug 11
-
25 Aug 11
-
23 Aug 11
-
09 Aug 11
-
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 firstfind()is undone, so we can start search with the nextfind()at our #faq element, instead of the dd children. -
$(this).parents("p").addClass("highlight");
-
-
14 Jul 11
-
01 Jul 11
-
28 Jun 11
-
24 Jun 11
-
09 Jun 11
-
.each()function
-
-
-
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"); }); });
-
-
16 May 11
-
We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.
-
-
06 May 11
-
05 May 11
-
02 May 11
-
28 Apr 11
-
21 Apr 11
-
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
-
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
-
<!-- we will add our HTML content 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()andhide().
-
-
31 Mar 11
-
$itself is an alias for the jQuery "class", therefore$()constructs a new jQuery object.
-
-
28 Mar 11
-
$("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");
-
-
15 Mar 11
-
$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, likeaddClass(), useeach()themselves. -
to select only certain elements from a group of similar or identical ones. jQuery provides
filter()andnot()for this. Whilefilter()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 ("="):
-
-
08 Mar 11
-
03 Mar 11
-
23 Feb 11
-
14 Feb 11
-
08 Feb 11
-
ment).ready(function() { $("#orderedlist").addClass("red")
-
$("#large").tablesorter({ // striping looking widgets: ['zebra'] });
-
-
05 Feb 11
-
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 NgThis 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
-
12 Jan 11
-
$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
-
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. Theclick()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, likeaddClass(), useeach()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()andnot()for this. Whilefilter()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 Dec 10
-
10 Dec 10
-
05 Nov 10
-
31 Oct 10
-
29 Oct 10
-
27 Oct 10
-
26 Oct 10
-
19 Oct 10
-
16 Oct 10
Jesse BrutonWriting plugins towards end --- Formatting content loaded by Ajax after it's loaded.
-
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
-
01 Sep 10
-
27 Jul 10
-
10 Jul 10
-
09 Jul 10
-
15 Jun 10
-
10 Jun 10
-
20 May 10
-
$("#rating a").click(function(e){
-
// stop normal link click e.preventDefault();
-
-
16 May 10
-
14 May 10
-
11 May 10
-
08 May 10
-
25 Apr 10
-
17 Apr 10
-
15 Apr 10
Luc Juggery"This selects all child lis of the element with the id orderedlist and adds the class "blue"."
-
11 Apr 10
-
. The list has an ID "orderedlist"
-
-
09 Apr 10
-
07 Apr 10
-
02 Apr 10
-
31 Mar 10
-
12 Feb 10
Andy Kaplan-MyrthThe 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.
-
18 Jan 10
-
11 Jan 10
-
06 Jan 10
-
16 Dec 09
-
14 Dec 09
-
12 Dec 09
-
02 Nov 09
-
17 Oct 09
-
11 Oct 09
-
08 Oct 09
-
07 Oct 09
Mark SchulzThis 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
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.