➥ jQuery Tutorial

➥ jQuery Effects

➥ jQuery HTML

➥ jQuery Traversing

➥ jQuery AJAX

➥ jQuery Misc

Tutorial

❮ Previous Next ❯

jQuery selectors are among the most essential aspects of a jQuery library.

Selectors in jQuery

You can use jQuery selectors to select and manipulate HTML elements (s).

jQuery selectors are being used to "find" (or select) HTML elements predicated on their name, id, courses, kinds, characteristics, attribute values, and several other criteria.  It is based on existing CSS Selectors and includes some custom selectors of its own

In jQuery, all selectors proceed with a dollar sign and hyphens: $ ().

The Selector aspect

The jQuery element dropdown prefers elements based on there own identities.

You can pick all <p> elements on a page by doing the following:

$("p")

Illustration

All < h1 > elements are hidden when a user has clicked a button:

 

EXAMPLE ❯

The #id Chooser

The jQuery #id selector makes it look for a specific element by using the id attribute of an HTML tag.

Because an id should be unique within a page, you should use the #id selector to find a single, distinct element.

To locate an element with a specific id, type a hash character followed by the HTML element's id:

$("#Gurukul")

Illustration 

The element with the id="Gurukul" will be hidden when a user clicks on a button:

 

EXAMPLE ❯

The.class Selector is a type of selector that allows you to choose between

The.class selector in jQuery looks for components that have a specified class.

Write a period character following by the title of the class to identify elements with just that class:

Illustration: 

The parts with class="Gurukul" will be disabled when a user clicks on a button:

EXAMPLE ❯

Further jQuery Selectors Illustration

  • $("*") Selects all elements
  • $(this) Selects the current HTML element
  • $("p.intro") Selects all <p> elements with class="intro"
  • $("p:first") Selects the first <p> element
  • $("ul li:first")         Selects the first <li> element of the first <ul>
  • $("ul li:first-child")         Selects the first <li> element of every <ul>
  • $("[href]")        Selects all elements with an href attribute
  • $("a[target='_blank']")        Selects all <a> elements with a target attribute value equal to "_blank"
  • $("a[target!='_blank']")         Selects all <a> elements with a target attribute value NOT equal to "_blank"
  • $(":button")        Selects all <button> elements and <input> elements of type="button"
  • $("tr:even")        Selects all even <tr> elements
  • $("tr:odd")        Selects all odd <tr> elements

In a separate file, functions

If you've a lot of webpages and want your jQuery methods to be easy to handle, you can keep everything in a separate.js file.

The functions are added directly into the <head> section when we demonstrate jQuery in this tutorial. However, in some instances, it's wise to place them outside their own file, like this one (use the src attribute to reference to the.js file):

Illustration:

EXAMPLE ❯

Use Multiple id or selector

Syntax:

$( "selector1, selector2, selectorN" )

Description:

  • selector1: Any valid selector.
  • selector2: Another valid selector.
  • selectorN: As many more valid selectors as you like.

Example for ID selector:

$(‘#selector1, #selector2, #selector3’).click(function() {

// Perform some action;

});

EXAMPLE ❯

❮ Previous Next ❯