<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>URI.js - jQuery URI Plugin</title>
<meta name="description" content="URI.js is a Javascript library for working with URLs." />
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="prettify/prettify.js" type="text/javascript"></script>
<script src="screen.js" type="text/javascript"></script>
<link href="screen.css" rel="stylesheet" type="text/css" />
<link href="prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
<script src="src/URI.min.js" type="text/javascript"></script>
<script src="src/jquery.URI.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8922143-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<a id="github-forkme" href="https://github.com/medialize/URI.js"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<div id="container">
<h1><a href="https://github.com/medialize/URI.js">URI.js</a></h1>
<ul class="menu">
<li><a href="/URI.js/">Intro</a></li>
<li><a href="about-uris.html">Understanding URIs</a></li>
<li><a href="docs.html">API-Documentation</a></li>
<li class="active"><a href="jquery-uri-plugin.html">jQuery Plugin</a></li>
<li><a href="uri-template.html">URI Template</a></li>
<li><a href="build.html">Build</a></li>
<li><a href="http://rodneyrehm.de/en/">Author</a></li>
</ul>
<h2>URI.js jQuery Plugin</h2>
<p>As of version 1.6.0 URI.js offers a simple jQuery integration. For the plugin to work, you need to regularly load <code>URI.js</code>, as well as <code>jquery.URI.js</code>.</p>
<p>URI.js does not depend on jQuery unless you want to use the URI.js jQuery Plugin</p>
<h2>Accessing the URI Instance</h2>
<pre class="prettyprint lang-js">
var $a = $('<a href="http://google.com/hello.html">Demo</a>');
var uri = $a.uri();
// URI instance and DOMElement are always in sync
uri.domain() == 'google.com';
uri.domain('example.org');
$a.attr('href') == 'http://example.org/hello.html';
// access to <strong>href</strong>, <strong>src</strong> and <strong>action</strong>
// transparently update the URI instance
$a.attr('href', '/other.file');
uri.href() == '/other.file';
// $.fn.uri() passes values to DOM and URI
$a.uri('/hello/world.html');
$a.attr('href') == '/hello/world.html';
uri.href() == '/hello/world.html';</pre>
<h2>Accessing URI components</h2>
<pre class="prettyprint lang-js">var $a = $('<a href="http://www.google.com/hello.html">Demo</a>');
// read
$a.attr('uri:domain') == 'google.com';
// write
$a.attr('uri:domain', 'example.org');
$a.attr('href') == 'http://www.example.org/hello.html';</pre>
<p>All URI-component accessors (except <a href="docs.html#accessors-segment">segment</a>) can be used:
<a href="docs.html#accessors-origin">origin</a>,
<a href="docs.html#accessors-authority">authority</a>,
<a href="docs.html#accessors-directory">directory</a>,
<a href="docs.html#accessors-domain">domain</a>,
<a href="docs.html#accessors-filename">filename</a>,
<a href="docs.html#accessors-hash">fragment</a>,
<a href="docs.html#accessors-hash">hash</a>,
<a href="docs.html#accessors-host">host</a>,
<a href="docs.html#accessors-hostname">hostname</a>,
<a href="docs.html#accessors-href">href</a>,
<a href="docs.html#accessors-password">password</a>,
<a href="docs.html#accessors-path">path</a>,
<a href="docs.html#accessors-pathname">pathname</a>,
<a href="docs.html#accessors-port">port</a>,
<a href="docs.html#accessors-protocol">protocol</a>,
<a href="docs.html#accessors-search">query</a>,
<a href="docs.html#accessors-protocol">scheme</a>,
<a href="docs.html#accessors-resource">resource</a>,
<a href="docs.html#accessors-search">search</a>,
<a href="docs.html#accessors-subdomain">subdomain</a>,
<a href="docs.html#accessors-suffix">suffix</a>,
<a href="docs.html#accessors-tld">tld</a>,
<a href="docs.html#accessors-username">username</a>.
</p>
<h2>Selectors</h2>
<p>You may find yourself wanting to select all links to a certain file-type or a specific domain. <code>:uri()</code> is a pseudo-class filter that will help you with that:</p>
<pre class="prettyprint lang-html">
<div class="first">
<a href="/my.pdf?with=query">PDF</a>
<a href="http://google.com/">Google1</a>
</div>
<div class="second">
<a href="http://www.google.com/">Google2</a>
<a href="https://github.com/some/directory/help.html">Github</a>
</div>
</pre>
<pre class="prettyprint lang-js">// finding links to a given file-type
$('a:uri(suffix = pdf)');
// -> finds PDF
// selecting links to a directory (or child thereof)
$('a:uri(directory *= /directory/)');
// -> finds Github
// selecting links to google.com
$('a:uri(domain = google.com)');
// -> finds Google1, Google2
// selecting all relative links
$('a:uri(is: relative)');
// -> finds PDF
// selecting links regardless of their representation
$('a:uri(equals: http://github.com/some/other/../directory/help.html)');
// -> finds Github
// finding elements containing a link to github
$('div').has('a:uri(domain = github)')
// -> finds div.second
// testing if the protocol matches
$('a').eq(1).is(':uri(protocol = http)');
// -> is true
// event delegation
$(document).on('click', 'a:uri(scheme=javscript)', function(e) {
if (!confirm("do you really want to execute this script?\n\n" + this.href)) {
e.preventDefault();
e.stopImmediatePropagation();
}
});</pre>
<h3>The :uri() pseudo selector</h3>
<p><code>:uri()</code> accepts the following three argument patterns:</p>
<ul>
<li><code>:uri(<em>accessor</em> operator <strong>string</strong>)</code> to compare a single URI-component</li>
<li><code>:uri(is: <strong>string</strong>)</code> to compare against <a href="docs.html#is">.is()</a></li>
<li><code>:uri(equals: <strong>string</strong>)</code> to compare URLs using <a href="docs.html#equals">.equals()</a></li>
</ul>
<p>Note: It is a good idea to prepend the element(s) you're looking for. <code>a:uri(is: relative)</code> is much faster than <code>:uri(is: relative)</code>.</p>
<p>Note: <code>")"</code> may not be used in your comparison-<code>string</code>, as jQuery (Sizzle, actually) can't handle that properly.</p>
<h3>Comparison Accessors</h3>
<p>All URI-component accessors (except <a href="docs.html#accessors-segment">segment</a>) can be used:
<a href="docs.html#accessors-authority">authority</a>,
<a href="docs.html#accessors-directory">directory</a>,
<a href="docs.html#accessors-domain">domain</a>,
<a href="docs.html#accessors-filename">filename</a>,
<a href="docs.html#accessors-hash">fragment</a>,
<a href="docs.html#accessors-hash">hash</a>,
<a href="docs.html#accessors-host">host</a>,
<a href="docs.html#accessors-hostname">hostname</a>,
<a href="docs.html#accessors-href">href</a>,
<a href="docs.html#accessors-password">password</a>,
<a href="docs.html#accessors-path">path</a>,
<a href="docs.html#accessors-pathname">pathname</a>,
<a href="docs.html#accessors-port">port</a>,
<a href="docs.html#accessors-protocol">protocol</a>,
<a href="docs.html#accessors-search">query</a>,
<a href="docs.html#accessors-protocol">scheme</a>,
<a href="docs.html#accessors-resource">resource</a>,
<a href="docs.html#accessors-search">search</a>,
<a href="docs.html#accessors-subdomain">subdomain</a>,
<a href="docs.html#accessors-suffix">suffix</a>,
<a href="docs.html#accessors-tld">tld</a>,
<a href="docs.html#accessors-username">username</a>.
</p>
<h3>Comparison Operators</h3>
<p>Comparison operators are derived from CSS attribute match operators:</p>
<dl>
<dt>=</dt><dd>Exact match of <code>accessor</code> and <code>string</code></dd>
<dt>^=</dt><dd><code>accessor</code> begins with <code>string</code> (case-insensitive)</dd>
<dt>$=</dt><dd><code>accessor</code> ends with <code>string</code> (case-insensitive)</dd>
<dt>*=</dt><dd><code>accessor</code> contains <code>string</code> (case-insensitive)</dd>
</dl>
</div>
</body>
</html>