{
"
City
":
[
{
"
@a*ributes
" :
{
"
name
":"
Hong Kong
"
}
,
"
Weather
":"
Light Rain
",
"
Temperature
":"
16
"
}
,
{
"
@a*ributes
":
{
"
name
":"
Beijing
"
}
,
"
Weather
":"
Cloudy
",
"
Temperature
":"
C6
"
}
]
}
Output of getData.php
(to be received by index.html)
<!DOCTYPE html>
<html>
<head>
<script src=""></script>
<script>
$(document).ready(function(){
$("#load").click(function(){
$.
getJSON
("getData.php", function(result){
$("#load").empty();
$.
each
(result.City, function(i, row){
$("#load").append(row["@attributes"]["name"]+"-"+row["Weather"]+"<br>");
});
});
});
});
</script>
</head>
<body>
<h1>Weather forecast</h1>
<div id="load">
<img src="getWeatherForecast.jpg">
</div>
</body>
</html>
With jQuery
$.each(array, callback)
- iterate over
the array and execute the callback
function on every value in the array
index.html
More about jQuery
Animation:
fadeIn(), fadeOut(), slideDown(), slideUp(), animate(), stop()
$("#p1").css("color", “red”).slideUp(“slow”).slideDown("fast");
jQuery plugins:
a jQuery plugin is a new method that is
created to extend jQuery's prototype object (
$.fn
)
You can make your own
plugins or use thousands
of jQuery plugins others
have published online
$.fn.greenify = function() {
this.css( "color", "green" );
};
$("a").greenify();
Method chaining:
run multiple jQuery commands one after the
other on the same element(s), as follows
References
jQuery
Comparison of JavaScript frameworks
Comparison_of_JavaScript_frameworks
You've reached the end of your free preview.
Want to read all 33 pages?
- Fall '13
- Dr. C. Wu
- Computer Science
