One of the cool feature from JQuery is the DOM selector. In javascript, when you want to reference an object, you can refer the object either based on ID or class name of the object by using the built in function such as getElementById or getElementByTagName or getElementsByClassName. Let's say you want to hide an item from ul li list contains class named 'star'.

<ul id='ulmenu'>
       <li class='active'>Mango</li>
       <li class='not-active'>Banana</li>
       <li class='active'>Apple</li>
       <li class='active'>Orange</li>
</ul>

If you want to remove the Banana item contains not-active class. You will need to perform a while loop in javascript like below.

var list = document.getElementById('ulmenu');
for ( var = i; i < list.length; i++ ) {
      if ( list[i].class == 'not-active' ) {
           list[i].parentNode.removeChild(list[i]);
      }
}

Based on above example code, you can see that you need to reference the object and perform a for loop to match the item list contains a class name 'not-active'. By using JQuery, you can skip all those lines using one line only like below.

$("#ulmenu li.not-active").remove();

Selector Options

You can have different ways on performing different selection such as select object based on their ID, class name, partial id, attribute, html object tag or event multiple selections.

//Select by id
$("#myID");

//Select by class
$(".myClassName");

//Select by html object tag
$("body");

//Select by attribute href equals to www.google.com
$("a[href='www.google.com']");

//Select by attribute href begin with value www
$("a[href^='www']");

//Select by attribute href begin with value www or equal to www
$("a[href|='www']");

//Select by attribute href begin with value www
$("a[href^='www']");

//Select by attribute href contains with value www
$("a[href*='www']");

//Select by attribute href contains the word value www. This is good for searching word in sentences that have spaces.
$("a[href~='www']");

//multiple selection
$("#myID, .myClass");

Selector Position

Another advantage you can achieve is the selector position. You can specify the position scope as below:

//This will return the list of LI with even positions ex: 1,3,5 positions and so on
$("ul li:odd");

//This will return the list of LI with even positions ex: 2,4,6 positions and so on
$("ul li:even");

//This will return the first position of LI object
$("ul li:first");

//This will return the last position of LI object
$("ul li:last");

//This will return the last position of LI object
$("ul li:last");

//This will return the list of LI items that is greater or equal to 5.
$("ul li:gt(5) ");

//This will return the list of LI items that is less or equal to 4.
$("ul li:lt(4)");

//This will return the 6th position of LI object
$("ul li:eq(6)");

Form inputs selector

Those are the filters used to get access to input form objects.

//Select all elements of buttons
$("input:button");

//Select all elements of text input
$("input:text");

//Select all elements of submit input
$("input:submit");

//Select all elements of radio input
$("input:radio");

//Select all elements of file input
$("input:file");