Monday, 9 April 2018



jQuery - Selectors


jQuery Selectors are used to select one or more HTML elements and once the element is selected then we can perform various operation on that. jQuery Selectors are used to select and manipulate HTML elements as part of jQuery library.

All jQuery selectors start with a dollor sign and parenthesis e.g. $(). It is known as the factory function.

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

$("p")

When a user clicks on a button, all <p> elements will be hidden:

Example

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

Usage of Selectors:

Name:  It selects all elements that match with the given element name.

#ID: It selects a single element that matches with the given id.

.Class: It selects all elements that match with the given class.

Universal(*): It selects all elements available in a DOM.

Examples of jQuery selectors

$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"

$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"

$(":button") Selects all <button> elements and <input> elements of type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements




7 comments :

  1. This will be a great place for the beginners as well as intermediates as this blog contains very useful and interesting topic with super clean explanation...
    Best Online Software Training Institute | jQuery Training

    ReplyDelete
  2. AWS Training in Bangalore - Live Online & Classroom
    myTectra Amazon Web Services (AWS) certification training helps you to gain real time hands on experience on AWS. myTectra offers AWS training in Bangalore using classroom and AWS Online Training globally. AWS Training at myTectra delivered by the experienced professional who has atleast 4 years of relavent AWS experince and overall 8-15 years of IT experience. myTectra Offers AWS Training since 2013 and retained the positions of Top AWS Training Company in Bangalore and India.

    IOT Training in Bangalore - Live Online & Classroom
    IOT Training course observes iot as the platform for networking of different devices on the internet and their inter related communication. Reading data through the sensors and processing it with applications sitting in the cloud and thereafter passing the processed data to generate different kind of output is the motive of the complete curricula. Students are made to understand the type of input devices and communications among the devices in a wireless media.

    ReplyDelete
  3. Really I Appreciate The Effort You Made To Share The Knowledge. This Is Really A Great Stuff For Sharing. Keep It Up . Thanks For Sharing.

    Mobile Apps Training
    Mobile Apps Training in Chennai

    ReplyDelete
  4. Wow, Excellent post. This article is really very interesting and effective.The article you have shared here very awesome. I really like and appreciated your work. I read deeply your article, the points you have mentioned in this article are useful.

    iOS Training
    iOS Training in Chennai

    ReplyDelete
  5. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
    Selenium Training in Bangalore | Selenium Training in Bangalore | Selenium Training in Bangalore | Selenium Training in Bangalore

    ReplyDelete
  6. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

    ReplyDelete
  7. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    professional logo designers in chennai

    ReplyDelete