How to Use basic jQuery selectors

Basic jQuery selectors are based on familiar CSS syntax and they work much the same way that CSS does. I have listed the basic jQuery selectors in the table below and you can see they correspond directly to their CSS counterparts. So, for example, if I pass a tag name to the jQuery selector, it will find me all elements that have that same tag name. Similarly, if I pass in an identifier, jQuery will find the element that has that id. The same thing goes for class name. If I pass in a class to the jQuery selector, it will find all the elements that have a class attribute that have that class name. And just like CSS, you can get a little bit more fancy. You can look for tags that have a particular class name, or you can look for a tag that has a specific id and has a class name on it. And then, there is a wildcard character, the special character, the asterisk, basically means find all of the elements on the page.

Selector

Function

tagname Finds all elements that are named tagname
#identifier Finds all elements with ID of identifier
.className Finds all elements that have a class attribute with the value of className
tag.className Gets elements of type tag that have a class attribute with the value of className
tag#id.className Retrieves the tag element that has an ID of id and a class attribute with the value
* Finds all of the elements on the page

jQuery vs Plain Old JavaScript

Let’s take a look at how you would use jQuery versus using plain JavaScript to get at information in a document. Here I have a fairly simple HTML file, stripped down for the purpose of illustration. You can see it has an unordered list in it and some list items and paragraph tags and so on.

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <ul id="list1">
    <li class="a">item 1</li>
    <li class="a">item 2</li>
    <li class="b">item 3</li>
    <li class="b">item 4</li>
  </ul>
        <p class="a">This is paragraph 1</p>
        <p>This is paragraph 2</p>
        <p class="b">This is paragraph 3</p>
        <p>This is paragraph 4</p>
 </body>
</html>

If I want to get all the paragraph tags in the document, using normal JavaScript, I would do something like this.

document.getElementsByTagName("p");

I would use the document.getElementsByTagName and pass in the p, and that would get me all these paragraph tags. To do the same thing using jQuery, all I have to do is call the jQuery object.


$("p");

That’s the little $ sign right there. That’s the global jQuery function, and I simply pass in the parameter p, and that will come back with what is called a matched set, or a wrap set it’s sometimes called, or matched elements. It comes back with a list of all the tags that match that particular parameter right there.

Okay, suppose I wanted to get the tag that had the id “list1“, again using plain javascript:

document.getElementById("list1");

I would use the standard DOM function getElementById, and I would give it the id that’s the list1 right there. That’s what the DOM would come back with. To do the same thing in jQuery;

$("#list1");

you can see I am just using standard CSS syntax, the hash sign with the id in front of it, and that comes back with the element for that id.

SEE ALSOIntroduction to Programming: The right age and what language to start with

Okay, let’s get a little more fancy. Suppose you want to get all the list item tags that have class “a” on them. Well, to do that using the DOM approach, it’s a little bit more complicated. You would have to first use the getElementsByTagName function right to get all the tags, then you would have to write some for loop that would loop through all the results in that array and get the class attribute and compare it to “a”, to see if it should be included in the result. Well, jQuery does all that for you easily and again, using CSS syntax, all I have to do is call the jQuery object with this expression right here;

$("li.a");

list items that have “a” on them, and it accomplishes the same thing.

And finally, let’s imagine you have a situation where you wanted all the tags regardless of what kind of tag they were that have a class “b” on them but only if they are inside “a” tag.

Again, using normal JavaScript, this would get complicated quickly. You have to get all the tags, see if they have the b class, see if they are inside the ul, that kind of thing, but jQuery makes this really easy, again,using pretty standard CSS syntax with the descendant inside the ancestor. All you have to do is:

$("ul .b");

So, this basically says get me everything that has b class as long as it’s inside the ul. That would come back with the list with items 3 and 4.

SEE ALSO: The Concept of Secure Coding; how every programmer should and should not code

Hierarchy and Combination Selectors

In addition to the basic selectors, there are some selectors that are a little bit more advanced. These are the hierarchy and combination selectors. These allow you to get a little bit more advanced in selecting page content. It basically allows you to select elements based on hierarchical relationships or a combination of criteria.

Selector

Function

 selelctor, selector, …  Finds all of the specified selectors
 .class1.class2  Finds all elements with both .class1 and .class2 applied
 parent > child Finds all child elements that are direct children of elements of type parent
 ancestor descendent Finds all descendent elements that are contained within elements of type ancestor
prev + next Finds all next elements that are next to a prev elements
prev ~ siblings Finds all sibling elements that  come after prev and match the siblings selector

The first two has to do with combination. If I passed in a comma-delimited list like p, div, image, it would find all of the elements that match everything in the list and for class 1 and class 2, this means find all the elements that have both class 1 and class 2 on them. And they both have to be there.

The rest illustrates hierarchical relationships. So, if you wanted to find all the child elements that are direct children of a certain parent, you would use the parent > child expression, whereas if all you cared about was finding a tag that appeared anywhere underneath a given ancestor, you would use ancestor descendent form, with the ancestor and then a space, and then whatever you are interested in(descendent).

In the last two, you have to deal with siblings. So, the next operator finds whatever element is next to this element, right, the previous element, and the siblings element says hey! Get me all the sibling elements that come after the previous element right here, and match the selector that I am passing in for siblings.

Code Examples

Okay, I’ve shown some examples above already on the basic selectors. Let me show one more for hierarchical…The next operator to be precise. Say for example I have this html code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document</title>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">
    $("document").ready(function() {

    });
</script>
<style type="text/css">
.a { color: Navy; }
.b { color: Maroon; }
</style>
</head>
<body>
  <ul id="list1">
    <li class="a">item 1</li>
    <li class="a">item 2</li>
    <li class="b">item 3</li>
    <li class="b">item 4</li>
  </ul>
<p class="a">This is paragraph 1</p>
<p id="para1">This is paragraph 2</p>
<p class="b">This is paragraph 3</p>
<p>This is paragraph 4</p>
</body>
</html>

Of course with jQuery loaded in the head of the document, say I wanted to get the paragraph that is next to the unordered list; inside the document.ready function I would do this:

$("document").ready(function() {
     ("ul + p").css("border", "3px solid red");
});

The .css() method is optional, in this case I just used it to apply a css 3px solid red border around the selected elements and so in the browser the result would look like this

For the descendent operator and siblings you might try something like these in the document.ready function and then take a look at the result in your browser:

$("ul li.a").css("border", "3px solid red");//descendent operator
$("#list1 ~ p").css("border", "3px solid red");//siblings

I hope you found this quite informative, please share with your friends. Leave a reply or ask a question in the comment box below. Thanks!

The short URL of the present article is: https://cybernek.com/wzV0p

Related Posts

Leave a comment