Home > DeveloperSection > Articles > JQuery Selector

JQuery Selector


JQuery JQuery 
Ratings:
0 Comment(s)
 2088  View(s)
Rate this:

JQuery Selector

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).

 


Don't want to miss updates? Please click the below button!

Follow MindStick