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 Attribute 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
In the previous lesson we learned how to find elements in a page using their id, class or element name. In jQuery we can actually find elements based on any kind of attribute. In this lesson we will learn to find elements based on their different attributes.

Finding elements with a specific attribute
It is fairly simple to find an element based on a specific attribute. The following example finds an element, that has an attribute named title:

<div title = "ExAttribute" > Hello World! </div><br />
<div> Some Text </div><br />
<div title = "again" > Hello World again! </div><br />

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

There are a couple of points to remember:
  • The syntax for this selector is a set of square brackets with the name of the desired attribute inside it, for instance [title].
  • The above code matches elements that have an attribute named title, no matter what their value is.
Finding elements with a specific value for a specific attribute
Sometimes we need to find some elements having a particular value for a particular attribute. For example we may look for the <div> elements having an attribute named "title" with the value "specific". The following code does this:

<div title = "specific" > Hello World! </div><br />
<div> Some Text </div><br />
<div title = "notSpecific" > Hello World again! </div><br />

<script type = "text/javascript" >
$ ( function ()
{
$ ( "div[title=specific]" ). css ( "font-weight" , "bold" );
});
</script>

What if we need find <div> elements where the title value does not equal "specific"? It is very simple. We modify the line in bold face above as under:

$ ( "div[title != specific]" ). css ( "font-weight" , "bold" );

Note the use of the != operator.
Next >>> Lesson No. 9: jQuery Parent/Child Selectors





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