Child (E > F)

Select all elements matched by F that are children of an element matched by E.

$('li > ul') selects all <ul> elements that are children of an <li> element
$('.myclass > code') selects all <code> elements that are children of an
element with the class myclass

As a CSS selector, the child combinator is supported by all modern web browsers
including Safari, Mozilla/Firefox, Opera, Chrome, and Internet Explorer 7 and
above but notably not by Internet Explorer versions 6 and below.

The child combinator (E > F) can be thought of as a more specific form of the
descendant combinator (E F) in that it selects only first-level descendants. Therefore,
in the following HTML code, the <img> element is a child only of the <span> element:

<div id="container">
<div id="inner">
<p>
<span><img src="example.jpg" alt="" /></span>
</p>
</div>
</div>

Descendant (E F)

Select all elements matched by F that are descendants of an element matched by E.
Examples

1- $('#container p') selects all paragraph elements that are descendants of an element that has an ID of container
2- $('a img') selects all <img> elements that are descendants of an <a> element

Descendants of an element are that element's children, grandchildren, great-grandchildren, and so on.

For example, in the following HTML code, the <img> element is a descendant of the <span>, <p>, <div id="inner">, and <div id="container"> elements:
<div id="container">
<div id="inner">
<p>
<span><img src="example.jpg" alt="" /></span>
</p>
</div>
</div>

Class (.tagclass)

Select all elements that have a class of 'tagclass'.
Examples

1- $('.tagclass') selects all elements that have a class of tagclass
2- $('p.tagclass') selects all paragraphs that have a class of tagclass
3- $('.tagclass.otherclass') selects all elements that have a class of both tagclass and otherclass

For class selectors, jQuery uses JavaScript's native getElementsByClassName() function if the browser supports it. Otherwise, it checks the .className attribute of each element.

ID (#tagid)

To select the unique element with an ID equal to tagid.

Examples

1- $('#tagid') selects the unique element with id="tagid"
2- $('p#tagid') selects a single paragraph with an ID of tagid

2nd one is showing how the unique element

will be selected in case if more than one element
has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM.

Element (Tag)

To select all those elements that have Tag specified in as Tag_Name. It is equalient to getElementsByTagName() function in JavaScript.
Examples

$('div') selects all elements with a tag name of div of the page

$('em') selects all elements with a tag name of em of the page

jQuery Plug-in API

The Great thing with jQuery is that programmers need not confine ourselves to built-in functionality too much. The plug-in API that is part of jQuery allows us to supplement the competences already present with new ones that suit application’s needs. Even in the small script we've written here, we've found use for a plug-in.

jQuery.fn.toggleNext = function() {
this.toggleClass('arrow-down')
.next().slideToggle('fast');
return this;
};

This code defines a new .toggleNext() jQuery method that slides the following element open and shut. You can now trigger new method later when needed.

$('#page-contents > a.toggler).click(function() {
$(this).toggleNext();
return false;
});

AJAX Functions

Today’s web sites employ techniques to load content when requested without
a page refreshing jQuery permits us to accomplish this with ease. AJAX methods
initiate these content requests and allow us to monitor their progress.

$('#introduction > h2 a').click(function() {
$('#introduction').load(this.href);
return false;
});

Also alternatively .load() method allows developers to get another HTML document from the server and place in it in the existing document all with one line of code.

Effect Functions

Event functions will allow to react to user input while the effect methods let us do so with style. For example instead of immediately hide or show elements you can do so with an animation.

this.toggleClass('arrow-down')
.next()
.slideToggle('fast');

Event Functions

You we can modify the page at your will. You will need jQuery event methods to react to user input and making changes at the appropriate time. A simple big example is:

$('#introduction > h2 a').click(function() {
$('#introduction').load(this.href);
return false;
});

DOM Traversal/Operations Functions

From time to time we have jQuery objects that reference a set of Document Object Model (DOM) of JavaScript elements already, but we need to perform an action on a different, related set of elements. So DOM traversal techniques are useful. For example:

this.toggleClass('arrow-down')
.next()
.slideToggle('fast');

Judgment of elements is not enough but we want to be able to alter them as well. Such changes can be as straightforward as changing a single attribute.

$chapterTitle.attr('id', chapterId);

Here we modify the ID of the matched element on the fly.
every so often the changes are further-reaching:

$('<div id="page-contents"></div>')
.prepend('<a class="toggler" href="#">Page Contents</a>')
.append('<div></div>')
.prependTo('body');

This part of the script illustrates that the DOM manipulation process can not only alter elements in place but also remove, shuffle, and insert them.

Selector Terminology (Itemization)

Before you can start with HTML document, you need to locate the applicable portions. In our script, you sometimes use a approach to find an element like:

$('#introduction')

This expression creates a new jQuery object that references the element with the ID introduction. On the other hand, sometimes you might require a more intricate selector.

$('#introduction > h2 a')

Here I produce a jQuery object referring to potentially many elements. With this Expression elements are included if they are anchor tags that are descendants of <h2> elements, which are themselves children of an element with the ID introduction.

How to write jQuery Scripts

Usual you can write your code in an empty, JavaScript file that we included from the HTML using <script src="do_little.js" type="text/javascript"></script>.

jQuery.fn.toggleNext = function() {
this.toggleClass('arrow-down')
.next().slideToggle('fast');
return this;
};
$(document).ready(function() {
$('<div id="page-contents"></div>')
.prepend('<a class="toggler" href="#">Page Contents</a>')
.append('<div></div>')
.prependTo('body');
$('.content h2').each(function(index) {
var $chapterTitle = $(this);
var chapterId = 'chapter-' + (index + 1);
$chapterTitle.attr('id', chapterId);
$('<a></a>').text($chapterTitle.text())
.attr({
'title': 'Jump to ' + $chapterTitle.text(),
'href': '#' + chapterId
})
.appendTo('#page-contents div');
});

$('#page-contents > a.toggler').click(function() {
$(this).toggleNext();
return false;
});
$('#introduction > h2 a').click(function() {
$('#introduction').load(this.href);
return false;
});
});