0
# jQuery Integration
1

2
jQuery plugin for seamless DOM element URI manipulation with automatic synchronization and CSS pseudo-selectors.
3

4
## Capabilities
5

6
### jQuery Plugin Method
7

8
```javascript { .api }
9
/**
10
 * Get or set URI for DOM element with automatic synchronization
11
 * @param uri - URI string or URI instance to set
12
 * @returns URI instance (getter) or jQuery object (setter)
13
 */
14
$.fn.uri(uri?: string | URI): URI | jQuery;
15
```
16

17
**Usage Examples:**
18

19
```javascript
20
// Import jQuery plugin
21
import 'urijs/src/jquery.URI';
22

23
// HTML: <a href="http://example.com/path">Link</a>
24
const $link = $('a');
25

26
// Get URI from element
27
const linkUri = $link.uri();
28
console.log(linkUri.hostname()); // 'example.com'
29
console.log(linkUri.pathname()); // '/path'
30

31
// Modify URI - automatically updates href attribute
32
linkUri.hostname('newhost.com')
33
       .addQuery('source', 'jquery');
34

35
console.log($link.attr('href')); // 'http://newhost.com/path?source=jquery'
36

37
// Set new URI
38
$link.uri('https://api.example.com/users');
39
console.log($link.attr('href')); // 'https://api.example.com/users'
40

41
// Work with different element types
42
$('img').uri().hostname('cdn.example.com'); // Updates src attribute
43
$('form').uri().pathname('/new-action'); // Updates action attribute
44
$('script').uri().protocol('https'); // Updates src attribute
45

46
// Batch operations
47
$('a').each(function() {
48
  const $this = $(this);
49
  const uri = $this.uri();
50
  
51
  // Add tracking to all links
52
  uri.addQuery('utm_source', 'website');
53
  
54
  // Convert to HTTPS
55
  if (uri.protocol() === 'http') {
56
    uri.protocol('https');
57
  }
58
});
59
```
60

61
### jQuery Attribute Hooks
62

63
Attribute hooks for direct URI component access on DOM elements.
64

65
```javascript { .api }
66
// URI component attribute hooks
67
$.attrHooks['uri:origin']: object;
68
$.attrHooks['uri:authority']: object;
69
$.attrHooks['uri:directory']: object;
70
$.attrHooks['uri:domain']: object;
71
$.attrHooks['uri:filename']: object;
72
$.attrHooks['uri:fragment']: object;
73
$.attrHooks['uri:hash']: object;
74
$.attrHooks['uri:host']: object;
75
$.attrHooks['uri:hostname']: object;
76
$.attrHooks['uri:href']: object;
77
$.attrHooks['uri:password']: object;
78
$.attrHooks['uri:path']: object;
79
$.attrHooks['uri:pathname']: object;
80
$.attrHooks['uri:port']: object;
81
$.attrHooks['uri:protocol']: object;
82
$.attrHooks['uri:query']: object;
83
$.attrHooks['uri:resource']: object;
84
$.attrHooks['uri:scheme']: object;
85
$.attrHooks['uri:search']: object;
86
$.attrHooks['uri:subdomain']: object;
87
$.attrHooks['uri:suffix']: object;
88
$.attrHooks['uri:tld']: object;
89
$.attrHooks['uri:username']: object;
90

91
// Direct attribute hooks
92
$.attrHooks['src']: object;
93
$.attrHooks['href']: object;
94
$.attrHooks['action']: object;
95
$.attrHooks['uri']: object;
96
$.attrHooks['cite']: object;
97
```
98

99
**Usage Examples:**
100

101
```javascript
102
// HTML: <a href="http://www.example.com:8080/path/file.html?query=value#section">Link</a>
103
const $link = $('a');
104

105
// Access URI components directly as attributes
106
console.log($link.attr('uri:hostname')); // 'www.example.com'
107
console.log($link.attr('uri:port')); // '8080'
108
console.log($link.attr('uri:pathname')); // '/path/file.html'
109
console.log($link.attr('uri:query')); // 'query=value'
110
console.log($link.attr('uri:fragment')); // 'section'
111

112
// Set URI components directly
113
$link.attr('uri:hostname', 'api.example.com');
114
$link.attr('uri:port', '9000');
115
$link.attr('uri:pathname', '/api/users');
116

117
console.log($link.attr('href')); // 'http://api.example.com:9000/api/users?query=value#section'
118

119
// Domain-specific components
120
console.log($link.attr('uri:subdomain')); // 'api'
121
console.log($link.attr('uri:domain')); // 'example'
122
console.log($link.attr('uri:tld')); // 'com'
123

124
// Path-specific components
125
console.log($link.attr('uri:directory')); // '/api'
126
console.log($link.attr('uri:filename')); // 'users'
127

128
// Compound components
129
console.log($link.attr('uri:authority')); // 'api.example.com:9000'
130
console.log($link.attr('uri:origin')); // 'http://api.example.com:9000'
131

132
// Batch attribute updates
133
$('a[href^="http://"]').attr('uri:protocol', 'https');
134
$('img[src*="old-cdn"]').attr('uri:hostname', 'new-cdn.example.com');
135
```
136

137
### jQuery CSS Pseudo-Selectors
138

139
CSS pseudo-selectors for URI-based element selection.
140

141
```javascript { .api }
142
/**
143
 * CSS pseudo-selector for URI matching
144
 * Supports operators: =, ^=, $=, *=, equals:, is:
145
 * @param selector - URI selector expression
146
 * @returns Matched elements
147
 */
148
$(':uri(selector)'): jQuery;
149
```
150

151
**Usage Examples:**
152

153
```javascript
154
// Select by exact URI match
155
const exactMatch = $(':uri(http://example.com/page)');
156

157
// Select by URI component equality
158
const httpsLinks = $(':uri(protocol=https)');
159
const exampleDomain = $(':uri(hostname=example.com)');
160
const apiPaths = $(':uri(pathname^=/api)');
161

162
// Select by URI property
163
const relativeLinks = $(':uri(is:relative)');
164
const absoluteLinks = $(':uri(is:absolute)');
165
const domainLinks = $(':uri(is:domain)');
166
const ipLinks = $(':uri(is:ip)');
167

168
// Complex selectors
169
const httpsApi = $(':uri(protocol=https):uri(pathname^=/api)');
170
const externalLinks = $('a:uri(hostname!=example.com)');
171

172
// Wildcard matching
173
const cdnImages = $('img:uri(hostname*=cdn)');
174
const pdfLinks = $('a:uri(pathname$=.pdf)');
175

176
// Use with other jQuery methods
177
$(':uri(protocol=http)').attr('uri:protocol', 'https');
178
$(':uri(is:relative)').each(function() {
179
  const $this = $(this);
180
  const uri = $this.uri();
181
  console.log('Relative URI:', uri.toString());
182
});
183

184
// Combine with standard CSS selectors
185
const secureApiLinks = $('a.api-link:uri(protocol=https)');
186
const internalImages = $('img.content:uri(hostname=example.com)');
187

188
// Advanced URI property checks
189
const sldDomains = $(':uri(is:sld)'); // Second-level domains
190
const punycodeDomains = $(':uri(is:punycode)'); // Punycode domains
191
const ipv6Addresses = $(':uri(is:ip6)'); // IPv6 addresses
192
const urnResources = $(':uri(is:urn)'); // URN resources
193
```
194

195
### Enhanced URI Instance Methods
196

197
URI.js methods enhanced for jQuery integration.
198

199
```javascript { .api }
200
/**
201
 * Enhanced build method that updates associated DOM elements
202
 * @param deferBuild - Don't trigger automatic rebuilding
203
 * @returns Complete URI string
204
 */
205
build(deferBuild?: boolean): string;
206
```
207

208
**Usage Examples:**
209

210
```javascript
211
// Create URI from jQuery element
212
const $link = $('<a href="http://example.com/page">Link</a>');
213
const linkUri = $link.uri();
214

215
// Modifications automatically sync with DOM
216
linkUri.hostname('newhost.com')
217
       .addQuery('ref', 'jquery')
218
       .fragment('section');
219

220
console.log($link.attr('href')); // 'http://newhost.com/page?ref=jquery#section'
221

222
// Manual build triggers DOM update
223
linkUri.pathname('/newpath');
224
linkUri.build(); // Forces DOM synchronization
225

226
// Deferred building for performance
227
linkUri.hostname('api.example.com', false) // Don't build yet
228
       .port(8080, false)                   // Don't build yet
229
       .pathname('/api/users', false)       // Don't build yet
230
       .build();                            // Build now and update DOM
231

232
// Batch DOM updates
233
$('a').each(function() {
234
  const $this = $(this);
235
  const uri = $this.uri();
236
  
237
  // Make multiple changes without rebuilding
238
  uri.protocol('https', false)
239
     .addQuery('utm_source', 'jquery', false)
240
     .build(); // Single DOM update per element
241
});
242
```
243

244
### Integration Examples
245

246
Complete examples showing jQuery plugin integration patterns.
247

248
**Examples:**
249

250
```javascript
251
// Link transformation
252
$(document).ready(function() {
253
  // Convert all HTTP links to HTTPS
254
  $('a:uri(protocol=http)').each(function() {
255
    $(this).uri().protocol('https');
256
  });
257
  
258
  // Add tracking to external links
259
  $('a:uri(hostname!=example.com)').each(function() {
260
    $(this).uri().addQuery('utm_source', 'website')
261
                 .addQuery('utm_medium', 'link');
262
  });
263
  
264
  // Open external links in new window
265
  $('a:uri(hostname!=example.com)').attr('target', '_blank');
266
});
267

268
// Image CDN migration
269
function migrateToCDN(cdnHost) {
270
  $('img').each(function() {
271
    const $img = $(this);
272
    const uri = $img.uri();
273
    
274
    if (uri.hostname() === 'old-cdn.example.com') {
275
      uri.hostname(cdnHost);
276
    }
277
  });
278
}
279

280
// Form action updates
281
$('form:uri(protocol=http)').attr('uri:protocol', 'https');
282
$('form:uri(hostname=staging.example.com)').attr('uri:hostname', 'api.example.com');
283

284
// Dynamic URI building
285
function buildApiUrl(endpoint, params) {
286
  const $template = $('<a>').attr('href', 'https://api.example.com/');
287
  const uri = $template.uri();
288
  
289
  uri.pathname('/api/v1/' + endpoint);
290
  
291
  if (params) {
292
    Object.keys(params).forEach(key => {
293
      uri.addQuery(key, params[key]);
294
    });
295
  }
296
  
297
  return uri.toString();
298
}
299

300
const userUrl = buildApiUrl('users', { page: 1, limit: 10 });
301
console.log(userUrl); // 'https://api.example.com/api/v1/users?page=1&limit=10'
302
```