203 lines
9.2 KiB
HTML
203 lines
9.2 KiB
HTML
<!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> |