Learning JQuery – JQuery Selectors

One of the most important parts of JQuery are the selectors. If you remember for the previous blog post, the selector is located in the beginning of a JQuery statement (outlined in bold in the example below).

$(“p”).hide();

As you can see the selector begins with a dollar sign, and is immediately followed by the tag that you would like to follow in parenthesis. In this example, that would be all of the “p” elements.

Selectors can also be made more specific by targeting elements by ID or by Class. You can target an element by class in this format: $(“.className”).hide(); or by id in this format: $(“#className”).hide(); (w3schools.com, 2016).

If you you would like to be very specific you can also target a specific Class or Id of an element type. Take a look at these following examples.

$(“p.bodyText”).hide();

$(“p#bodyText”).hide();

As you can see in these examples, it is possible to include a Class or ID with a tag selector. In the first example, it will hide any “p” element of class “bodyText”. In the second example, it will hide any “p” element of ID “bodyText”.

This is only a basic overview of what you can do with JQuery selectors. For a more complete listing of possible selectors take a look at this reference published by W3schools.

References:

W3Schools.com. (2016, January 30). jQuery Selectors. Retrieved from http://www.w3schools.com/jquery/jquery_selectors.asp.