jquery -- confused about selectors

Greetings,

This newbie needs clarification. Consider this bit of script...

   $("h3").click(function(){
        $(this).addClass("silver");
    });

If this is more that one h3 DOM element in my page, the above script will apply to all elements, correct?

If so, is there a way to "target" a specific DOM element (per my example) while excluding others? I am wondering if chaining selectors would become applicable in this case e.g.

   $("h3 fieldset a").click(function(){
        $(this).addClass("silver");
    });

Would it be the proper approach??

Thanks for开发者_开发百科 your input.

That's exactly how you would go about it.

Try to think of you selectors in the same way you would select an object in css.

It's often a good idea to be as specific as possible when applying a selector to keep jQuery zippy.

basic rules are this

$("h3 fieldset a").click(function(){
        $(this).addClass("silver");
    });

would select a hyperlink within a fieldset within a h3 tag... (not sure if that's valid html though)

whereas

$("h3, fieldset, a").click(function(){
        $(this).addClass("silver");
    });

would ad the class silver to the h3 the fieldset and the hyperlink.

simples!

If this is more that one h3 DOM element in my page, the above script will apply to all elements, correct?

Yes

If so, is there a way to "target" a specific DOM element (per my example) while excluding others?

Yes. There are many ways. Check out the jQuery selectors documentation to get an idea of how you can limit the elements selected.

To answer your first question, yes, $("h3") will apply to ALL H3 elements.

To narrow your selection, you have a whole range of options. See all of them here: jQuery Selectors. The best option would be to assign the element you are interested in targeting an ID.

 <h3 id="firstSection">Headline!</h3>

And you can then access it like this:

 $("#firstSection")

Or you can do something more quick and dirty like this if you know you only want the first H3 element

 $("h3:first")

Put an id on the element to select a single element.

<h3 id="make-silver">text</h3>

$("h3#make-silver").click(function(){
    $(this).addClass("silver");
});

Yes, using the "h3" selector will add a click event to all h3 tags on the page.

You can chain selectors like you are doing in your second example but you will incur some extra overhead in jQuery as it tries to parse and search the DOM for matching elements. The best option would be to add an id to the h3 tag you are targeting and use something similar to the following:

$("#h3Id").click(function(){
    $(this).addClass("silver");
});

Your question is unclear.

You may be looking for the :not() selector, or you may be trying to filter elements by ID or classname.

The documentation contains a complete list of selectors, with examples.

well you could add a class to the exact H3 you want to target. OR you can select an element that contains the H3 you want to target, and then use .find() to get the H3

sample code:

$('.classOnTargetH3').click(....);

OR

$('elementImediatlySouroundingH3').find('h3').click(....);

You scould give a class to the h3:

So you will select that item like this: $(".reto").