TechiWarehouse.Com


Top 3 Products & Services

1.
2.
3.

Dated: Dec. 18, 2012

Related Categories

JavaScript Programming

In this jQuery tutorial you can see the things that sets jQuery apart from other libraries. jQuery methods are divided in multiple groups that, when they are combined make his API.


JQUERY API
The thing that sets jQuery apart from other libraries are his very simple, yet very powerful methods. jQuery methods are divided in multiple groups that, when they are combined make his API.

  • jQuery core
  • Selectors
  • Attributes
  • Moving through DOM
  • Manipulation
  • CSS
  • Events
  • Effects
  • AJAX
  • Utilities


JQUERY Core
jQuerys core represents his main jQuery object which we have talked about. It is used for catching elements from DOM by using selectors. It can be used in two ways.

1
2
3
4
5
// through jQuery names
jQuery();
 
// or through the mentioned dollar sign
$();

 I doesn’t matter which way you are going to use, but practice shows that it is standard to use the dollar sign because of easier recognition in the code.
But, sometimes it is necessary to have another library on your pages next to jQuery. Because most other libraries also use the dollar sign as their main object this could present a problem because of the conflict between the two libraries. Which brings us to jQuerys .noConflict() method, that allows undisturbed use of jQuery together with any other library that the dollar object. Because we can see from the above stated that jQuery can be called in two ways, this method disables the use of the dollar object. In other words, after the use of this function you will call jQuery through it’s name while you will call other libraries using the dollar object.
Everything you need to do is to attach the .noConflict() method on the dollar sign before any use by the other libraries.

1
2
$.noConflict();
// After this you can use the dollar sign for other libraries


Selectors

jQuery Tutorial

The browser and every HTML page is loaded in the memory as connected objects with specific properties. It is called a DOM (Document Object Model). Every operation in JavaScript begins by choosing the desired elements that you wish to work with. So, the access to an object is the base of any operation on it.

As we mentioned before, jQuery uses it’s dollar object for forwarding HTML elements, over which it performs it’s functions. This is done by using selectors. By supporting all CSS 1-3 selectors, as by adding his own, jQuery offers a very powerful group of tools used for ’’catching’’ elements in a document.

Let’s start with the basic elements. Everything you need to do to grab a certain element (or more of them) , is to enter it’s name between the quotes inside the dollar $() function as you would do in a CSS document.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// catching elements with id
$("#test");
 
// catching elements with class
$(".heading");
 
// catching elements types
$("div");
$("img");
 
// catching more complex elements
$("div.container ul li.over a");
 
// catching multiple elements at the same time
$("selector1, selector2, selector3, ...");
 
/* catching elements with certain attributes
(you have to be careful if you are putting selectors between quotes to wrap the attribute value with single quotes, and reverse
) */
$("form[name=name]");
 
// catching all elements in a document $("*");

 

So no matter what CSS selector you are using, jQuery will find and select he wanted element. Next to the standard CSS selectors, jQuery has added their selectors for easier working with elements.

 

:CHECKED
Selects all given elements that are checked (those elements can be: checkbox and radio button).

1
$("input[type="checkbox"]:checked");

The stated example will select every first <input> that is checkbox and is checked.

:CONTAINS()
Selects all given elements that contain searched text.

1
$("div:contains('John')");
The above stated example will select every <div> element that contains the text John.

:EMPTY
Selects all given elements that don’t have any elements in them, or text.

1
$("div:empty");
The above stated example will select every <div> element that doesn’t contain any element or text.

:HAS()
Selects elements that contain at least one element.

1
$("div:has(p)");
The above stated example will select every <div> element that have the <p> element in them or any other element they contain not just as child element.

:NOT()
Selects elements that don’t match the given selector.

1
$("div:not(.myclass)");
The above stated example will select every <div> element that doesn’t have a .myclass class.

:FIRST-CHILD
Selects elements that are the first child of their parent-a.

1
$("div span:first-child");

The above stated example will select every first <span> element inside every <div> element.


:EQ()
Selects given elements in the order they show up (index starts with 0).

1
$("td:eq(2)");

The above stated example will select the third <td> element inside a table.


:NTH-CHILD()
Selects an element or elements that are being searched by the given order inside a parent. Index for the search can be a number or the options even or odd, or all even and odd elements in their order

Remark: this is the only case where the indexing starts with 1

1
2
$("div:nth-child(3)");
$("div:nth-child(even)");

The first example will select all child elements that appear in order inside every <div> element, while the other one will select all pair child elements inside all <div> elements.

It is possible to combine all stated selectors. Example:

1
$("div.description:has(p:not(.intro))");

In the given example all <div>elements with the class .description and that contain <p> elements and don’t have a class .intro will be selected.

 

This was the first part of the lesson about jQuery read the next part of the jQuery tutorial tomorrow.

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!


Previous Article

Next Article