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