Tutorial JQuery : use of Selectors

Selectors are most important part of JQuery.

$(“.class”) is for selecting a class.
$(“#id”) is for selecting an ID.
$(“tag”) is for selecting a tag.
$(“*”) is for selecting all elements in the body.
$(this) is for selecting current HTML element.
$(“p:first”) is for selecting 1st paragraph.
$(“ul:li:first”) is for selecting first <li> element of the first <ul>.
$(“ul li:first-child”) is for selecting 1st <li> element of every <ul>.
$(“p.class”) is for selecting all <p> elements within a specific class.
$(“p#id”) is for selecting all <p> elements with a ID.
$(“[attribute]”) is for selecting all elements with an attribute.
$(“a[target=’_blank’]”) is for selecting all the <a> elements with a target attribute value equal to 
“_blank”.
$(“a[target!=’blank’]”) is for selecting all the <a> elements with a target value not equal to ‘_blank’.
$(“:button”) is for selecting all the <button> elements and <input> elements with a type=”button”.
$(“tr:even”) is for selecting all even <tr> elements.
$(“tr:odd”) is for selecting all odd <tr> elements.

You can use any of these selectors according to your requirements.

Above a HTML where u can see some paragraph, h3,input elements.

There you can see a JQuery code. Inside the body of document.ready I am using a selector to select my class and on click of that class element I am selecting all my paragraphs and applying fadeout. In the bracket, 1000 is the amount of milliseconds required to apply the effect. Run this code in browser and you will see this:

After a click on the button these paragraphs will be fadeout so you will see this:

FadeToggle is used to do apply both hide and display effects so if you use fadeToggle it will hide our paragraphs when they are displayed and will display them when they are hidden.

$(document).ready(function(){
    $(".new").click(function(){
        $("p").fadeToggle(1000);
        
    });

This above line is the syntax to apply fadeToggle.

In the above given photo I have shown you the method of selecting a paragraph with class cd and h3 elements.

Here is another example of applying the fadeToggle effect on the 1st paragraph in body.

Here You can see a table with some rows and data.

The table looks like this in browser.

After writing this line your table will look like this.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---