Syed Abdul Baqi

jQuery Selectors

Posted on: December 27, 2009

jQuery is a JavaScript framework library, which makes the life of the web developer easier. In this tutorial I will focus on the implementation and uses of jQuery selectors. jQuery follows CSS style of referring to an element. Now I will try to give some list of examples below, which illustrates jQuery referring different kinds of elements.

HTML Code:

<div id="myDiv">Hello-1</div>
<div class="myDiv">Hello-2</div>
<div id="parentDiv"><div id="childDiv">Hello-3</div></div>
<div class="myDiv">Hello-4</div>

jQuery Code:

1. $("#myDiv")[0].innerHTML; returns "Hello-1"
2. $(".myDiv")[0].innerHTML; returns "Hello-2"
3. $("#childDiv")[0].innerHTML; returns "Hello-3"
4. $("#parentDiv > div")[0].innerHTML; returns "Hello-3"
5. $(".myDiv")[1].innerHTML; returns "Hello-4"
6. $("div")[0].innerHTML; returns "Hello-1"

These are just few basics examples for jQuery selector. There are many more ways in which the selectors can be used for accessing HTML elements. I will try to add more as I get time.

Comments are welcomed….


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: