Scribd
Upload
77 views34 pages

Advanced Ajax and Javascript: Using The Jquery Library

This document provides an overview of jQuery, a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. It discusses how to include jQuery in a web page, basic syntax using the $ function and selectors, chaining and traversing methods, effects like hide and fade, event handling, and making Ajax requests. It also introduces jQuery UI, a separate library that adds interactions, widgets, and effects like draggable, droppable, and dialogs.

Uploaded by

Cho Paeng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
77 views34 pages

Advanced Ajax and Javascript: Using The Jquery Library

This document provides an overview of jQuery, a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. It discusses how to include jQuery in a web page, basic syntax using the $ function and selectors, chaining and traversing methods, effects like hide and fade, event handling, and making Ajax requests. It also introduces jQuery UI, a separate library that adds interactions, widgets, and effects like draggable, droppable, and dialogs.

Uploaded by

Cho Paeng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

Advanced Ajax and JavaScript

Using the jQuery Library


What is jQuery?

“jQuery is a fast and concise JavaScript Library


that simplifies HTML document traversing, event
handling, animating, and Ajax interactions for
rapid web development. jQuery is designed to
change the way that you write JavaScript.”

http://jquery.com
Get jQuery
http://jquery.com

Development version (for development)


“Minified” version (for deployment)
Get Help

http://docs.jquery.com
• API documentation
• Examples
• Tutorials
Using jQuery: in your web page
<head>
. . .
<script type="text/javascript"
src="jquery.js"></script>
. . .
</head>
Using jQuery: in your JS
$(document).ready(function(){
// Your code here . . .
});

• You can still declare functions elsewhere


Basic Syntax
• $: the jQuery function
• $(selector).function();
Selectors
• tagname
• #id
• .class
• :button, :submit, :checked,
:animated, etc.
• [name=value], etc.
• …
• Combinations:
– form#myForm input:submit:enabled
• http://docs.jquery.com/Selectors
Chainability/Traversing
• Most methods return the objects that they
acted on, so you can chain functions together
– $(selector).fadeOut().slideUp();
• Other methods modify your selection
– add(), find()
– children(), parent()
–…
• Undo with end()
• http://docs.jquery.com/Traversing
More with $()
• $(html);
– Create a DOM element from a string html
– $("<div />").addClass("dynamic")
.text("hi world!")
.appendTo("body");
• http://docs.jquery.com/Core
Effects
• $(".hideus").hide();
• $("#showme").hide("slow");
• $("#hideme").fadeOut();
• $(".showus").slideDown();
• $(".class“).animate(…);
• …
• http://docs.jquery.com/Effects
Events
• Old way:
<input id="myButton" type="button"
onclick="doSomething();"
value="Click me!" />
• With jQuery:
$("#myButton").click(doSomething);
Events
// disable buttons when clicked
$("input:button").click(function() {
$(this).attr("disabled",
true).val("Disabled!");
});

• http://docs.jquery.com/Events
http://cloud.cs50.net/~jbolduc/jquery/button.html
Ajax
$.get(url, [data], [callback], [type]);
$.post(url, [data], [callback], [type]);
• url: the URL to access
• data: data to send, as key/value pairs or as query
string
• callback: function to call on success
– Parameters: data, textStatus = success
– $.get() and $.post() don’t support error
callbacks
• type: format of data
Ajax
• $.ajax(options);
– Lower-level access (error callbacks, HTTP
authentication, and more)
• …
• http://docs.jquery.com/Ajax
JSON
• JavaScript Object Notation
• Concise data-interchange format
• http://json.org
JSON

Images from http://json.org


JSON

Images from http://json.org


JSON
{"key":"value","key2":"value2"}

Images from http://json.org


JSON and PHP
$data = array("key" => "value",
"key2" => "value2");

echo json_encode($data);

Output:
{"key":"value","key2":"value2"}
JSON and PHP
class Data
{
public $key;
public $key2;
}

$data = new Data();


$data->key = "value";
$data->key2 = "value2";

echo json_encode($data);
$.getJSON()
$.getJSON(url, [data], [callback]);
$.getJSON(url, {'poll_id': poll_id},
poll_display);

• Equivalent to:
$.get(url, data, callback, "json");
Putting it all Together

http://cloud.cs50.net/~jbolduc/jquery/poll.{php,phps}
http://cloud.cs50.net/~jbolduc/jquery/poll.js
http://cloud.cs50.net/~jbolduc/jquery/pollhandler.{php,phps}
Compatibility
• What if the user has intentionally disabled
JavaScript? Or if the browser doesn’t support
it?
• We’d like to retain as much functionality as
possible, as transparently as possible
lynx http://cloud.cs50.net/~jbolduc/jquery/poll.php

http://cloud.cs50.net/~jbolduc/jquery/poll.{php,phps}
jQuery UI
• http://ui.jquery.com
• Separate library, designed to be used with jQuery
• Download: http://ui.jquery.com/download
– Build it with the features you want
• Docs: http://docs.jquery.com/UI
• Demos
– http://ui.jquery.com/demos
– http://dev.jquery.com/view/trunk/ui/demos/functional
(some slightly buggy)
jQuery UI
• Interactions
• Widgets
• Effects
Interactions
• Draggable
– $("#dragImage").draggable();
– $("#dragImage").draggable({
opacity: 0.40
});

http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.draggable
Interactions
• Droppable
– $(".drop").droppable({
accept: ".block",
drop: function(ev, ui) {
$(this).append("Dropped! ");
}
});

http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.droppable
More Interactions
• Resizable
• Selectable
• Sortable
Widgets
• Accordion

http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.accordion
Widgets
• Dialog
• $("#dialog").dialog();

http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialog
More Widgets
• Datepicker
• Progressbar
• Slider
• Tabs
Effects
• $("#id").effect(effect, options,
[speed], [callback]);
• Bounce
• Highlight
• Explode
• Fold
• Pulsate
• …
• http://docs.jquery.com/UI/Effects
Advanced Ajax and JavaScript

Using the jQuery Library

You might also like