Zack's JQuery Jumpstart
What is JQuery?
Simple
Very popular
DOM-centric
Set of JavaScript utilities
JQuery is not
A framework
Object-oriented
Type safe
GWT
JQuery was made by John Resig (http://www.ejohn.org)
John is a JavaScript evangelist for Mozilla
The Tao of JQuery
Super small – Only 19Kb
Light weight – Use only what you want
Flexible – Easily works with other frameworks
Modular – Over 3,000 plugins
Cross browser
Really well documented – Check it out!
Using JQuery
Import JQuery Core
<html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js" />
You Can Also Import From Google
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.3.2"); </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" />
$ is king
$ = JQuery
The Code
$(document).ready(function() { /* * Step 1. Make the red paragraph red */ $("#redpara").css("color", "red"); /* * Step 2. Add the listener to the sliding * paragraph */ $("#slidepara").click(function() { $("#slidepara").slideUp("normal"); }); /* * Step 3. Create a new paragraph */ $("#examplediv").append("<p>JQuery added this paragraph</p>"); });
JQuery is all about selectors
Select Individual Elements
$("#slidegrid")
<body> <div id="slidegrid"> <div class="cell bigcell"> <p> Some text in the cell </p> </div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </div> </body>
Select Multiple Elements
$(".cell").each
<body> <div id="slidegrid"> <div class="cell bigcell"> <p> Some text in the cell </p> </div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </div> </body>
Use Complex Selectors
$("#slidegrid > .bigcell > p")
<body> <div id="slidegrid"> <div class="cell bigcell"> <p> Some text in the cell </p> </div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </div> </body>
JQuery manipulates HTML
Append Elements
$("#slidegrid").append('<div class="cell">Cell 5</div>');
<body> <div id="slidegrid"> <div class="cell bigcell"> <p> Some text in the cell </p> </div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> <div class="cell">Cell 5</div> </div> </body>
Remove Elements
$(".cell:last").remove();
<body> <div id="slidegrid"> <div class="cell bigcell"> <p> Some text in the cell </p> </div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </div> </body>
Wrap Elements
$("#slidegrid").wrap(document.createElement("div").addClass("blueborder"));
<body> <div class="blueborder"> <div id="slidegrid"> <div class="cell bigcell"> <p> Some text in the cell </p> </div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </div> </div> </body>
Replace Elements
$(".cell").each(function() { $(this).text($(this).text() + " - changed"); });
<body> <div id="slidegrid"> <div class="cell">Cell 1 - changed</div> <div class="cell">Cell 2 - changed</div> <div class="cell">Cell 3 - changed</div> <div class="cell">Cell 4 - changed</div> </div> </body>
JQuery Does More
Handling Events
$("#mybutton").click(function() { alert("The button was pressed"); });
<button id="mybutton">Click me</button>
Creating Effects
$("#mypara").click(function() { $("#mybutton").slideUp("normal"); });
<p id="mypara">Click me</p>
Click me
Calling AJAX
$.ajax({ dataType: "json", data: "id=10", url: "/myAJAXServlet.do", success: function () { alert("success...") }, });
JQuery plugins add more functionality
JQuery Textarea Resizing
<script type="text/javascript" src="jquery.textarearesizer.compressed.js" /> $("#myresizefield:not(.processed)").TextAreaResizer();
<textarea id="myresizefield">Resize me!</textarea>
JQuery Validation
<script type="text/javascript" src="jquery.validate.js" /> $("#commentForm").validate();
<form class="cmxform" id="commentForm" method="get" action=""> <p> <label for="cname">Name:</label> <em>*</em> <input id="cname" name="name" size="25" class="required" minlength="2" /> </p> <p> <label for="cemail">E-Mail:</label> <em>*</em> <input id="cemail" name="email" size="25" class="required email" /> </p> ...
Putting it all together
Zack's JQuery Jumpstart is made of…
JavaScript (jquery_pres.js)
CSS (jquery_pres.css)
HTML (jquery_pres.html)
…And nothing else
…And The Five Examples
jquery_example.js (and jquery_example.html)
jquery_resize.js (and jquery_resize.html)
jquery_form.js (and jquery_form.html)
Create Your Own Sliding Resizable Grid (zackgrossbart.com/hackito)
And ask lots of questions…