jQuery Custom Selectors - Holy Cow That Is So Badass!
Posted February 23, 2007 at 4:49 PM
One of the things that is so cool about jQuery is the user of selectors to match DOM elements. Glen Lipka just pointed out to me that you can create your own custom selectors. Holy cow! That is so bad ass, you have no idea. Since I am very new to all of this, I figure I would write a little experiment to see how it worked (NOTE: I am new, so take this with a grain of salt).
I am going to create a list of links that have a REL attribute and a HOTNESS attribute. Then I am going to create my own selector "hottie" which selects only links where the REL attribute is "girl" and the HOTNESS attribute is greater than or equal to 9.
Launch code in new window » Download code as text file »
- <html>
- <head>
- <title>jQuery Custom Selector Test</title>
- <script type="text/javascript" src="jquery-latest.pack.js"></script>
- <script type="text/javascript">
-
- // Extend the jQuery object to include the
- // custom selector "hottie" for the ":" expression.
- jQuery.extend(
- jQuery.expr[ ":" ],
- {
- hottie : (
- "jQuery( a ).attr( 'rel' ) == 'girl' && " +
- "jQuery( a ).attr( 'hotness' ) >= 9"
- )
- }
- );
-
-
- // This will highlight the girls who are hotties.
- function FindHotties(){
-
- $( "ol a:hottie" ).css( "font-weight", "bold" );
-
- }
-
- </script>
- </head>
- <body>
-
- <ol>
- <li><a rel="girl" hotness="9.0">Sarah</a></li>
- <li><a rel="girl" hotness="8.0">Libby</a></li>
- <li><a rel="girl" hotness="9.0">Azure</a></li>
- <li><a rel="girl" hotness="8.5">Cindy</a></li>
- </ol>
-
- <p>
- <a href="javascript:void(0);"
- onclick="FindHotties();"
- >Find Hotties</a>
- </p>
-
- </body>
- </html>
Running this page, the initial output is:
- Sarah
- Libby
- Azure
- Cindy
But, once I click on the "Find Hotties" link, the output gets changed to:
- Sarah
- Libby
- Azure
- Cindy
HOW FREAKIN' COOL IS THAT?!?!? jQuery is becoming more and more exciting by the day. I can imagine using stuff like this all over the place. My gut feeling says that this sort of thing is not the most "performant", but JavaScript is so fast on new computers, what can it matter. Plus, it's almost too easy to use, I can't pass it up.
Here is a huge list of custom selectors that Glen gave me. Are you beginning to see the possibilities?
Download Code Snippet ZIP File
Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Newer Post
Ask Ben: Creating An Archive Folder / File List (Part II)
Older Post
Referring To The Proper Row Of The Outer CFLoop (With Nested CFLoops)
Reader Comments
Sweet man! You're really digging jQuery from what I see! :)
Hey Ben, cool for showing how easy it is to make a custom selector, but shouldn't you use a namespace to add custom/arbitrary attributes to existing tags? Otherwise your code wont validate as xhtml.
And how do you declare namespaces Jordan?
@Rey,
This stuff is just too cool! How could you not like it. Do realize how easy this sort of thing will make readable selection code? Too easy.
@Jordan,
Good point, I am not one who often adds custom attributes so it didn't occur to me. This jQuery stuff is new, so I am only beginning to see the possibilities.
@Will,
While I cannot answer with 100% accuracy, you would create a namespace by declaring it in the HTML tag. I don't know the exact syntax, but I think, if I wanted to make a "Kinky" name space for Kinky Solutions, I would use this HTML tag:
<html xmlns:kinky="www.kinkysolutions.com">
Then, in the code, since "hottie" is a custom attribute, I should define it as such:
[a kinky:hottie="9.5"]...[/a]
This will prevent attribute clashes if XHTML 2.0 decides to add the "hottie" attribute to the link tag.
Of course, I have never done this, so I may be off, but I think that is the gist of it.
You could also use the REL tag as a XHTML compatible attribute. But as a general rule, I have trouble understanding why XHTML is so limited on this score. Wy can't we just add attributes? What is the downside? Will a browser not work with it?
I just don't see why it matters for 99.9999% of all projects.
Glen
--Otherwise your code wont validate as xhtml.
But who cares what a validator somewhere thinks? It affects nothing.
Stylo,
While I would agree with you in theory, in practice, a surprising number of clients will require that their site validates as XHTML. But other than client needs, agreed, it affects nothing.
This is cool, Thanks.
