JQUERY Selectors and Filters Basics

As the name implies JQUERY Selectors and Filters do as they are supposed to do. They select content from document so that the content can be manipulated using other functions may be with JQUERY function or other JavaScript functions.

In a brief the JQUERY selector returns an array of objects that matched the selection criterion and the JQUERY filters are there to refine the selection the selector returns.

The content that the JQUERY objects return is not DOM elements but JQUERY elements wrapped by JQUERY objects so then they can be further processed using lots of predefined JQUERY functions.

The most important features of using JQUERY selectors and filters is that they are build as CSS syntax, that makes then easily understandable as CSS is most commonly used and everybody is familiar with it.  Here are some selectors that directly use some CSS part.

Such as The tagname selector finds all the elements within the tagname, #identifier selector finds elements with ID of identifier, .className selector finds the elements that have the class attribute with the value of className, tag.className finds the tag elements that have a class with the value of className, tag#id.className finds the elements of specific tag that has a ID value of id and a class attribute with class value of className. And * finds all the elements on the page.

JQUERY vs DOM: an example

Here is an example that helps to show that how easy JQUEY makes to find elements. First just consider the following HTML file:

<html> <head> <title>My JQUERY Example</title> </head> <body> <div id = “container”> Here goes some list of element: <ul id=”ullist”> <li class=”first”>Element 1</li> <li class=”first”>Element 2</li> <li class=”second”>Element 3</li> <li class=”third”>Element 4</li> <li class=”third”>Element 5</li> <ul> <p>a test paragraph 1</p> <p>a test paragraph 2</p> <p>a test paragraph 3</p> </div> <body> </html>

This is a very simple HTML file, now if we want process it further then we have find the content first. Now the code for finding all elements with “ullist” tag in DOM is as follow: document.getElementById(“ullist”); In JQUERY the code will be: $(“#ullist”); To find all <p> tags In DOM : document.getElementByTagName(“p”); In JQUERY: $(“p”); Now if we want to get all the class “first” form all the <li> tags then it will be more complex in DOM. In DOM first all the <li> tag needs to find out using getElementBYTagName, then with a for loop have to compare all the class with “first” to find out the which class value is “first”. On the other hand it is very easy in JQUERY. In JQUERY the code will be: $(“li.first”);

Common Features of JQUERY

JQUERY is gaining its popularity day by day. Its because of its simplicity and the features it provides. The JQUERY common features can be sorted like below.

Core Functionality Category

This feature is extended up to the implementation of the JQUERY functions and also some commonly used utility. 

Selection and Traversal Category

JQUERY provides the features for finding contents in the document and also navigating among the contents. These features are categorized as Selection and Traversal Category.

Manipulation and CSS Category

JQUERY has functions for working with CSS and also for changing and editing the documents. This is one the most powerful feature that makes JQUERY so popular.

Event Category

The event category simplifies the procedure of working with modern DOM events and also provides some event helping functions.

Effect

This is also the other popular feature of JQUERY. It contains the showing and hiding content, animation like fading in and out , moving objects etc.

Ajax

JQUERY provides utilities for working with ajax. This includes loading content from pages, working with JSON data etc. 

UI Category

It is the Abbreviation of User Interface. It’s an official plug in for providing the commonly used interface widgets 

Extensibility

It covers the construction of JQUERY plug ins that enhance the functionality of the base library.

Your First JQUERY webpage : an example with explanation

Now to prove that JQUERY works on your pc you write a simple program and we run it in different browser and see what happens. Our program is to show a alert when the page loads.

Program for Showing alerts when the web page loads

First step:

First of all we have to include a reference to the jQUERY library in our web page. For this we insert a script reference to the jQUERY. To do this insert the following code in <head></head> section after <title></title>.

<script type="text/javascript" src="jquery-1.x.x.x.js"> </script>

On the src attribute provide the full path where your save the downloaded jQUERY library. Also provide the name as downloaded copy.

Second Step:

The second step is to select the event handler that triggers when the page load complete. Normally the traditional javascript code we use for this is as follow

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>First jQUERY Example</title> </head> <body> <script type="text/javascript"> window.onload = whenload; function whenload(){                 alert("page loaded");                 }                 </script> </body> </html>

But the problem with this code is that this event trigger when all the page content such as image are fully loaded. So when you have larger website that will be a problem. Also it’s very hard to run multiple onload functions too, you need use DOM event model which different for different browser. But using jQUERY we can do it very easily. JQUERY has an event that runs when the DOM of the page is ready. So no need to load all the contents to run this event, Just DOM of the page need to be ready. It is the document.ready event.

So now you can write your first jQUERY statement. jQUERY object is represented by $(dollar) sign.

<script type="text/javascript"> $("document").ready(function() {      alert("page loaded");         });     </script>

What will happen here we can explain. With $ sign we write the jQUERY object and calling the function with parameter of document and then .ready and passing an anonymous function for simplification and it will show a message page loaded when DOM is ready.

Another advantage of this document.ready event is that you can run it for multiple times independently. Now add this script tag.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title> First jQUERY Example </title>     <script type="text/javascript" src=" jquery-1.x.x.x.js "></script>     <script type="text/javascript">         $("document").ready(function() {             alert("The page just loaded!");         });     </script> </head> <body> </body> </html>

 

Be sure your src attribute name is ok and you put your js formatted library file on the root folder. Otherwise you need to provide the full path.