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

A Simple JQuery Example - jquery_example.html

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 - jquery_resize.html

JQuery Textarea Resizing

<script type="text/javascript" src="jquery.textarearesizer.compressed.js" />

$("#myresizefield:not(.processed)").TextAreaResizer();

<textarea id="myresizefield">Resize me!</textarea>

JQuery Form Validation - jquery_form.html

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…

the W3C JavaScript logo JavaScript (jquery_pres.js)

the W3C CSS logo CSS (jquery_pres.css)

the W3C HTML logo 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…