Difference between revisions of "JavaScript:jQuery"

From Progzoo
Jump to: navigation, search
(Hello World)
(Hello World)
Line 5: Line 5:
 
q1.html</th><th>q1.js</th></tr>
 
q1.html</th><th>q1.js</th></tr>
 
<tr><td>
 
<tr><td>
<pre><![CDATA[
+
<pre>
 
<!doctype html>
 
<!doctype html>
 
<script src="jquery.min.js"></script>
 
<script src="jquery.min.js"></script>
Line 11: Line 11:
 
<body>
 
<body>
 
</body>
 
</body>
]]></pre>
+
</pre>
 
</td><td style='vertical-align:top'>
 
</td><td style='vertical-align:top'>
 
<pre><![CDATA[
 
<pre><![CDATA[

Revision as of 10:28, 2 January 2013

Introduction to jQuery and JavaScript

Hello World

Create two files yourself; q1.html and q1.js – these have the following content:

q1.htmlq1.js
<!doctype html>
<script src="jquery.min.js"></script>
<script src="q1.js"></script>
<body>
</body>
<![CDATA[
$(function(){
  alert('Hello World');
});
]]>

Download the jQuery file from http://jquery.com and save it in the same directory. Load q1.html into a web browser: Hello jQuery.png

Adding Content

The $ function is called once the main page elements are loaded. You can build content in the ready function or you can examine the existing page when ready:

<![CDATA[
$(function(){
  $('body').append("Here is a button:");
  $('body').append($('<button/>',{text:'Click me'}));
});
You can make your button do something:
<pre><![CDATA[
$(function(){
  $('body').append("Here is a button:");
  $('body').append($('<button/>',{text:'Click me',
    click:function(){
      alert('Hello World');
    }}));
});
]]>