JC Web Concepts

Custom Web Developments

jQuery Basics Tutorial

| Comments

jQuery is an upcoming/hot thing right now when it comes to web development. To me jQuery is slowly taking over flash. There are lots of things I can do in jQuery that I would have programmed in flash for. Before you kill the messenger there are things out there that flash can do that jQuery can’t. So let me post the source code for the tutorial and below that you can watch in video as I explain.

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<html>
  <head>
      <title>jQuery Basics Tutorial</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function() {
              $('#employees tbody tr:odd').addClass('alternaterow');
              $('#employees tbody tr:odd').removeClass('alternaterow');
              
              $('#hideButton').click(function() {
                  $('#employees').hide();
              });
              
              $('#toggleButton').click(function() {
                  $('#employees').toggle();
              })
          });
        </script>
        <style type="text/css">
          .alternaterow
          {
              background-color: #ccc;
          }
        </style>
    </head>
    <body>
        <input type="button" id="hideButton" value="Hide Table" />
        <input type="button" id="toggleButton" value="Hide / Show" />
        <table id="employees">
          <tr>
              <td>
                  John
                </td>
                <td>
                  Smith
                </td>
                <td>
                  Developer
                </td>
            </tr>
            <tr>
              <td>
                  Greg
                </td>
                <td>
                  Smith
                </td>
                <td>
                  Owner
                </td>
            </tr>
            <tr>
              <td>
                  Michelle
                </td>
                <td>
                  Smith
                </td>
                <td>
                  Web Developer
                </td>
            </tr>
            <tr>
              <td>
                  Scott
                </td>
                <td>
                  Smith
                </td>
                <td>
                  IT Administrator
                </td>
            </tr>
            <tr>
              <td>
                  Michelle
                </td>
                <td>
                  Smith
                </td>
                <td>
                  Web Developer
                </td>
            </tr>
        </table>
    </body>
</html>