Here, we will learn how to manipulate the html elements with our purposes using jquery selectors. It is based on their variable parameters such as name, id, classes, types, attributes, values of attributes, etc.
Syntax for element selector
$("") Jquery element selector
Example:
In this example, the jquery selector selects the name of the html element. Here we will change the color of the text. So we need to add the text into the paragraph element. The selector selects the name of the <p> html element and it will change the color of the given text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery Selectors</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function () {
$("p").css("color", "#ff0040");
});
</script>
</head>
<body>
<h2>Jquery selector selects based on name</h2>
<p>Name of html element</p>
</body>
</html> Jquery class selector
Example:
In this example, the jquery selector selects the class of the html element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery Selectors</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function () {
$(".class-selector").css("color", "#ff0040");
});
</script>
</head>
<body>
<h2>Jquery selector selects based on class of html element</h2>
<p class="class-selector">Class of html element</p>
</body>
</html> Jquery id selector
Example:
In this example, the jquery selector selects the id of the html element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery Selectors</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function () {
$(".id_selector").css("color", "#ff0040");
});
</script>
</head>
<body>
<h2>Jquery selector selects based on id of html element</h2>
<p class="id_selector">Id of html element</p>
</body>
</html> Jquery selector lists:
| jQuery Selectors | Example | Description |
|---|---|---|
| * | $(“*”) | Used to Select all the elements in the document |
| #id | $(“#firstname”) | It will select the given id (#firstname) of the html element |
| .class | $(“.primary”) | It will select the primary class of the html element |
| ".class, .class" | "$(“.primary, .secondary”)" | Used to select the multiple classes of html elements |
| element | $(“p”) | It will select the name of the html element |
| "element1, element2" | "$(“h1,div,p”)" | It will select the multiple name of the html elements |
| :first | $(“p:first”) | It will select the first p element |
| :last | $(“p:last”) | It will select the last p element |
| :even | $(“tr:even”) | Used to select all even tr elements |
| :odd | $(“tr:odd”) | Used to select all odd tr elements |
| ;first-child | $(“p:first-child”) | Used to select every element that is the first child of its parent element |
| :first-of-type | $(“p:first-of-type”) | Used to select all p elements that are the first p element of their parent |
| :last-child | $(“p:last-child”) | Used to select every element that is the last child of its parent element |
| :last-of-type | $(“p:last-of-type”) | Used to select all p elements that are the first p element of their parent |
| :nth-child() | $(“p:nth-child(2)”) | It will select all p elements that are the 2nd child of their parent. |
| :nth-last-child(n) | $(“p:nth-last-child(2)”) | "It 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)”) | "It will select all p elements that are the 2nd p element of their parent, counting from the last child" |
| :only-child | $(“p:only-child”) | Used to select all p elements that are the only child of their parent |
| :only-of-type | $(“p:only-of-type”) | "Used to select all p elements that are the only child, of its type, of their parent" |
| parent > child | $(“div > p”) | Used to select all p elements that are a direct child of a div element |
| parent descendant | $(“div p”) | Used to select every element which is descendant to a specific(parent) element |
| element + next | $(“div + p”) | It will select the p element that is next to each div element |
| element ~ siblings | $(“div ~ p”) | Used to select all p elements that are siblings of a div element |
| eq() | $(“ul li:eq(3)”) | Used to locate the selected elements directly and returns an element with a specific index |
| :gt() | $(“ul li:gt(3)”) | Used to select the list elements with an index greater than 3 |
| :lt() | $(“ul li:lt(3)”) | Used to select the list elements with an index less than 3 |
| :not() | $(“input:not(:empty)”) | Used to select all the elements which are not selected. |
| :header | $(“:header”) | Used to select all the heading elements that are from (to). |
| animated | $(“:animated”) | Used to select the element that is currently animated. |
| :focus | $(“:focus”) | It is used to select all the elements that have focused on the document currently. |
| :contains(text) | $(“:contains(‘Hello’)”) | It is used to select all elements which contains the text “Hello” |
| :has(selector) | $(“div:has(p)”) | It is used to select all div elements that have a p element. |
| :empty | $(“:empty”) | It is used to select all elements that are empty. |
| :parent | $(“:parent”) | Used to select all elements that are a parent of another element. |
| :hidden | $(“p:hidden”) | It is used to select hidden elements(p) to work upon. |
| :visible | $(“table:visible”) | It is used to select all the elements that are currently visible in the document.(tables) |
| :root | $(“:root”) | It is used to select the root element of the HTML document. |
| :lang() | $(“p:lang(de)”) | Used to select all the elements which have the lang attribute with the specified value(de). |
| [attribute] | $(“[attribute]”) | Used to select all the elements with the specified attribute. |
| [attribute!=value] | $(“[attribute!=’value’]”) | Used to select each element that doesn’t have the specified attribute and value. |
| [attribute$=value] | $(“[attribute$=’value’]”) | "Used to select each element with a specific attribute, with a specific ending string(.jpg)." |
| [attribute|=value] | $(“[attribute|=’value’]”) | "Used to select all elements with a title attribute value equal to ‘value’, or starting with ‘value’ followed by a hyphen" |
| [attribute^=value] | $(“[attribute^=’value’]”) | Used to select all elements with the given attribute specified by the attribute parameter. |
| [attribute~=value] | $(“[attribute~=’value’]”) | Used to select all elements with a name attribute that contains the specific string. |
| [attribute*=value] | $(“[attribute*=’value’]”) | Used to select all elements with attributes specified by the attribute parameter. |
| :input | $(“:input”) | It is used to select all input elements |
| :text | $(“:text”) | It is used to select all input elements with type=”text” |
| :password | $(“:password”) | It is used to select all input elements with type=”password” |
| :radio | $(“:radio”) | It is used to select all input elements with type=”radio” |
| :checkbox | $(“:checkbox”) | It is used to select all input elements with type=”checkbox” |
| :submit | $(“:submit”) | It is used to select all input elements with type=”submit” |
| :reset | $(“:reset”) | It is used to select all input elements with type=”reset” |
| :button | $(“:button”) | It is used to select all input elements with type=”button” |
| :image | $(“:image”) | Used to select the input element having an image field.(type=”image”) |
| :file | $(“:file”) | Used to select the input element having a file type.(type=”file”) |
| :enabled | $(“:enabled”) | Used to select all enabled elements |
| :disabled | $(“:disabled”) | It is used to select all disabled input elements |
| :selected | $(“:selected”) | It is used to select all selected input elements |
| :checked | $(“:checked”) | It is used to select all checked input elements |
| jQuery Selectors | Example | Description |
| * | $(“*”) | Used to Select all the elements in the document |
| #id | $(“#firstname”) | It will select the given id (#firstname) of the html element |
| .class | $(“.primary”) | It will select the primary class of the html element |
| .class, .class | $(“.primary, .secondary”) | Used to select the multiple classes of html elements |
| element | $(“p”) | It will select the name of the html element |
| element1, element2 | $(“h1,div,p”) | It will select the multiple name of the html elements |
| :first | $(“p:first”) | It will select the first p element |
| :last | $(“p:last”) | It will select the last p element |
| :even | $(“tr:even”) | Used to select all even tr elements |
| :odd | $(“tr:odd”) | Used to select all odd tr elements |
| ;first-child | $(“p:first-child”) | Used to select every element that is the first child of its parent element |
| :first-of-type | $(“p:first-of-type”) | Used to select all p elements that are the first p element of their parent |
| :last-child | $(“p:last-child”) | Used to select every element that is the last child of its parent element |
| :last-of-type | $(“p:last-of-type”) | Used to select all p elements that are the first p element of their parent |
| :nth-child() | $(“p:nth-child(2)”) | It will select all p elements that are the 2nd child of their parent. |
| :nth-last-child(n) | $(“p:nth-last-child(2)”) | It 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)”) | It will select all p elements that are the 2nd p element of their parent, counting from the last child |
| :only-child | $(“p:only-child”) | Used to select all p elements that are the only child of their parent |
| :only-of-type | $(“p:only-of-type”) | Used to select all p elements that are the only child, of its type, of their parent |
| parent > child | $(“div > p”) | Used to select all p elements that are a direct child of a div element |
| parent descendant | $(“div p”) | Used to select every element which is descendant to a specific(parent) element |
| element + next | $(“div + p”) | It will select the p element that is next to each div element |
| element ~ siblings | $(“div ~ p”) | Used to select all p elements that are siblings of a div element |
| eq() | $(“ul li:eq(3)”) | Used to locate the selected elements directly and returns an element with a specific index |
| :gt() | $(“ul li:gt(3)”) | Used to select the list elements with an index greater than 3 |
| :lt() | $(“ul li:lt(3)”) | Used to select the list elements with an index less than 3 |
| :not() | $(“input:not(:empty)”) | Used to select all the elements which are not selected. |
| :header | $(“:header”) | Used to select all the heading elements that are from (<h1> to <h6>). |
| animated | $(“:animated”) | Used to select the element that is currently animated. |
| :focus | $(“:focus”) | It is used to select all the elements that have focused on the document currently. |
| :contains(text) | $(“:contains(‘Hello’)”) | It is used to select all elements which contains the text “Hello” |
| :has(selector) | $(“div:has(p)”) | It is used to select all div elements that have a p element. |
| :empty | $(“:empty”) | It is used to select all elements that are empty. |
| :parent | $(“:parent”) | Used to select all elements that are a parent of another element. |
| :hidden | $(“p:hidden”) | It is used to select hidden elements(p) to work upon. |
| :visible | $(“table:visible”) | It is used to select all the elements that are currently visible in the document.(tables) |
| :root | $(“:root”) | It is used to select the root element of the HTML document. |
| :lang() | $(“p:lang(de)”) | Used to select all the elements which have the lang attribute with the specified value(de). |
| [attribute] | $(“[attribute]”) | Used to select all the elements with the specified attribute. |
| [attribute!=value] | $(“[attribute!=’value’]”) | Used to select each element that doesn’t have the specified attribute and value. |
| [attribute$=value] | $(“[attribute$=’value’]”) | Used to select each element with a specific attribute, with a specific ending string(.jpg). |
| [attribute|=value] | $(“[attribute|=’value’]”) | Used to select all elements with a title attribute value equal to ‘value’, or starting with ‘value’ followed by a hyphen |
| [attribute^=value] | $(“[attribute^=’value’]”) | Used to select all elements with the given attribute specified by the attribute parameter. |
| [attribute~=value] | $(“[attribute~=’value’]”) | Used to select all elements with a name attribute that contains the specific string. |
| [attribute*=value] | $(“[attribute*=’value’]”) | Used to select all elements with attributes specified by the attribute parameter. |
| :input | $(“:input”) | It is used to select all input elements |
| :text | $(“:text”) | It is used to select all input elements with type=”text” |
| :password | $(“:password”) | It is used to select all input elements with type=”password” |
| :radio | $(“:radio”) | It is used to select all input elements with type=”radio” |
| :checkbox | $(“:checkbox”) | It is used to select all input elements with type=”checkbox” |
| :submit | $(“:submit”) | It is used to select all input elements with type=”submit” |
| :reset | $(“:reset”) | It is used to select all input elements with type=”reset” |
| :button | $(“:button”) | It is used to select all input elements with type=”button” |
| :image | $(“:image”) | Used to select the input element having an image field.(type=”image”) |
| :file | $(“:file”) | Used to select the input element having a file type.(type=”file”) |
| :enabled | $(“:enabled”) | Used to select all enabled elements |
| :disabled | $(“:disabled”) | It is used to select all disabled input elements |
| :selected | $(“:selected”) | It is used to select all selected input elements |
| :checked | $(“:checked”) | It is used to select all checked input elements |
Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example