jQuery – Selectors
jQuery selectors are used to “find” or “select” HTML elements based on their id, classes, name, types, attributes etc. It’s based on the existing CSS Selectors.
A jQuery Selector is find out matching elements from a DOM based on the given criteria. selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.
The $() factory function
In jQuery All selectors are start with the dollar sign and parentheses: $(), The factory function $() makes use of following three building blocks while selecting elements in a given document.
| Selector | Description |
| Name | Represents a tag name available in the DOM. For example $(‘p’) selects all paragraphs <p> in the document |
| ID |
Represents a tag available with the given ID in the DOM. For example $(‘#element-id’) selects the single element in the document that has an ID of element-id. |
| Class |
Represents a tag available with the given class in the DOM. For example $(‘.element-class’) selects all elements in the document that have a class of some-class. |
Example of jQuery – Selectors:
The #id Selector :
When a user clicks on a button, the element with id=”element-id” will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("#element-id").hide();
});
});
The .class Selector :
When a user clicks on a button, the elements with class=”element-class” will be hidden:
$(document).ready(function(){
$("button").click(function(){
$(".element-class").hide();
});
});
Other Examples of jQuery – Selectors are :
| Selector Syntax | Description |
| $(“h1”) | select all <h1> element |
| $(“*”) | it selects all the elements |
| $(this) | it selects current elements |
| $(“p.test”) | it select all <p> elements class name with test |
| $(“p:first”) | Selects the first <p> element |
| $(“: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 |
| $(“ul li:first”) | it selects fist <li> element of first <ul> |
| $(“ul li:first-child”) | it Selects the first <li> element of every <ul> |
| $(“:checked”) | it selects all checked form elements. |
| $(“:enabled”) | it selects all enabled form elements |
| $(“:contains(‘Hello’)”) | Selects all elements which contains the text “Hello” |
| $(“div:has(p)”) | Selects all <div> elements that have a <p> element |
Also Learn More Tutorial :
- ASP.Net Core: Form Submit (Post) with Example
- File(Image) Upload in ASP.NET Core MVC with Example
- .Net Core: Read Connection String from AppSettings.json file
- CRUD Operation Using Asp.Net Core Mvc with Repository Pattern
- Display Data in GridView(Grid) Using ASP.Net Core MVC
- Asp.Net Core: DbContext In EntityFramework core
- Difference between AddSingleton vs AddScoped vs AddTransient in asp.net core
- Difference between .NET Core and .NET Framework
- Difference between TempData keep() And Peek() in Asp.Net MVC
- Asp.Net Image Upload in 3-Tier Architecture and store in sql database
- ViewImports in ASP.NET Core MVC