www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery id, class and Element Selectors Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
The #id selector
The most basic and the most commonly used jQuery selector is the #id selector. As its name suggests it is used to find the elements based on their IDs. It is the same selector we saw in our "Hello world" example.

The #id selector uses the ID attribute of an HTML tag to find the desired element. To locate an element with a specific ID, we write a hash character, followed by the ID of the element we wish to locate.

Following example uses the #id selector to find an element in an HTML web page:

<div id = "idExample" ></div>
<script type = "text/javascript" >
$ ( function ()
{
        $ ( "#idExample" ). text ( "This is an example of the id selector " );
});
</script>

It is a good practice to keep the IDs in an HTML document unique, so that we may easily locate the desired element.

The .class selector
We can also find Elements with a specific class by writing a . character followed by the name of the class.

Here is an example:

<div class = "hw" > Hello World </div> <br>
<div class = "ex" > Test String </div><br>
<div class = "hw" > Hello World </li>

<script type = "text/javascript" >
$ ( function ()
{
        $ ( ".hw" ). css ( "font-weight" , "bold" );
});
</script>

The above example finds the elements of the hw class and then adds some CSS to them.

The element selector
We can also match elements based on their tag names. For example we can find all the <p> elements using the following line of code:

$("p");

Next >>> Lesson No. 8: jQuery Attribute Selectors







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.