Session 4

attributes are available through JavaScript as DOM node properties.
Some of the
more common properties are className
tagName
id
href
title
rel
src
Get Attribute Value
The attr() method can be used to either fetch the value of an attribute from the
first element in the matched set or set attribute values onto all matched eleme
nts.
Example
Following is a simple example which fetches title attribute of <em> tag and set
<div id = "divid"> value with the same value <html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>
<body>
<div>
<em title = "Bold and Brave">This is first paragraph.</em>
<p id = "myid">This is second paragraph.</p>
<div id = "divid"></div>
</div>
</body>
</html>
Set Attribute Value
The attr(name, value) method can be used to set the named attribute onto all ele
ments in the wrapped set using the passed value.
Example
Following is a simple example which set src attribute of an image tag to a corre
ct location <html>
<head>

"></script>
$("#myimg").attr("src", "/jquery/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
</div>
</body>
</html>
Applying Styles
The addClass( classes ) method can be used to apply defined style sheets onto al
l the matched elements. You can specify multiple classes separated by space.
Example
Following is a simple example which sets class attribute of a para <p> tag <html>
<head>
"></script>
$("em").addClass("selected");
$("#myid").addClass("highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<em title = "Bold and Brave">This is first paragraph.</em>
<p id = "myid">This is second paragraph.</p>
</body>
</html>
jQuery - DOM Traversing
Above every list has its own index, and can be located directly by using eq(inde
x) method as below example.

Every child element starts its index from zero, thus, list item 2 would be acces
sed by using $("li").eq(1) and so on.
<html>
<head>
<title>The JQuery Example</title>
"></script>
$("li").eq(2).addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list
<li>list
<li>list
<li>list
<li>list
<li>list
</ul>
</div>
item
item
item
item
item
item
1</li>
2</li>
3</li>
4</li>
5</li>
6</li>
</body>
</html>
Apply CSS Properties
This is very simple to apply any CSS property using JQuery method css( PropertyN
ame, PropertyValue ).
Here is the syntax for the method selector.css( PropertyName, PropertyValue );
Here you can pass PropertyName as a javascript string and based on its value, Pr
opertyValue could be string or integer.
<html>
<head>
"></script>

$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list
<li>list
<li>list
<li>list
<li>list
<li>list
</ul>
</div>
item
item
item
item
item
item
1</li>
2</li>
3</li>
4</li>
5</li>
6</li>
</body>
</html>
Apply Multiple CSS Properties

You can apply multiple CSS properties using a single JQuery method CSS( {key1:va
l1, key2:val2....). You can apply as many properties as you like in a single cal
l.
Here is the syntax for the method selector.css( {key1:val1, key2:val2....keyN:valN})
<html>
<head>
"></script>
$("li").eq(2).css({"color":"red", "background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>

</ul>
</div>
</body>
</html>
Content Manipulation
The html( ) method gets the html contents (innerHTML) of the first matched eleme
nt.
Here is the syntax for the method selector.html( )
<html>
<head>
"></script>
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;
}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
jQuery - Events Handling
Using the jQuery Event Model, we can establish event handlers on DOM elements wi
th the bind() method as follows <html>

<head>
"></script>
$('div').bind('click', function( event ){
alert('Hi there!');
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;">ONE</div>
<div class = "div" style = "background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>
AJAX is an acronym standing for Asynchronous JavaScript and XML and this technol
ogy help us to load data from the server without a browser page refresh.
JQuery is a great tool which provides a rich set of AJAX methods to develop next
generation web application.
Loading simple data
This is very easy to load any static or dynamic data using JQuery AJAX. JQuery p
rovides load() method to do the job Syntax
Here is the simple syntax for load() method [selector].load( URL, [data], [callback] );
Here is the description of all the parameters URL - The URL of the server-side resource to which the request is sent. It could
be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a
database.
data - This optional parameter represents an object whose properties are seriali
zed into properly encoded parameters to be passed to the request. If specified,
the request is made using the POST method. If omitted, the GET method is used.
callback - A callback function invoked after the response data has been loaded i
nto the elements of the matched set. The first parameter passed to this function
is the response text received from the server and second parameter is the statu
s code.
<html>
<head>
"></script>
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file -</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Getting JSON data
There would be a situation when server would return JSON string against your req
uest. JQuery utility function getJSON() parses the returned JSON string and make
s the resulting string available to the callback function as first parameter to
take further action.
Syntax
Here is the simple syntax for getJSON() method [selector].getJSON( URL, [data], [callback] );
Here is the description of all the parameters URL - The URL of the server-side resource contacted via the GET method.
data - An object whose properties serve as the name/value pairs used to construc
t a query string to be appended to the URL, or a preformatted and encoded query
string.
callback - A function invoked when the request completes. The data value resulti
ng from digesting the response body as a JSON string is passed as the first para
meter to this callback, and the status as the second.
<html>
<head>
"></script>
$("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file -</p>
<div id = "stage" style = "background-color:#eee;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
jQuery - Plugins
How to use Plugins
To make a plug-in's methods available to us, we include plug-in file very simila
r to jQuery library file in the <head> of the document.
We must ensure that it appears after the main jQuery source file, and before our
custom JavaScript code.
jQuery plug-in available which you can download from repository link at https://
jquery.com/plugins.
<html>
<head>
"></script>
<script src = "jquery.plug-in.js" type = "text/javascript"></script>

<script src = "custom.js" type = "text/javascript"></script>
.......your custom code.....
});
</script>
</head>
<body>
.............................
</body>
</html>
--------------------multiscroll.js is a jQuery plugin for creating split pages with two vertical scr
olling panels.
A Simple of multiscroll example as shown below
<!DOCTYPE html>
<html xmlns = "https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /
>
<title>multiscroll.js - split multi-scrolling pages plugin</title>
<link rel
href =
<link rel
href =
= "stylesheet" type = "text/css"

"/jquery/src/multiscroller/jquery.multiscroll.css" />
= "stylesheet" type = "text/css"
"/jquery/src/multiscroller/examples.css" />
<script
"></script>
src = "/jquery/src/multiscroller/jquery.easings.min.js"></script>
src = "/jquery/src/multiscroller/jquery.multiscroll.js"></script>
<script type = "text/javascript">
$('#myContainer').multiscroll({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
anchors: ['first', 'second', 'third'],
menu: '#menu',
navigation: true,
navigationTooltips: ['One', 'Two', 'Three'],
loopBottom: true,
loopTop: true
});
});
</script>
</head>
<body>
<ul id = "menu">
<li data-menuanchor = "first"><a href = "#first">First slide</a></li>
<li data-menuanchor = "second"><a href = "#second">Second slide</a></li
>
<li data-menuanchor = "third"><a href = "#third">Third slide</a></li>
</ul>
<div id = "myContainer">
<div class = "ms-left">
<div class = "ms-section" id = "left1">
<h1>Left 1</h1>
</div>
<h1>Left 2 </h1>
</div>
<h1>Left 3</h1>
</div>
</div>
<div class = "ms-right">
<div class = "ms-section" id = "right1">
<h1>Right 1</h1>
</div>
<h1>Right 2</h1>
</div>
<h1>Right 3</h1>
</div>
</div>
</div>
</body>
</html>
------------------Slidebars is a jQuery plugin for quickly and easily implementing app style off-c
anvas menus and sidebars into your website.
A Simple of slidebar example as shown below

<!doctype html>
<html>
<head>
<title>Slidebars Animation Styles</title>
<meta name = "viewport" content = "width = device-width,
initial-scale = 1.0, minimum-scale = 1.0,
maximum-scale = 1.0, user-scalable = no">
<link rel = "stylesheet" href = "slidebars.css">
<link rel = "stylesheet" href = "example-styles.css">
</head>
<body>
<div id = "sb-site">
<h1>Tutorilaspoint</h1>
<p>Slidebars is a jQuery plugin for quickly and easily
implementing app style off-canvas menus and sidebars into your websi
te.</p>
<ul>
<li class = "sb-toggle-left">Click here for slider</li>
</ul>
</div>
<div class = "sb-slidebar sb-left sb-style-push">
<p>Android</p>
<hr/>
<p>Java</p>
<hr/>
<p>CSS</p>
<hr/>
<p>PHP</p>
<hr/>
</div>
<script
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.j
s"></script>
<script src = "slidebars.js"></script>
<script>
(function($) {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>
------------------------
Progressbar.js is a jQuery plugin for showing progress bar

A Simple of progressbar example as shown below
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome = 1">
initial-scale = 1">
<link href = "https://www.jqueryscript.net/css/jquerysctipttop.css"
rel = "stylesheet" type = "text/css">
<link rel = "stylesheet" href = "jQuery-plugin-progressbar.css">
<script src = "https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src = "jQuery-plugin-progressbar.js"></script>
</head>
<body>
<div class = "progress-bar position"></div>
<div class = "progress-bar position" data-percent = "40"
data-duration = "1000" data-color = "#ccc,yellow"></div>
<div class = "progress-bar position" data-percent = "90"
data-color = "#a456b1,#12b321"></div>
<input type = "submit" value="reload">
<script>
$(".progress-bar").loading();
$('input').on('click', function () {
$(".progress-bar").loading();
});
</script>
</body>
</html>
--------------Slideshow.js is a jQuery plugin for quickly and easily implementing slide show o
f images or videos into your website.
A Simple of slide show example as shown below
<html xmlns = "https://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8" /
>
<link rel
type =
<link rel
type =
= "stylesheet" href = "css/supersized.css"

"text/css" media = "screen" />
= "stylesheet" href = "theme/supersized.shutter.css"
"text/css" media = "screen" />

"></script>
<script type = "text/javascript" src = "js/jquery.easing.min.js"></script>
<script type = "text/javascript" src = "js/supersized.3.2.7.min.js"></scri
pt>
<script type = "text/javascript" src = "theme/supersized.shutter.min.js"><
/script>
jQuery(function($){
$.supersized({
slideshow
autoplay
start_slide
stop_loop
random
slide_interval
transition
transition_speed
new_window
pause_hover
keyboard_nav
performance
image_protect
:
:
:
:
:
:
:
:
:
:
:
:
:
1,
1,
1,
0,
0,
3000,
6,
1000,
1,
0,
1,
1,
1,
min_width
: 0,
min_height
: 0,
vertical_center : 1,
horizontal_center: 1,
fit_always
: 0,
fit_portrait
: 1,
fit_landscape
: 0,
slide_links
: 'blank',
thumb_links
: 1,
thumbnail_navigation: 0,
slides :
[{image : '
https://buildinternet.s3.amazonaws.com/projects/supersized/3.2
/sli
des/kazvan-1.jpg',
title : 'Sample demo', thumb :
/thu
mbs/kazvan-1.jpg',
url : 'https://www.tutorialspoint.com'},
{image : '
/sli
des/kazvan-3.jpg',
title : 'Sample demo', thumb : '
/
thumbs/kazvan-3.jpg',
{image : '
/
slides/wojno-1.jpg',
/
thumbs/wojno-1.jpg',
{image : '
/
/
thumbs/wojno-2.jpg',
{image : '
/
/
thumbs/wojno-3.jpg', url : 'https://www.tutorialspoint.com'
},
],
progress_bar : 1,
mouse_scrub : 0
});
});
</script>
</head>
<style type = "text/css">
ul#demo-block{ margin:0 15px 15px 15px; }
ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:l
eft;
clear:both; color:#aaa; background:url('img/bg-black.png');
font:11px Helvetica, Arial, sans-serif; }
ul#demo-block li a{ color:#eee; font-weight:bold; }
</style>
<body>
<div id = "prevthumb"></div>
<div id = "nextthumb"></div>
<a id = "prevslide" class = "load-item"></a>
<a id = "nextslide" class = "load-item"></a>
<div id = "thumb-tray" class = "load-item">
<div id = "thumb-back"></div>
<div id = "thumb-forward"></div>
</div>
<div id = "progress-back" class = "load-item">
<div id = "progress-bar"></div>
</div>
<div id = "controls-wrapper" class = "load-item">
<div id = "controls">
<a id = "play-button"><img id = "pauseplay"
src = "img/pause.png"/></a>
<div id = "slidecounter">
<span class = "slidenumber"></span> / <
span class = "totalslides"></span>
</div>
<div id = "slidecaption"></div>
<a id = "tray-button"><img id = "tray-arrow"
src = "img/button-tray-up.png"/></a>
<ul id = "slide-list"></ul>
</div>
</div>
</div>
</body>
</html>
--------------Checkout.js is a jQuery plugin for easy to implementation of check out for e-com
merce websites.
A Simple of checkout.js example as shown below
<html xmlns = "https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859
-1" />
<title>Untitled Document</title>
<script type = "text/javascript" src = "jquery-1.3.2.js"></script>
<script type = "text/javascript" src = "jquery.livequery.js"></script>
<link href = "css.css" rel = "stylesheet" />
var Arrays = new Array();
$('#wrap li').mousemove(function(){
var position = $(this).position();

$('#cart').stop().animate({
left
: position.left+'px',
},250,function(){
});
}).mouseout(function(){
});
$('#wrap li').click(function(){
var thisID = $(this).attr('id');
var itemname = $(this).find('div .name').html();
var itemprice = $(this).find('div .price').html();
if(include(Arrays,thisID)){
var price = $('#each-'+thisID).children(".shopp-price").
find('em').html();
var quantity = $('#each-'+thisID).children(".shopp-quantity").
html();
quantity = parseInt(quantity)+parseInt(1);
var total = parseInt(itemprice)*parseInt(quantity);
$('#each-'+thisID).children(".shopp-price").
find('em').html(total);
$('#each-'+thisID).children(".shopp-quantity").html(quantity);
var prev_charges = $('.cart-total span').html();
prev_charges = parseInt(prev_charges)-parseInt(price);
prev_charges = parseInt(prev_charges)+parseInt(total);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
} else {
Arrays.push(thisID);
prev_charges = parseInt(prev_charges)+parseInt(itemprice);
$('#left_bar .cart-info').append('
<div class = "shopp" id = "each-'+thisID+'">
<div class = "label">'+itemname+'</div>
<div class = "shopp-price">
$<em>'+itemprice+'</em></div>
<span class = "shopp-quantity">1</span>
<img src = "remove.png" class = "remove" />
<br class = "all" />
</div>');
$('#cart').css({'-webkit-transform' :
'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
}
setTimeout('angle()',200);
});
$('.remove').livequery('click', function() {
var deduct = $(this).parent().children(".shopp-price")
.find('em').html();
var thisID = $(this).parent().attr('id').replace('each-','');
var pos = getpos(Arrays,thisID);
Arrays.splice(pos,1,"0")
prev_charges = parseInt(prev_charges)-parseInt(deduct);
$(this).parent().remove();
});
$('#Submit').livequery('click', function() {
var totalCharge = $('#total-hidden-charges').val();
$('#left_bar').html('Total Charges: $'+totalCharge);
return false;
});
});
function include(arr, obj) {
for(var i = 0; i<arr.length; i++) {
if (arr[i] == obj) return true;
}
}
function getpos(arr, obj) {
for(var i = 0; i<arr.length; i++) {
if (arr[i] == obj) return i;
}
}
function angle(){$('#cart').css({'-webkit-transform' :
'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}
</script>
</head>
<body>
<div align = "left">

<div id = "wrap" align = "left">
<ul>
<li id = "1">
<img src = "a1.png" class = "items" height = "100" alt = "" />
<br clear = "all" />
<div><span class = "name">Learn Java:
Price</span>: $<span class = "price">
800</span> </div>
</li>
<li id = "2">
<img src = "5.png" class = "items" height = "100" alt = "" />
<div><span class = "name">Learn HTML
</span>: $<span class = "price">500
</span></div>
</li>
<li id="3">
<div><span class = "name">Learn Android
</span></div>
</li>
<li id = "4">
<div><span class = "name">Learn SVG
</span></div>
</li>
<li id = "5">
<div> <span class = "name">Learn Bootstrap
</span></div>
</li>
<li id = "6">
<div><span class = "name">Learn HTML
</span> </div>
</li>
<li id = "7">
<div><span class = "name"> Learn Bootstrap
</span></div>
</li>
<li id = "8">
<div><span class = "name">Learn SVG
</span></div>
</li>
<li id = "9">
<div><span class = "name">Learn Angular Js
</span></div>
</li>
</ul>
</div>
<div id = "left_bar">
<form action = "#" id="cart_form" name = "cart_form">
<div class = "cart-info"></div>
<div class = "cart-total">
<b>Total Charges:
</b>
$<span>0</span>
<input type = "hidden" name = "total-hidden-charges"
id = "total-hidden-charges" value = "0" />
</div>
<button type = "submit" id = "Submit">CheckOut</button>
</form>
</div>
</div>
</body>
</html>
-------------Blockrain.js is a jQuery plugin for lets you embed the classic Tetris game on yo
ur website.
A Simple of blockrain example as shown below
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<link href = 'https://fonts.googleapis.com/css?family=Play:400,700'
rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet" href = "assets/css/style.css">
<link rel = "stylesheet" href = "src/blockrain.css">
</head>
<body>
<section id = "examples">
<article id = "example-slider">
<div class = "example">
<div class = "instructions">
Use only arrows
<div class = "keyboard">
<div class = "key key-up"></div>
<div class = "key key-left"></div>
<div class = "key key-down"></div>
<div class = "key key-right"></div>
</div>
</div>
<div class = "game" id = "tetris-demo"></div>
</div>
</article>
</section>
<script
<script
<script
<script
src
src
src
src
=
=
=
=
"assets/js/jquery-1.11.1.min.js"></script>
"src/blockrain.jquery.libs.js"></script>
"src/blockrain.jquery.src.js"></script>
"src/blockrain.jquery.themes.js"></script>
<script>
var $cover = $('#cover-tetris').blockrain({
autoplay: true,
autoplayRestart: true,
speed: 100,
autoBlockWidth: true,
autoBlockSize: 25,
theme: 'candy'
});
var versusSpeed = 500;
var $versus1 = $('#tetris-versus-1 .game').blockrain({
autoplay: true,
speed: versusSpeed,
onGameOver: function() {
$versus1.blockrain('restart');
var $score = $versus2.parent().find('.score');
$score.text( parseInt($score.text()) + 1 );
}
});
var $versus2 = $('#tetris-versus-2 .game').blockrain({
autoplay: true,
speed: versusSpeed,
onGameOver: function() {
var $score = $versus1.parent().find('.score');
$score.text( parseInt($score.text()) + 1 );
}
});
var $demo = $('#tetris-demo').blockrain({
speed: 20,
theme: 'black',
onStart: function() {
ga( 'send', 'event', 'tetris', 'started');
},
onLine: function() {
ga( 'send', 'event', 'tetris', 'line');
},
onGameOver: function(score){
ga( 'send', 'event', 'tetris', 'over', score);
}
});
$('#example-slider').find('.btn-next').click(function(event){
event.preventDefault();
switchDemoTheme(true);
});
$('#example-slider').find('.btn-prev').click(function(event){
event.preventDefault();
switchDemoTheme(false);
});
function switchDemoTheme(next) {
var themes = Object.keys(BlockrainThemes);
var currentTheme = $demo.blockrain('theme');
var currentIx = themes.indexOf(currentTheme);
if( next ) { currentIx++; }
else { currentIx--; }
if( currentIx > = themes.length ){ currentIx = 0; }
if( currentIx < 0 ){ currentIx = themes.length-1; }
$demo.blockrain('theme', themes[currentIx]);
$('#example-slider .theme strong').text( '"'+themes[currentIx]+'"' )
;
}
</script>
</body>
</html>
-------------------Producttour.js is a jQuery plugin for quickly and easily implementing of help gu
ide into your website.
A Simple of producttour.js example as shown below
<!doctype html>
<html lang = "en" class = "no-js">
<head>
<meta charset = "UTF-8">
initial-scale = 1">
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/style.css">
<script src = "js/modernizr.js"></script>
</head>
<body background = "tp.png">
<div class = "cd-nugget-info">
<button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>
</div>
<ul class = "cd-tour-wrapper">
<li class = "cd-single-step">
<span>Step 1</span>
<div class = "cd-more-info bottom">
<h2>Step
<p>Lorem
elit.
<img src
</div>
Number 1</h2>
ipsum dolor sit amet, consectetur adipisicing
Modi alias animi molestias in, aperiam.</p>
= "img/step-1.png" alt = "step 1">
</li>
<span>Step 2</span>
<div class = "cd-more-info top">
<h2>Step Number 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Officia quasi in quisquam.</p>
<img src = "img/step-2.png" alt = "step 2">
</div>
</li>
<span>Step 3</span>
<div class = "cd-more-info right">
<h2>Step Number 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Optio illo non enim ut necessitatibus perspiciatis,
dignissimos.</p>
<img src = "img/step-3.png" alt = "step 3">
</div>
</li>
</ul>
<script src = "js/jquery-2.1.4.js"></script>
<script src = "js/jquery.mobile.min.js"></script>
<script src = "js/main.js"></script>
</body>
</html>
--------------Weather.js is a jQuery plugin to find the information about weather details.
A Simple of Weather.js example as shown below
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
initial-scale = 1">
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awe
some.min.css">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normaliz
e.css">
<link href = 'https://fonts.googleapis.com/css?family=Open+Sans:400,300,60
0,700'
rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet" type = "text/css" href = "weather.css">
</head>
<body id = "weather-background" class = "default-weather">
<canvas id = "rain-canvas">
</canvas>
<canvas id = "cloud-canvas">
</canvas>
<canvas id = "weather-canvas">
</canvas>
<canvas id = "time-canvas">
</canvas>
<canvas id = "lightning-canvas">
</canvas>
<div class = "page-wrap">
<header class = "search-bar">
<p class = "search-text"><span
class = "search-location-text">What's the weather
like in <input id="search-location-input"
class = "search-location-input" type = "text"
placeholder = "City"> ?</span></p>
<div class = "search-location-button-group">
<button id = "search-location-button"
class = "fa fa-search search-location-button search-button"
></button>

<button id = "geo-button" class = "geo-button fa
fa-location-arrow search-button"></button>
</div>
</header>
<div id = "geo-error-message" class =
<button id = 'close-error' class =
close-error'></button>Uh oh! It
find your location. Please type
box above!
</div>
"geo-error-message hide">
'fa fa-times
looks like we can't
your city into the search
<div id = "front-page-description"
class = "front-page-description middle">
<h1>Blank Canvas Weather</h1>
</div>
<div class = "attribution-links hide"
id = "attribution-links">
<button id = 'close-attribution'
class = 'fa fa-times close-attribution'></button>
<h3>Icons from <a href = "https://thenounproject.com/">
Noun Project</a></h3>
<ul>
<li class = "icon-attribution">
<a href = "https://thenounproject.com/term/cloud/6852/">
Cloud</a> by Pieter J. Smits</li>
<a href = "https://thenounproject.com/term/snow/64/">
Snow</a> from National Park Service Collection</li>
<a href = "https://thenounproject.com/term/drop/11449/">
Drop</a> Alex Fuller</li>
<a href = "https://thenounproject.com/term/smoke/27750/">
Smoke</a> by Gerardo Martn Martnez</li>
<a href = "https://thenounproject.com/term/moon/13554/">
Moon</a> by Jory Raphael</li>
<a href = "https://thenounproject.com/term/warning/18974/">
Warning</a> by Icomatic</li>
<a href = "https://thenounproject.com/term/sun/13545/">
Sun</a> by Jory Raphael</li>
<a href = "https://thenounproject.com/term/windsock/135621/">
Windsock</a> by Golden Roof</li>
</ul>
</div>
<div id = "weather" class = "weather middle hide">
<div class = "location" id = "location"></div>
<div class = "weather-container">
<div id = "temperature-info" class = "temperature-info">
<div class = "temperature" id = "temperature">
</div>
<div class = "weather-description" id = "weather-descriptio

n">
</div>
</div>
<div class = "weather-box">
<ul class = "weather-info" id = "weather-info">
<li class = "weather-item humidity">Humidity:
<span id = "humidity"></span>%</li>
<li class = "weather-item wind">Wind: <span
id = "wind-direction"></span> <span
id = "wind"></span> <span
id = "speed-unit"></span></li>
</ul>
</div>
<div class = "temp-change">
<button id = "celsius"
class = "temp-change-button celsius">C
</button><button id = "fahrenheit"
class = "temp-change-button fahrenheit">
F</button>
</div>
</div>
</div>
</div>
<script
src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.mi
n.js">
</script>
<script src = "weather.js"></script>
</div>
</body>
</html>

Session 4

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Session 4

Transféré par

Droits d'auteur :

Formats disponibles

attributes are available through JavaScript as DOM node properties.

<title>The jQuery Example</title>

x) method as below example.

<script type = "text/javascript" language = "javascript">

Apply Multiple CSS Properties

<li>list item 4</li>

th the bind() method as follows <html>

<script src = "jquery.plug-in.js" type = "text/javascript"></script>

= "stylesheet" type = "text/css"

A Simple of slidebar example as shown below

Progressbar.js is a jQuery plugin for showing progress bar

= "stylesheet" href = "css/supersized.css"

<script type = "text/javascript"

var position = $(this).position();

<div align = "left">

<div class = "weather-description" id = "weather-descriptio

Vous aimerez peut-être aussi