benjaminsterling.com

In an earlier post I wrote about what are the fastest basic selectors and found out some interesting stuff with regards to speed for some basic selectors. In this post I am going to go over some not-so-basic selectors. I am going to try not to repeat what Karl has said in his two posts, "How to Get Anything You Want - part 1" and "How to Get Anything You Want - part 2", but some may be worth repeating.

To keep my searches confined to a certain div with a class of "theDiv" using calls like:

Basically what this does is searches for the element with the class of "theDiv" and then searches for "SELECTOR" within that result.

We are are going to start off with some "Attribute Filters"

$("[name]") Gets each element with an attribute of "name". Note that the last text field did not get highlighted, although it does have an attribute "name" , it is empty, so therefore not selected.

$("input[name]") Is the same as above, except we are limiting the return to inputs and if you run each with firebug running on "Profile," this one takes more calls to find the correct element(s).

$("[name=getMe]") This one is only grabbing the elements that have the "name" attribute with a value of "getMe"

$("[name!=getMe]") This one is only grabbing the elements that don't have the "name" attribute with a value of "getMe" and as you can see it even grabbed the elements that did not have the "name" attribute at all.

$("[type^=b]") This one matches elements that have the "type" attribute and the value of the "type" attribute starts with a "b". (in my test area the one submit button has a type of button)

$("[type$=t]") This one gets all the elements that has the "type" attribute and it's value ends with "t."

$("[value*=no]") This one will match all elements with "no" in it.

$("[id*=no]") Same as "Test 7" except we are grabbing all elements with "no" in the ID

$("[id*=no][name=getMe]")

Wow, that was fun, what did we learn? You can select anything you want by attribute alone. Let's get into some "Content Filters"

$(":contains('Cell')") Here we are getting all element with the word "Cell" in it and since we did not filter out what element we wanted, the TABLE, TBODY, TR, and the TD all got selected because they all contained the word "Cell". Note my earlier comment that I am using $(":contains('Cell')", ".theDiv") in my javascript to limit the return results to the containing div, otherwise the BODY and HTML tag and the other elements between BODY and the items with the "Cell" text.

$("td:contains('Cell')") Here is the same approach but we will be restricting our search to just the TD.

$(":empty") Selects every element that is empty. If you don't limit your search to items that are not form elements, you will get the input fields.

$(":has(span)") Selects all elements that has a span in it

$(":parent") Selects all elements that are "parent" elements

Oh; you want to be able to get hidden elements? Visible elements?

$(":hidden") Selects all elements that are hidden, this includes items with a style of display:none or visibility:hidden and input elements with a type of "hidden."

$(":visible") Selects all elements that are visible.

Where do we go from here

If you have visited the jQuery Documentation on Selectors you will see that I have not gone over anything new, just maybe rephrased it in "my terms." These, for the most part, are the selectors I would use on a daily basis, so I felt that these were the best place to start. Some approaches my be faster, so I would suggest that you take some "me" time and see which ones will work the best in your situation.

In a future alticle, I am going to cover some of the approaches I take with a web base training framework that I think will benifit you