《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.21 技巧:利用jQuery Mobile的辅助函数

简介: 第25行演示了parseUrl()函数。它是一个从URL字符串读取多个部分信息的便捷函数。该函数返回一个对象。在这个示例中,它是字符串形式的JSON,为可读性的需要在每个逗号后面添加了一个换行。表9-3列出了parseUrl()函数的返回值。

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章,第9.21节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

9.21 技巧:利用jQuery Mobile的辅助函数

jQuery Mobile在发起AJAX请求的背后使用了许多实用函数(utility function)。为了方便起见,这些实用函数也是可以复用的。代码清单9-25演示了为自己的目的而使用与URL相关的实用函数。

代码清单9-25 使用parseUrl()函数读取URL

00 <!DOCTYPE html> 
01 <html> 
02 <head> 
03  <title>URL Utilities</title> 
04  <meta name="viewport" 
05    content="width=device-width, initial-scale=1"> 
06  <link rel="stylesheet" href=
07    "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08  <script type="text/javascript"
09    src="http://code.jquery.com/jquery-1.7.1.min.js">
10  </script>
11  <script type="text/javascript" src=
12    "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13  </script>
14  <script>
15  $(document).ready(function() {
16        
17   $('#parse').on('click', function() {
18     
19     var url = 'http://user:password@www.pearsonhighered.com' +
20           ':80/educator/series/Developers-Library' +
21           '/10483.page?key=value#first-id';
22 
23     var parsedUrl = 
24      JSON.stringify(
25       $.mobile.path.parseUrl(url)
26      )
27      .replace(/,/g, ',<br>');
28     $('#output').html(parsedUrl);
29    });
30    $('#absolutepath').on('click', function() {
31     
32     $('#output').html(
33      $.mobile.path.makePathAbsolute(
34       'newfile.html',
35       '/root/path/oldfile.html'
36      )
37     );         
38    });
39    $('#absoluteurl').on('click', function() {
40     
41     $('#output').html(
42      $.mobile.path.makeUrlAbsolute(
43       'newfile.html',
44       'http://www.domain.com/root/path/oldfile.html'
45      )
46     );         
47    });
48    $('#isabsolute').on('click', function() {
49      
50     $('#output').html('isAbsoluteUrl=' +
51      $.mobile.path.isAbsoluteUrl(
52       'http://www.domain.com/root/path/oldfile.html'
53      )
54     );         
55    });
56    $('#isrelative').on('click', function() {
57      
58     $('#output').html('isRelativeUrl=' +
59      $.mobile.path.isRelativeUrl(
60       'http://www.domain.com/root/path/oldfile.html'
61      )
62     );         
63    });
64    $('#samedomain').on('click', function() {
65      
66     $('#output').html('isSameDomain=' +
67      $.mobile.path.isSameDomain(
68       'http://www.domain.com/root/path/oldfile.html',
69       'http://www.domain.com/root/path/newfile.html'
70      )
71     );         
72    });
73  });
74  </script>
75 </head> 
76 <body> 
77 
78 <div data-role="page">
79 
80  <div data-role="header">
81    <h1>URL Utilities</h1>
82  </div>
83 
84  <div data-role="content"> 
85   <a href="#" id="parse" data-role="button">Parse URL</a>
86   <a href="#" id="absolutepath" data-role="button">Make Path
87    Absolute</a>
88   <a href="#" id="absoluteurl" data-role="button">Make URL
89    Absolute</a>
90   <a href="#" id="isabsolute" data-role="button">Is Absolute
91    Url</a>
92   <a href="#" id="isrelative" data-role="button">Is Relative
93    Url</a>
94   <a href="#" id="samedomain" data-role="button">Is Same 
95    Domain</a>
96    
97   <p id="output">Placeholder for the output</p>
98  </div>
99  
100 </div>
101 
102 </body>
103 </html>

上面的示例代码是多种实用函数的聚集。让我们一个一个地来讨论它们。

第25行演示了parseUrl()函数。它是一个从URL字符串读取多个部分信息的便捷函数。该函数返回一个对象。在这个示例中,它是字符串形式的JSON,为可读性的需要在每个逗号后面添加了一个换行。表9-3列出了parseUrl()函数的返回值。
screenshot
screenshot
第33~36行演示了makePathAbsolute()函数。当你拥有的是相对路径(可以是文件名、路径名、两者的混合体或者可能以../开始的值)时,可以和一个绝对路径一起使用,然后计算出新的绝对路径。

第42~45行做了相同的事情,只是它是使用makeUrlAbsolute()函数来操作URL。类似地,第51~53行通过使用isAbsoluteUrl()函数,可以检查字符串来判断它是否为绝对URL。第59~61行演示了isRelativeUrl()函数,这个函数做的工作恰好相反。

第67~70行使用isSameDomain()函数来检查两个URL是否指向相同的域名。该函数在想判断是否能用AJAX请求时会很有用。它通过比较传递参数的协议还有域名,来判断它们是否在同一个域中。该函数还会比较子域名。

相关文章
|
7月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
62 1
|
6月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
44 4
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
4月前
|
JavaScript 前端开发
jQuery的作用及入口函数
jQuery的作用及入口函数
27 1
|
6月前
|
JavaScript 前端开发
jQuery 常用函数解析
jQuery 常用函数解析
|
6月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
130 0
|
7月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
7月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
7月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
47 0
|
7月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
56 0