jQuery Custom Selectors - Holy Cow That Is So Badass!

Posted February 23, 2007 at 4:49 PM

Tags: Javascript / DHTML

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:

  1. Sarah
  2. Libby
  3. Azure
  4. Cindy

But, once I click on the "Find Hotties" link, the output gets changed to:

  1. Sarah
  2. Libby
  3. Azure
  4. 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




Learning ColdFusion 9 - ColdFusion 9 tutorials, samples, examples, demos

Reader Comments

Feb 23, 2007 at 6:32 PM // reply »
28 Comments

Sweet man! You're really digging jQuery from what I see! :)


Jordan Clark
Feb 23, 2007 at 6:54 PM // reply »
2 Comments

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.


Feb 24, 2007 at 6:48 AM // reply »
10 Comments

And how do you declare namespaces Jordan?


Feb 24, 2007 at 10:49 AM // reply »
6,371 Comments

@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.


Feb 25, 2007 at 6:38 PM // reply »
40 Comments

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


stylo
Feb 27, 2007 at 5:24 AM // reply »
10 Comments

--Otherwise your code wont validate as xhtml.

But who cares what a validator somewhere thinks? It affects nothing.


Feb 27, 2007 at 7:26 AM // reply »
6,371 Comments

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.


insic
May 28, 2009 at 7:55 AM // reply »
1 Comments

This is cool, Thanks.


Post Comment  |  Ask Ben

Recent Blog Comments
Nov 7, 2009 at 5:53 PM
Ask Ben: Javascript String Replace Method
You can find here an advanced function that prepared with javascript replace function. This can make the first letters of words, sentences, lines and whatever you define automatically: http://www.m ... read »
Andrew Neely
Nov 7, 2009 at 4:56 PM
A Moment That Touched Me - The Fountainhead
Ben, Glad you enjoyed the podcast. Yeah, the Tank Riot guys can get really chatty during the episodes, but that's part of the charm of it for me. They've covered everything from Nichola Tesla to Cha ... read »
Nov 7, 2009 at 4:43 PM
Building A Fixed-Position Bottom Menu Bar (ala FaceBook)
Is it possible to make some more MenĂ¼`s ? ... read »
Jill
Nov 7, 2009 at 11:40 AM
How To Unformat Your Code (Like A Pro)
Derek, I think you might be right - sweet! Thanks for the link :) ... read »
Nov 7, 2009 at 11:25 AM
How To Unformat Your Code (Like A Pro)
I think it would be way easier to just use this http://www.logichammer.com/html-formatter/ He just released v3 and it rocks. ... read »
Jill
Nov 7, 2009 at 7:58 AM
How To Unformat Your Code (Like A Pro)
LMAO - this was pretty funny! I have to admit - I also love to reformat code so I can read it. My boss used to tell me to leave my OCD at home. Now I don't feel so bad after reading everyone else' ... read »
Nov 6, 2009 at 10:10 PM
How To Unformat Your Code (Like A Pro)
The timing of this post is just uncanny. I spent the last 15-20 minutes manually un-formatting my "Ben Nadel" style code within a CFC of mine. I was really digging the readability a few weeks ago, bu ... read »
Roe
Nov 6, 2009 at 5:11 PM
Passing Arrays By Reference In ColdFusion - SWEEET!
ArraySort also reorders the results of these java obj's ... read »