Jquery | Basic Selectors-Trickcode

 jQuery: Basic selector

• Basic Selectors are select an element based on their essential features only.
• We had done the property of basic selectors and their fundamental features.
• Here, we proceed with the aspects of Basic selectors and some fine Examples of those selectors.

Selectors	Description	Example
Element	A selection is Based on an Element Name.	$(“p”).text();
Element1,,ElementN	It select several HTML Elements based on an element Name.	$(“p”,”h1”,”div”).text();
Id	A selection is based on Unique id Attribute.	$(“#p1”).text();
Class	In this selector manipulate a jquery based on an element's class name.	$(“.p1”).text();
*	This selector called as universal selector that select an entire element.	$(*).text();

jQuery: Element Based Selection

• This selector helps to manipulate the jquery based on the HTMLDocument Element.

$(document).ready(function () {
    $('button').click(function () {
        alert( $('p').text());
    });
});

• Here,’button’ and ‘p’ are an element based selectors. And click is an event to perform an alert task. 
• This example shows the P element text when the button fires the click event.

jQuery: Multi Element Section

• This selector gives an option to select more HTMLElement.
• It helps to manipulate the jquery based on more than one Element.
• In this multiple element selection, each and every element separated by a comma,

$(document).ready(function () {
  $('button').click(function () {
        alert($('p,h1,div').text());
    });
});

• This example shows the text of P,h1, Div elements.

jQuery: ID Based Selector

• In this selection based on the unique Id of a selected Element.
• In this selector used to pick a particular or unique element.
• We mention an Id name followed by # symbol only.

$(document).ready(function () {
    $('#btnclick').click(function () {
        alert($('#p1').text());
    });
});

jQuery: Class-Based Selector

• This selection based on their class name. The class selectors are followed by.[dot] symbol.
• It picks an element based on HTMLElement’s class name.

 $(document).ready(function () {
    $('.btn').click(function () {
        alert($('.Ptxt').text());
    });
});

jQuery: * Universal Selector

• It selects the entire element of the selected element. 
• The symbol * specifies the entire HTML element.

$(document).ready(function () {
    $('button').click(function () {
        alert($('*').text());
    });
});

• This selector contains the whole document of the body content.