Introduction to jQuery

Part of jQuery's joy is how easy it is to select elements from a page. Think of selecting an element as identifying it. You might need to identify an individual elements, multiple elements, elements that meet a set of criteria, etc, in order to modify the element. jQuery lets you identify and select elements using a concept you may already know if you've built web pages before: CSS selectors. 

To recap CSS selectors, here are some basic ways to select elements in CSS. Once you select elements, you can then apply style rules to them, setting their font sizes, colors, etc:

Select by element type:h1,h2,p,img, etc.
Select by class:.starred,.featured, etc.
Select by ID:#about,#contact, etc.

The good news is that you can select elements in jQuery the same way you select elements in CSS, including selecting by element type, class, and ID. The list is far greater than that though. Let's jump in.

Selecting in jQuery

In CSS, you select elements by simply writing them, like applying styles to h1 elements:

h1 {
/* style rules here */
}

With jQuery, you must take an extra step. Enter the famous jQuery dollar sign!$() is shorthand for a function calledjQuery()  that finds elements in a page and creates jQuery objects that reference the found elements.

$('p') : selects allp (paragraph) elements
jQuery('p') : same thing, but takes more time to type. Use the dollar sign!

jQuery cannot be used on elements until those elements are jQuery objects, which gives them access to the whole jQuery world. Enrobing them in the$() method turns them into jQuery objects on which you can call jQuery methods. Before that, they're simply elements in the DOM and won't respond to jQuery methods.

In the following explanations, we'll look at specific ways to select elements, though you shouldn't memorize anything. When you know you'll need to modify elements with jQuery, just reference the jQuery documentation to see how to go about selecting them. It'll be easy to find with this base knowledge of selection.

Select by relationship

Elements that are "related" are often referred to by family vocabulary. You can have parent, child, and sibling elements within markup, and determining which elements are which family member determines entirely on your markup structure. It's often useful to select elements based on their relationships to other elements both in CSS and jQuery, so let's explore how to do so (or brush up on your knowledge if you're already familiar).

Descendants

$("ancestor descendent") : Select all elements that are underneath and within an ancestor element

Example: select allli s that are withinol in the markup.

jQuery:

$("ol li")

HTML:

<ol>
    <li>First item</li> <!-- selected -->
    <li>Second item</li> <!-- selected -->
    <ul>
        <li>Unordered item</li> <!-- selected -->
    </ul>
</ol>

See example: http://codepen.io/eclairereese/pen/EKbORj

Parents and children

$("parent > child") : Select all children that are immediate descendants of a parent element (also called a child combinator selector).

Example: select allli s that are direct descendants of ol.

jQuery:

$("ol > li")

HTML:

<ol>
    <li>First item</li> <!-- selected -->
    <li>Second item</li> <!-- selected -->
    <ul>
        <li>Unordered item</li>
    </ul>
</ol>

See example: http://codepen.io/eclairereese/pen/QNOJxJ

Siblings

$(element ~ siblings): Select any siblings of the first specified element.

Example: select theli siblings of the first li .

jQuery:

$("li#first ~ li")

HTML:

<ul>
    <li id="first">One</li>
    <li id="second">Two</li> <!-- selected -->
    <li id="third">Three</li> <!-- selected -->
</ul>

$(element  + sibling)  : Select the sibling element that immediately follow the first specified element.

Example: select the first sibling of a specified li.

jQuery:

$("li#first + li")

HTML:

<ul>
    <li id="first">One</li>
    <li id="second">Two</li> <!-- selected -->
    <li id="third">Three</li>
</ul>

See examples: http://codepen.io/eclairereese/pen/zqPMLx & http://codepen.io/eclairereese/pen/WwXYKa

You can find more information about hierarchical selectors in the jQuery documentation.

Filters

CSS selectors are cool and all, but jQuery even provides extra selectors! Let's look at filters now. Sometimes you don't care about the relationships between your elements; you just care about what they are or aren't.

Examples

:first : selects the first of an element (example: http://codepen.io/eclairereese/pen/MyOzBM)
jQuery

$("p:first")

HTML

<p>First text</p> <!-- selected -->
<p>Second text</p>
<p>Third text</p>

:last : selects the last of an element (example: http://codepen.io/eclairereese/pen/VarVGb)

jQuery

$("p:last")

HTML

<p>First text</p>
<p>Second text</p>
<p>Third text</p> <!-- selected -->

:eq(index) : selects the element at a specified index number (this is where arrays come in handy!) (example: http://codepen.io/eclairereese/pen/bpYQxx)

jQuery

$("li:eq(1)")

HTML

<ul>
    <li>First (so index = 0)</li>
    <li>Second (so index = 1)</li> <!-- selected -->
    <li>Third (so index = 2)</li>
</ul>

:gt(index): selects element(s) at a greater index number than the specified number (example: http://codepen.io/eclairereese/pen/pydQOB)

jQuery

$("li:gt(0)")

HTML

<ul>
    <li>First (so index = 0)</li>
    <li>Second (so index = 1)</li> <!-- selected -->
    <li>Third (so index = 2)</li> <!-- selected -->
</ul>

:lt(index) : same concept but for elements at a lesser index number than the specified number
jQuery (example: http://codepen.io/eclairereese/pen/pydQOB)

$("li:lt(2)")

HTML

<ul>
    <li>First (so index = 0)</li> <!-- selected -->
    <li>Second (so index = 1)</li> <!-- selected -->
    <li>Third (so index = 2)</li>
</ul>

:not(selector) : selects elements that aren't, well, the selector! (example: http://codepen.io/eclairereese/pen/xVPQyV)

jQuery

$("li:not('.vegetable')")

HTML

<ul id="groceries">
    <li class="vegetable">Eggplant</li>
    <li class="vegetable">Carrot</li>
    <li class="fruit">Apple</li> <!-- selected -->
</ul>

You can learn more about basic filters in the jQuery documentation.

Additional filters

As you begin to get a sense of how to use filters (colon, filter name, parameters if necessary), know that the list of possibilities is quite long! There are visibility filters, content filters, attribute filters, and even form filters.

:hidden: selects hidden elements (elements that have a CSS display value of none, aretype="hidden", have width and height values of 0, or have hidden ancestor elements)
:visible : selects visible elements
:contains("text") : elements that contain the specified text
:has("element") : elements that contain the specified element
[attribute] : elements that have the specified attribute, ex. $("[align]")
[attribute="value"] : elements that have the specified attribute and value, ex. $("[align=center]")
[attribute!="value"] : elements that do not have the specified attribute and value, ex. $("[align!=center]")

You even have a set of selectors for form elements, which is very useful if you use jQuery to validate forms before users submit them (common). These filters are shorthand for$( "[type=XXXXXXX]"). For example,$( ":checkbox" ) is the same thing as$( "[type=checkbox]" ), but the filter shorthand saves you extra typing!

:input : selects input elements
:password : selects password inputs
:text : selects text inputs
:checkbox : selects checkboxes
:radio : selects radio buttons
:submit : selects submit buttons

Here's the full list of form selectors. 

Remember, don't worry about memorizing selectors. When you know you'll need to use jQuery on certain elements, reference the jQuery documentation to find the best way to select them, now that you understand generally how selecting elements occurs!