Selecting elements by class name
Syntax of jQuery class selector
$(“.classname”);
Selecting elements by class names requires calling by ‘.’ (period) followed by the class name of the element. The jQuery selector will search for the given class in the document and perform given action.
Example of Selector by Class name
In the example below, Div with class=text will be shown and Show button is made hidden when the document is ready. As you click on “Hide text” button div will be hidden and “Show text” button will be shown.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<html>
<head>
<title>jQuery Testing</title>
<script type=“text/javascript” src=“jquery/jquery-1.10.2.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.showtext”).hide();
$(“.hidetext”).click(function () {
$(“.text”).hide();
$(“.showtext”).show();
$(“.hidetext”).hide();
});
$(“.showtext”).click(function () {
$(“.text”).show();
$(“.showtext”).hide();
$(“.hidetext”).show();
});
});
</script>
</head>
<body>
<button class=“hidetext”>Hide Text</button>
<button class=“showtext”>Show Text</button>
<div class=“text” style=“background-color:yellow;”>
This is Yellow line!!
</div>
</body>
</html>
|
In real time development, your class name specifications may be specified in an outer CSS file.
Leave A Comment?