Part 4 - Element selectors in JQuery?
What are selectors in jQuery?
A jQuery selectors selects or finds a DOM element in an HTML document. It is used to select HTML elements based on id, name, types, attributes, class etc.
popular selectors
Example: $(":input[type='button']") , $(":input[type='radio']")
ID and Class selectors
In this tutorial only Element selectors are explained. Element selectors are used to select element by element name. For example: div, p, span, h1, h2 etc.
popular selectors
- Id selectors
- Class selectors
- Element selectors
- Attribute selectors
Example: $(":input[type='button']") , $(":input[type='radio']")
ID and Class selectors
In this tutorial only Element selectors are explained. Element selectors are used to select element by element name. For example: div, p, span, h1, h2 etc.
# Example
Replace your html code with below code and try to show alert on button click in Jquery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("span ").css({ "border": "2px solid red", "padding": "10px" });
$("table th").css({ "background-color": "red", "color": "white" });
$("table tr:even").css({ "background-color": "blue", "color": "white" });
$("table tr:odd").css({ "background-color": "yellow", "color": "black" });
$("p:first").css({ "border": "2px solid blue", "padding": "10px" });
$("p:last").css({ "border": "2px solid blue", "padding": "10px" });
})
</script>
</head>
<body>
<div class="div1" style="margin-bottom:50px;padding:10px">
<button>click</button>
<span>child1 </span>
</div>
<div class="div2" style="margin-bottom: 50px;padding:10px">
<button>click</button>
<span>child2 </span>
</div>
<div>
<table border="1" style="width:30%">
<tr>
<th>
Name
</th>
<th>Department</th>
</tr>
<tbody>
<tr><td>Ashish</td><td>Development</td></tr>
<tr><td>John</td><td>QA</td></tr>
<tr><td>Sara</td><td>Development</td></tr>
<tr><td>Lara</td><td>Implementation</td></tr>
<tr><td>Methew</td><td>Development</td></tr>
<tr><td>Ashish</td><td>Development</td></tr>
</tbody>
</table>
</div>
<h1>header1</h1>
<h2>header2</h2>
<h3>header3</h3>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</body>
</html>
0 Response to "Part 4 - Element selectors in JQuery?"
Post a Comment