Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

jQuery: Selectors

ajax jquery

  • Please log in to reply
8 replies to this topic

#1 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 24 February 2009 - 03:12 AM

G'day everyone.

In this tutorial I will be teaching you all the selectors of jQuery. jQuery is a very powerful AJAX/Javascript based framework, that can be downloaded freely (link at the bottom of the tutorial). If you wish to use jQuery, you don't need to have any knowledge of Javascript at all. As long as you have 10 minutes you can learn it :) I am not joking! 10 minutes is all it takes!

This is a fairly basic and straight forward reference, but I am writing this one so you can refer back to this when you stuck on my future tutorials. I hope to start writing many jQuery tutorials, so I am starting from the very basics.

jQuery supports most of the CSS2 and CSS3 selectors, so if you already have a background in CSS, you have already got a head start.

Enough chit chat and let's get started.

Basics
#id
This will match any element with the given ID.

element
This will match any element supplied.

.class
This will match any element with the given class.

*
This will match any element, also known as the wildcard.

Hierarchy
ancestor descendant
This will match any elements descendants of the ancestor given.

parent > child
This will match any elements child of the parent given. (similar to above)

prev + next
This will match any element that is given next to the previous. Both must be given.

prev ~ siblings
This will match any elements siblings after the previous element.

Basic Filters
:first
This will match any first selected element given.

:last
This will match any last selected element given.

:not(selector)
This will filter out any given selector.

:even
This will match any even elements, zero indexed

:odd
This will match any odd elements, zero indexed.

:eq(index)
This will match a single element indexed by the given index.

:gt(index)
This will match all elements with the index above the given one.

:lt(index)
This will match all elements below the given one.

:header
This will match all header elements eg. h1, h2, h3 etc.

:animated
This will match all animated elements.

Content Filters
:contains(text)
This will match all elements with the contained text.

:empty
This will match all elements that have no children. (includes text nodes)

:has(selector)
This will match all elements which contain at least one of the given selector.

:parent
This will match all elements which have children. (includes text)

Visibility Filters
:hidden
This will match all elements that are hidden.

:visibile
This will match all elements that are visibile.

Attribute Filters
[attribute]
This will match all elements with the given attribute.

[attribute=value]
This will match all elements with the given value that equals the given attribute.

[attribute!=value]
This will match all elements that do not have the given value that equals the given attribute.

[attribute^=value]
This will match all elements that either don't have the given attribute or do have the given attribute but not with a certain value.

[attribute$=value]
This will match all elements that have the given attribute and ends with the given value.

[attribute*=value]
This will match all elements that have the given attribute and it contains the given value.

[attributeFilter1][attributeFilter2][attributeFilter3]
This will match all elements that have the given attributes.

Child Filters
:nth-child(index/even/odd/equation)
This will match all elements that are the nth-child of their parents or that their parent's even or odd children.

:first-child
This will match all the elements that are the first child of the given parent.

:last-child
This will match all the elements that are the last child of the given parent.

:only-child
This will match all the elements thare the the only child of the given parent.

Forms
:input
This will match all the input, textarea, select and button elements.

:text
This will match all the input elements of type text.

:password
This will match all the input elements of type password.

:radio
This will match all the input elements of type radio.

:checkbox
This will match all the input elements of type checkbox.

:submit
This will match all the input elements of type submit.

:image
This will match all the input elements of type image.

:reset
This will match all the input elements of type reset.

:button
This will match all the button elements and input elements of type button.

:file
This will match all the input elements of type file.

Form Filters
:enabled
This will match all elements that are enabled.

:disabled
This will match all elements that are disabled.

:checked
This will match all elements thare are checked.

:selected
This will match all elements that are selected.


That is just about every selector jQuery supports. And as mentioned above, if you have a background of CSS, you already have a head start.

Over the next couple of weeks, we will be using a fair bit of these selectors but not all of them. So you don't need to memorize them ;) It's a good idea to save them somewhere or even print them for easier finding :)

I hope my next tutorial will be on adding certain CSS styles to a table row without having to write a class for each and every one of them ;)

+rep if you found this information useful


Regards,
Brandon

jQuery latest;
Downloading jQuery - jQuery JavaScript Library

Edited by Jordan, 24 February 2009 - 07:26 AM.

  • 3
I've returned...

#2 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 24 February 2009 - 07:27 AM

Nice tutorial Brandon. I've disabled smilies in your post because they were conflicting with the filter names.

+rep
  • 0

#3 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 24 February 2009 - 01:14 PM

I thought I put them in code tags. Thanks anyway Jordan ;)
  • 0
I've returned...

#4 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 24 February 2009 - 01:32 PM

cool tutorial
+rep
  • 0
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#5 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 24 February 2009 - 01:56 PM

Thanks amro :) Glad you liked it.
  • 0
I've returned...

#6 mendim.

mendim.

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 741 posts

Posted 26 February 2009 - 04:35 AM

Perfect Way to learn jQuery ...
It's a great Tutorial for me ! :)
You Really deserve a +rep Brandon .. !
  • 0

#7 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 26 February 2009 - 04:54 AM

Thanks mendim. If you liked this one, more are coming.
  • 0
I've returned...

#8 Egz0N

Egz0N

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1155 posts

Posted 26 February 2009 - 05:03 AM

nice .. +rep when it lets me too . :)
  • 0

#9 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 26 February 2009 - 05:23 AM

Thanks Egz. This is mainly a reference, but it will help you if you decide to do jQuery.
  • 0
I've returned...





Also tagged with one or more of these keywords: ajax, jquery

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download