jQuery Selectors – How to select by Id, by Element, by Class

“Working with jQuery is easier after one masters its selectors.”
Paulo Coelho
There are three main ways to select an element in jQuery – by element, by class and by tag. Thus, I have decided to create a simple web app, which allows you to select anything at it, once you know its tag name, its class name or its id. You have to write them in the initial textarea here and press one of the three divs, named click me:


Thus, if you write id_div_3, you select Class and you press the div with the nice name Click Me – Red, most probably nothing would happen. Because you have to select Id 🙂 And then the third div would be colored in Red. You may play a little with the two colors to get something like this:


Or even scarier. 🙂

Pretty much, the idea of the article is to remember how to select the three types of selectors jQuery and to make sure that I can do it.

Last story, before giving the code and GitHub – use this code only on a local host, because it uses an EVAL function in it. And EVAL is EVIL.

So, here is the html:

And the js:

The css, together with the whole project is available at GitHub.

Tagged with: , ,