-->

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
  1. Id selectors
  2. Class selectors
  3. Element selectors
  4. Attribute selectors
For selecting input elements like Select, TextArea, Button, Image, Radio etc. we can use $(“:input”) selector. It will return a collection of input elements.
 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

Popular posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel