---
title: "JQuery Selector"  
description: "In this article I have tried to explain the JQuery Selector and its working."  
author: "Vijay Shukla"  
published: 2012-12-29  
updated: 2019-07-16  
canonical: https://www.mindstick.com/articles/1097/jquery-selector  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# JQuery Selector

In this article I have tried to explain the JQuery Selector and its working.\

[JQuery selectors](https://www.mindstick.com/forum/34484/jquery-selectors) are one of the most important parts of the jQuery library. It’s a function which makes use of expressions to find out matching elements from a DOM (Document [Object Model](https://www.mindstick.com/forum/158432/what-is-the-document-object-model-dom-and-how-does-it-relate-to-web-development)) based on the given criteria. You can find elements on their id, classes, types, [attributes](https://www.mindstick.com/articles/13105/2-attributes-that-make-your-odoo-ecommerce-theme-productive-and-engaging), values of attributes and much more by the help of JQuery selectors; it has some individual custom selectors. All kind of [selectors in jQuery](https://www.mindstick.com/interview/2540/what-are-the-types-of-selectors-in-jquery) begin with the dollar sign and parentheses: $().

Three [building blocks](https://www.mindstick.com/interview/2344/what-are-the-core-building-blocks-of-android) while selecting elements in a given document:

##### Tag Name:

Signify a tag name which is available in the DOM (Document Object Model).

Example $('div') selects all <div> in the document.

##### Below is script:

```
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").hide();
  });
});
</script>
```

##### Below is HTML Code:

```
<h1>This is a heading</h1>
<div>This is a DIV. </div>
<div>This is another DIV. </div>
<input type=”button”/>
```

##### Tag ID:

Signify a tag which is available with the given ID in the DOM.

Example $('# any-id') this is select a single element in the document which id of ‘any-id ‘.

##### Below is script:

```
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#paragraph").hide();
  });
});
</script>
```

##### Below is HTML Code:

```
<h2>This is a heading</h2>
<p>This is a paragraph. </p>
<p id="paragraph">This is another paragraph. </p>
<input type=”button”/>
```

##### Tag Class:

Signify a tag which is available with the given class in the DOM (Document Object Model).

Example $('.any-class') selects all elements in the document that have a class of any-class.

##### Below is Script.

```
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".heading").hide();
    $(".paragraph").hide();
  });
});
</script>
```

##### Below is HTML Code:

```
<h2 class="heading">This is a heading</h2>
<p class="paragraph">This is a paragraph.</p>
<p>This is another paragraph.</p>
<input type="button"/>
```

JQuery script need the JQuery file to run script in this HTML [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) and below line is [alternative](https://www.mindstick.com/forum/2324/what-is-the-alternative-to-the-mvc) the use JQuery file.

\

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
```

Above line for include it from a CDN ([Content Delivery Network](https://www.mindstick.com/interview/33679/what-is-content-delivery-network)).

---

Original Source: https://www.mindstick.com/articles/1097/jquery-selector

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.