JQuery Selectors Overview and Types
jQuery Selector is a function used to identify the Elements in the HTML DOM and Apply the jQuery Methods to the Elements in the Webpage. There are three Types of Selectors like Basic Selectors, Positional Sector and Custom Selectors. Learn JQuery Selectors Overview and Types
jQuery Selectors - Introduction
1. It is function and always starts with $Sign.
2. It is used to identify the Element in the page.
3. To apply the JQuery Library method.
Syntax
$(<selector>).MethodName()
Explanation
1. $ - Part of the Syntax
2. Selector - Name of the HTML Element
3. MethodName - jQuery Method Name which is be applied on the Element.
Example
$("h3").hide() - Hides all the h3 Element in the Webpage. How to Use the Selectors
Selectors are used based on the
1. Element Name
2. css Class Name
3. id Name
4. * - Refers to all the Elements in the Page.jQuery Selector - Types
There are three Categories of Selectors
1. Basic CSS Selector
2. Positional Selector
3. Custom jQuery Selectors 1. Basic CSS Selector
1. It is also called Find Selector and used to find the Element within the HTML DOM Element.
Example
1. $(E) - Selects the Specific Element.
//Changes all the h1 Element color Text to Red.
$("h1")").css("color", "red")
2. $(*) - Selects all the Elements in the HTML DOM Structure.
//Changes All the Element's Background color to green
$("*").css("background-color","green"); 2. Positional Selector
Selects the Element According to their position in HTML Page.
Examples
Note: Example Samples are based on this HTML Code
<table border=1>
<tr>
<th>Name</td>
<th>Age</td>
</tr>
<tr>
<td>Sanjay</td>
<td>17</td>
</tr>
<tr>
<td>Jaya</td>
<td>18</td>
</tr>
<tr>
<td>Latha</td>
<td></td>
</tr>
</table>
Examples:
1. B:first
$("tr:first").css("background-color","yellow"); - changes the first row background color to yellow
2. B:last
$("tr:last").css("background-color","green"); -
changes the last row background color to green
3. B.even
$("tr:even").css("color","red"); - Changes the even row text color to red
4. B.odd
$("tr:odd").css("color","brown"); - changes the odd row text color to brown
5. B.first-child
$("td:first-child").hide(); - hides all first td tags in the table
6. B.last-child
$("td:last-child").hide(); - hides all last td tags in the table
7. B.gt(number)
$("td:gt(3)").hide(); - hides all the td greater than 3
8. B.lt(number)
$("td:lt(3)").hide(); - // hides all the td less than 3
9. B.equal
$("td:eq(3)").hide(); - // hides td equal to 3
10. B.empty
$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)'); - Finds the empty td tag in the table3. Custom Selector
Selects the Element According to their type or property
Example
$("input:button") - Selects the Button Element.
$("input:radio") - Selects the Radio Element.
$("input:checkbox") - Selects the Checkbox Element.
$("input:text")- Selects the Text Element.
This is nice. Thanks for the heads up...