articles

Home / DeveloperSection / Articles / JQuery Selector

JQuery Selector

Vijay Shukla 4894 29-Dec-2012

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

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) based on the given criteria. You can find elements on their id, classes, types, attributes, values of attributes and much more by the help of JQuery selectors; it has some individual custom selectors. All kind of selectors in jQuery begin with the dollar sign and parentheses: $().

Three building blocks 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 and below line is alternative 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).

 


Updated 16-Jul-2019

Leave Comment

Comments

Liked By