jQuery Selector By Name id class value and attribute with Example

jquery selectors example; In this tutorial, you will learn about jQuery selectors and how to use jQuery selectors on HTML elements.

jQuery Selector By Name id class value and attribute with Example

jQuery selectors are used to selecting one or more HTML elements using jQuery, and once you select the element you can take various actions on it.

jQuery selectors are a very important part of the jQuery library. jQuery selectors are used to selecting and manipulating HTML elements. Using jQuery Selector, you can target or select HTML elements based on their IDs, classes, types, attributes and much more than a DOM.

jQuery Selector Syntax

JQuery selector syntax is used to select HTML elements and take some action on the element.

$(selector).action()

• A $ Sign to define / access jQuery
• A (selector) to find HTML elements.
• A action() to be performed on the html element().

All jQuery selector starts with a dollar sign and parenthesis e.g. $(). It is also known as the factory function.

The $() factory function

jQuery selector start with this sign $(). When selecting an element in a given document, it uses three basic building blocks.

Selector	Description	Example
Element Name:	It represents a element name available in the DOM.	$(“p”)
Element ID:	It represents a element available with a specific ID in the DOM.	$(“#Id”)
Element Class:	It represents a element available with a specific class in the DOM.	$(“.class”)

List of jQuery Selectors

• The id Selector
• The .Class Selector
• The Name Selector

The id Selector

The JQuery #id attribute selector uses the ID attribute of the HTML tag to find a specific element.

An ID must be unique within one page, so when you want to search a single, unique element, you should use the # selector.

$("#uniqueId").action();

Example of jQuery id Selector

$(document).ready(function(){
  $("button").click(function(){
    $("#uniqueId").hide();
  });
});

When a user clicks on a button, the element with id = “uniqueId” will be hidden.

The .Class Selector

The jQuery .class attribute selector finds elements with a specific class.

$(".uniqueId").action();

Example of jQuery class Selector

$(document).ready(function(){
  $("button").click(function(){
    $(".uniqueId").hide();
  });
});

When a user clicks on a button, the element with class = “uniqueId” will be hidden.

The Name Selector

The JQuery name attribute selector uses the Name attribute of the HTML tag to find a specific element.

$("input[name='test']").action();

Example of jQuery Name Selector

$(document).ready(function(){
  $("button").click(function(){
    $("input[name='test']").hide();
  });
});

Complete List of jQuery Selectors

Selector	Example	Description
*	$(“*”)	It is used to select all elements.
#id	$(“#firstname”)	It will select the element with id=”firstname”
.class	$(“.primary”)	It will select all elements with class=”primary”
class,.class	$(“.primary,.secondary”)	It will select all elements with the class “primary” or “secondary”
element	$(“p”)	It will select all p elements.
el1,el2,el3	$(“h1,div,p”)	It will select all h1, div, and p elements.
:first	$(“p:first”)	This will select the first p element
:last	$(“p:last”)	This will select he last p element
:even	$(“tr:even”)	This will select all even tr elements
:odd	$(“tr:odd”)	This will select all odd tr elements
:first-child	$(“p:first-child”)	It will select all p elements that are the first child of their parent
:first-of-type	$(“p:first-of-type”)	It will select all p elements that are the first p element of their parent
:last-child	$(“p:last-child”)	It will select all p elements that are the last child of their parent
:last-of-type	$(“p:last-of-type”)	It will select all p elements that are the last p element of their parent
:nth-child(n)	$(“p:nth-child(2)”)	This will select all p elements that are the 2nd child of their parent
:nth-last-child(n)	$(“p:nth-last-child(2)”)	This will select all p elements that are the 2nd child of their parent, counting from the last child
:nth-of-type(n)	$(“p:nth-of-type(2)”)	It will select all p elements that are the 2nd p element of their parent
:nth-last-of-type(n)	$(“p:nth-last-of-type(2)”)	This will select all p elements that are the 2nd p element of their parent, counting from the last child
:only-child	$(“p:only-child”)	It will select all p elements that are the only child of their parent
:only-of-type	$(“p:only-of-type”)	It will select all p elements that are the only child, of its type, of their parent
parent > child	$(“div > p”)	It will select all p elements that are a direct child of a div element
parent descendant	$(“div p”)	It will select all p elements that are descendants of a div element
element + next	$(“div + p”)	It selects the p element that are next to each div elements
element ~ siblings	$(“div ~ p”)	It selects all p elements that are siblings of a div element
:eq(index)	$(“ul li:eq(3)”)	It will select the fourth element in a list (index starts at 0)
:gt(no)	$(“ul li:gt(3)”)	Select the list elements with an index greater than 3
:lt(no)	$(“ul li:lt(3)”)	Select the list elements with an index less than 3
:not(selector)	$(“input:not(:empty)”)	Select all input elements that are not empty
:header	$(“:header”)	Select all header elements h1, h2 …
:animated	$(“:animated”)	Select all animated elements
:focus	$(“:focus”)	Select the element that currently has focus
:contains(text)	$(“:contains(‘Hello’)”)	Select all elements which contains the text “Hello”
:has(selector)	$(“div:has(p)”)	Select all div elements that have a p element
:empty	$(“:empty”)	Select all elements that are empty
:parent	$(“:parent”)	Select all elements that are a parent of another element
:hidden	$(“p:hidden”)	Select all hidden p elements
:visible	$(“table:visible”)	Select all visible tables
:root	$(“:root”)	It will select the document’s root element
:lang(language)	$(“p:lang(de)”)	Select all p elements with a lang attribute value starting with “de”
[attribute]	$(“[href]”)	Select all elements with a href attribute
[attribute=value]	$(“[href=’default.htm’]”)	Select all elements with a href attribute value equal to “default.htm”
[attribute!=value]	$(“[href!=’default.htm’]”)	It will select all elements with a href attribute value not equal to “default.htm”
[attribute$=value]	$(“[href$=’.jpg’]”)	It will select all elements with a href attribute value ending with “.jpg”
[attribute|=value]	$(“[title|=’Tomorrow’]”)	Select all elements with a title attribute value equal to ‘Tomorrow’, or starting with ‘Tomorrow’ followed by a hyphen
[attribute^=value]	$(“[title^=’Tom’]”)	Select all elements with a title attribute value starting with “Tom”
[attribute~=value]	$(“[title~=’hello’]”)	Select all elements with a title attribute value containing the specific word “hello”
[attribute*=value]	$(“[title*=’hello’]”)	Select all elements with a title attribute value containing the word “hello”
:input	$(“:input”)	It will select all input elements
:text	$(“:text”)	It will select all input elements with type=”text”
:password	$(“:password”)	It will select all input elements with type=”password”
:radio	$(“:radio”)	It will select all input elements with type=”radio”
:checkbox	$(“:checkbox”)	Itwill select all input elements with type=”checkbox”
:submit	$(“:submit”)	It will select all input elements with type=”submit”
:reset	$(“:reset”)	It will select all input elements with type=”reset”
:button	$(“:button”)	It will select all input elements with type=”button”
:image	$(“:image”)	It will select all input elements with type=”image”
:file	$(“:file”)	It will select all input elements with type=”file”
:enabled	$(“:enabled”)	Select all enabled input elements
:disabled	$(“:disabled”)	It will select all disabled input elements
:selected	$(“:selected”)	It will select all selected input elements
:checked	$(“:checked”)	It will select all checked input elements

Recommended jQuery Tutorials