jquery-url.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery.json.js"></script>
<script src="/jquery.url.js"></script>
</head>
<body>
<table class="table table-bordered table-striped" style="table-layout: fixed; word-wrap: break-word;">
<thead>
<tr>
<th colspan="2">Results:</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 200px; background-color: lightgrey;">source</td>
<td style="background-color: lightgrey;"><span id="source"> </span></td>
</tr>
<tr>
<td>protocol</td>
<td><span id="protocol"> </span></td>
</tr>
<tr>
<td>host</td>
<td><span id="host"> </span></td>
</tr>
<tr>
<td>port</td>
<td><span id="port"> </span></td>
</tr>
<tr>
<td>relative</td>
<td><span id="relative"> </span></td>
</tr>
<tr>
<td>path</td>
<td><span id="path"> </span></td>
</tr>
<tr>
<td>directory</td>
<td><span id="directory"> </span></td>
</tr>
<tr>
<td>file</td>
<td><span id="file"> </span></td>
</tr>
<tr>
<td>query</td>
<td><span id="query"> </span></td>
</tr>
<tr>
<td>fragment (alias: anchor)</td>
<td><span id="fragment"> </span></td>
</tr>
<tr>
<td>param</td>
<td><span id="param"> </span></td>
</tr>
<tr>
<td>sky</td>
<td><span id="sky"> </span></td>
</tr>
<tr>
<td>grass</td>
<td><span id="grass"> </span></td>
</tr>
<tr>
<td>segment</td>
<td><span id="segment"> </span></td>
</tr>
<tr>
<td>segment1</td>
<td><span id="segment1"> </span></td>
</tr>
<tr>
<td>segment2</td>
<td><span id="segment2"> </span></td>
</tr>
<tr>
<td>segment3</td>
<td><span id="segment3"> </span></td>
</tr>
<tr>
<td style="background-color: lightgrey;">source1</td>
<td style="background-color: lightgrey;"><span id="source1"> </span></td>
</tr>
<tr>
<td>fparam</td>
<td><span id="fparam"> </span></td>
</tr>
<tr>
<td>sky1</td>
<td><span id="sky1"> </span></td>
</tr>
<tr>
<td>grass1</td>
<td><span id="grass1"> </span></td>
</tr>
<tr>
<td style="background-color: lightgrey;">source2</td>
<td style="background-color: lightgrey;"><span id="source2"> </span></td>
</tr>
<tr>
<td>fsegment</td>
<td><span id="fsegment"> </span></td>
</tr>
<tr>
<td>about</td>
<td><span id="about"> </span></td>
</tr>
<tr>
<td>us</td>
<td><span id="us"> </span></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//<![CDATA[
$(function () {
var url = $.url('http://test.com:8080/directory1/directory2/page.php?sky=blue&grass=green#about-us');
var source = url.attr('source');
var protocol = url.attr('protocol');
var host = url.attr('host');
var port = url.attr('port');
var relative = url.attr('relative');
var path = url.attr('path');
var directory = url.attr('directory');
var file = url.attr('file');
var query = url.attr('query');
var fragment = url.attr('fragment');
var anchor = url.attr('anchor');
var param = url.param();
var sky = url.param('sky');
var grass = url.param('grass');
var segment = url.segment();
var segment1 = url.segment(1);
var segment2 = url.segment(-2);
var segment3 = url.segment(3);
url = $.url('http://test.com/#sky=blue&grass=green');
var source1 = url.attr('source');
var fparam = url.fparam();
var sky1 = url.fparam('sky');
var grass1 = url.fparam('grass');
url = $.url('http://test.com/#/about/us/');
var source2 = url.attr('source');
var fsegment = url.fsegment();
var about = url.fsegment(1);
var us = url.fsegment(-1);
$('#source').html(source);
$('#protocol').html(protocol);
$('#host').html(host);
$('#port').html(port);
$('#relative').html(relative);
$('#path').html(path);
$('#directory').html(directory);
$('#file').html(file);
$('#query').html(query);
$('#fragment').html(fragment);
$('#param').html($.JSON.encode(param));
$('#sky').html(sky);
$('#grass').html(grass);
$('#segment').html($.JSON.encode(segment));
$('#segment1').html(segment1);
$('#segment2').html(segment2);
$('#segment3').html(segment3);
$('#source1').html(source1);
$('#fparam').html($.JSON.encode(fparam));
$('#sky1').html(sky1);
$('#grass1').html(grass1);
$('#source2').html(source2);
$('#fsegment').html($.JSON.encode(fsegment));
$('#about').html(about);
$('#us').html(us);
});
//]]>
</script>
</body>
</html>