Rip's Domain

JQuery Expressions: making life easy

Posted in Jquery by rip747 on November 2, 2006

The great thing about JQuery is the way it makes accessing elements of the DOM extremely easy. Keeping with that, JQuery has some really nifty expressions built into it that means it even easier. For instance:

You have a form and in that form you have a pair of radio button named “makechoice” with the value 1 and 0. Now you want to hide a section of the form if they choose 0 and show the section if they choose 1. We’ve all done this before, you have to loop through the radio button array collection, see which radio button was checked, get the value of the checked radio button, determined whether you should hide the region based on the value retrieved and finally toggle the visibility of the region. Not too hard🙂

You could probably do that in about 30 lines of code and 15 minutes to spare. With JQuery you can do this in 1 line of code. This is made possible using the wonderful expressions that JQuery has built into it. For example, to do the old show / hide based on a radio button selection (for readability I put the code on 3 lines…. sue me):

$(“input[@name=’makechoice’]”).click(function(){
$(“input[@name=’makechoice’]:checked”).val() == 0 ? $(“#HideMe”).hide(‘slow’) : $(“#HideMe”).show(‘slow’);
});

The expression used to accomplish this is the “checked” expression. Basically all it does is limit the JQuery selection to the radio button that is checked. So now instead of looping over the radio button array to figure out which one was checked, I let JQuery do the work for me.

JQuery has many of these expressions built right into it. Some of the most often used ones are:

:visible – select the elements who display is set to visible

:hidden – select the elements who display is set to none

:enabled – select the elements that are enabled

:disabled – select the elements that are disabled

There are many more that I’m not going to get into. However if you want to explore them all, you can download the JQuery source and take a look.

Also in true JQuery fashion, here’s how you can add your own.

6 Responses

Subscribe to comments with RSS.

  1. Rey Bango said, on November 3, 2006 at 11:46 am

    JQuery’s chainable methods capability is the best. Its one of the reasons that I chose it over the others.

  2. rip747 said, on November 3, 2006 at 4:45 pm

    @Ray,

    I agree that it’s the strongest sale for JQuery. The fact also that creating plugins is soooooo easy. I’m starting to see more and more plugins come out of the wood works. I would like it however if Joe R would designate some plugins as official JQuery plugins so that we don’t have any overlap in the plugin development.

  3. Rey Bango said, on November 3, 2006 at 10:02 pm

    Actually John has already started that discussion and I think that some, such as the form and history plugins, may become standard. Its a hard decision since you don’t want to stifle innovation or take away one of jQueries best features; its size (19k compressed). You should post on the mailing list so that some of these questions get hashed out. John is very cool. He gave me the green light to run the “Powered by JQuery” button contest and he’s open to other ideas that help the project.

  4. Matt Gardner said, on July 11, 2007 at 4:10 pm

    Brilliant, thanks! After a half hour of trying to dig for the radio value (using a mix of jquery and DOM scripting) finally did a google search to see there’s always a better way.🙂

  5. Terry said, on December 12, 2007 at 7:43 pm

    Does anyone have an example of this working with the current version of jQuery?

  6. Lee said, on January 23, 2008 at 1:40 pm

    I just used this selector with jQuery 1.1.3.1 and had to change the conditional a bit

    $(“#inputID:checked”).val() == ‘on’

    In my experience val() will either return null or ‘on’ for a checkbox.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: