Detecting whether an element is present with jQuery and Javascript

JQuery is an interesting web development tool. It allows for customization, animation, effects, and even minor UI development. I prefer JQuery to flash, as it doesn't require a "player" which may or may not be installed on the users system. As long as the user allows javascript, the tricks I'll be teaching work cross browser, and cross platform (Mac, windows, iphone, android.)

The first step to using JQuery is to embed the library into your html page. There are two ways of doing this.
1. Embed directly from google if internet access is available.
2. Download the script library and include it in your files if working from your desktop without internet.

I prefer to use the script right off Google's code library. I prefer to do so because it not only saves your server bandwidth, but it also allows for very quick response, and less storage space on your ftp.

https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

This link can be embedded using the external javascript embed.

Now that we have jQuery embedded, we can begin using the libraries extensive tools. Let's say we want to check whether an element is on the page. If it is, we want to throw an alert. Let's use jQuery to do so. First, we must include the external script, in the same way we did above with JQuery.

Now, here is what the script file looks like. The first step, is to instantiate JQuery.

$(document).ready(function(){

});

This is needed for Jquery to loop through your script. Without this starting statement, JQuery will not work. Next, we will use Javascripts length property to detect whether an element is present.

$(document).ready(function(){
if($('#DivElement').length==1){
alert("the Div is present")
}else{
alert("the Div is not present")
}
});

This is a very simple script, and it doesn't really use JQuery's tools extensively, but it does allow for an element to be detected on screen. Why would this be useful? Let's say we have a template, and on some parts of the template there are buttons that we want to throw alerts on. Instead of including this script on every page, we merely include it in our template and let javascript do the detecting for us.