Skip to main content

jQuery Selectors

How to find elements from HTML using jQuery

In this article, you will learn about jQuery selectors and how to find DOM element(s) using selectors.

The jQuery selector provides functionality to find DOM elements in your web page. jQuery selectors are one of the most important parts of the jQuery library.

All selectors in jQuery start with the dollar sign and parentheses: $().

jQuery Selector Syntax

$(selector expression)

Example 1 : The .class Selector

The jQuery .class selector allow you to finds all the elements with a specific class.

If you want to find all the elements with class name "post-title" then the syntax will be as following.

$(".post-title")
 

Example 2 : The #Id Selector

The jQuery #Id selector allow you to finds the particular element with a specific Id.

The Id selector will be used when you want to find single element from web page. 

$(document).ready(function(){
  $("#btn-hide-title").click(function(){
    $(".post-title").hide();
  });
});

In above example, when a user click (button hide title) all the elements with class name "post-title" will be hidden.

jQuery Selector Patterns

$(":text") Selects all input elements where type="text"
$("input") Selects all input elements
$(":button") Selects all input elements where type="button"
$(":visible") Selects all visible elements
$(":hidden") Selects all hidden elements
$(":enabled") Selects all enabled elements
$(":disabled") Selects all disabled elements
$(":checked") Selects all checked input elements
$("tr:first-child") Selects the first tr element
$("tr:last-child") Selects the last tr element
$("div[class='test']") Find all the div elements whose class attributes is test
$(this) Select the current element
$("input[name='radio-gender']") Find the radio button whose name attribute is radio-gender
Labels:

Comments

Post a Comment

Popular posts from this blog

Angular 14 CRUD Operation with Web API .Net 6.0

How to Perform CRUD Operation Using Angular 14 In this article, we will learn the angular crud (create, read, update, delete) tutorial with ASP.NET Core 6 web API. We will use the SQL Server database and responsive user interface for our Web app, we will use the Bootstrap 5. Let's start step by step. Step 1 - Create Database and Web API First we need to create Employee database in SQL Server and web API to communicate with database. so you can use my previous article CRUD operations in web API using net 6.0 to create web API step by step. As you can see, after creating all the required API and database, our API creation part is completed. Now we have to do the angular part like installing angular CLI, creating angular 14 project, command for building and running angular application...etc. Step 2 - Install Angular CLI Now we have to install angular CLI into our system. If you have already installed angular CLI into your system then skip this step.  To install angular CLI ope...
Post a Comment
Read more

Send an Email via SMTP with MailKit Using .NET 6

How to Send an Email in .NET Core This tutorial show you how to send an email in .NET 6.0 using the MailKit email client library. Install MailKit via NuGet Visual Studio Package Manager Console: Install-Package MailKit How to Send an HTML Email in .NET 6.0 This code sends a simple HTML email using the Gmail SMTP service. There are instructions further below on how to use a few other popular SMTP providers - Gmail, Hotmail, Office 365. // create email message var email = new MimeMessage(); email.From.Add(MailboxAddress.Parse("from_address@example.com")); email.To.Add(MailboxAddress.Parse("to_address@example.com")); email.Subject = "Email Subject"; email.Body = new TextPart(TextFormat.Html) { Text = "<h1>Test HTML Message Body</h1>" }; // send email using var smtp = new SmtpClient(); smtp.Connect("smtp.gmail.com", 587, SecureSocketOptions.StartTls); smtp.Authenticate("[Username]", "[Password]"); smtp.Se...
Post a Comment
Read more

React js CRUD Example Step by Step

How to build basic CRUD app with ReactJS Here's an example of building a simple CRUD application for managing a list of books. Step 1: Set up the React application To set up the React application, you'll need to have Node.js and NPM installed on your computer. Open a terminal or command prompt and create a new directory for your project. mkdir react-crud-app cd react-crud-app Next, initialize a new React application using the create-react-app CLI. npx create -react-app . Step 2: Create a list of books In this step, you'll create a list of books and display them in a table. Create a new file BookList.js in the src directory and add the following code: import React from 'react' ; const BookList = ( { books } ) => { return ( < table > < thead > < tr > < th > Title </ th > < th > Author </ th > < th > Actions </ th > </ tr > ...
Post a Comment
Read more