jQuery mobile转换url地址及获取url中目录部分的方法


Posted in Javascript onDecember 04, 2015

path.makeUrlAbsolute() 把相对URL转化为绝对URL

jQuery.mobile.path.makeUrlAbsolute( relUrl, absUrl )

把相对URL转化为绝对URL的方法。这个函数返回一个字符串,绝对URL。

relUrl:相对网址。类型:字符串。

absUrl:绝对网址。类型:字符串。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery.mobile.path.makeUrlAbsolute demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <style>
 #myResult{
  border: 1px solid;
  border-color: #108040;
  padding: 10px;
  }
 </style>
</head>
<body>
 
<div data-role="page">
 
 <div data-role="content">
  <p>The absoulte URL used is http://foo.com/a/b/c/test.html</p>
  <input type="button" value="file.html" id="button1" class="myButton" data-inline="true">
  <input type="button" value="../../foo/file.html" id="button2" class="myButton" data-inline="true">
  <input type="button" value="//foo.com/bar/file.html" id="button3" class="myButton" data-inline="true">
  <input type="button" value="?a=1&b=2" id="button4" class="myButton" data-inline="true">
  <input type="button" value="#bar" id="button5" class="myButton" data-inline="true">
  <div id="myResult">The result will be displayed here</div>
 </div>
</div>
<script>
$(document).ready(function() { 
  $( ".myButton" ).on( "click", function() { 
   var absUrl = $.mobile.path.makeUrlAbsolute( $( this ).attr( "value" ), "http://foo.com/a/b/c/test.html" ); 
  $( "#myResult" ).html( absUrl );
 }) 
});
</script>
 
</body>
</html>

path.get() 确定URL中的目录部分

jQuery.mobile.path.get( url )

url:只有一个参数。类型:字符串。

确定URL中的目录部分的实用方法。如果URL没有斜线,URL的一部分被认为是一个文件。这个函数返回一个给定的URL目录部分。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery.mobile.path.get demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <style>
 #myResult{
  border: 1px solid;
  border-color: #108040;
  padding: 10px;
  }
 </style>
</head>
<body>
 
<div data-role="page"> 
 <div data-role="content">
  <input type="button" value="http://foo.com/a/file.html" id="button1" class="myButton" data-inline="true" />
  <input type="button" value="http://foo.com/a/" id="button2" class="myButton" data-inline="true" />
  <input type="button" value="http://foo.com/a" id="button3" class="myButton" data-inline="true" />
  <input type="button" value="//foo.com/a/file.html" id="button4" class="myButton" data-inline="true" />
  <input type="button" value="/a/file.html" id="button5" class="myButton" data-inline="true" />
  <input type="button" value="file.html" id="button6" class="myButton" data-inline="true" />
  <input type="button" value="/file.html" id="button7" class="myButton" data-inline="true" />
  <input type="button" value="?a=1&b=2" id="button8" class="myButton" data-inline="true" />
  <input type="button" value="#foo" id="button9" class="myButton" data-inline="true" />
  <div id="myResult">The result will be displayed here</div>
 </div>
</div>
<script>
$(document).ready(function() { 
  $( ".myButton" ).on( "click", function() { 
   var dirName = $.mobile.path.get( $( this ).attr( "value" ) ); 
  $( "#myResult" ).html( String( dirName ) );
 }) 
});
</script>
 
</body>
</html>
Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
VueJS实现用户管理系统
May 29 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 #Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 #Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 #Javascript
详解JavaScript逻辑And运算符
Dec 04 #Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 #Javascript
详解JavaScript逻辑Not运算符
Dec 04 #Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 #Javascript
You might like
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
php实现websocket实时消息推送
2018/03/30 PHP
PDO::setAttribute讲解
2019/01/29 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
vuex的简单使用教程
2018/02/02 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Python3安装Scrapy的方法步骤
2017/11/23 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python程序需要编译吗
2020/06/19 Python
Python远程linux执行命令实现
2020/11/11 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
产品发布会策划方案
2014/05/12 职场文书
医院合作协议书
2014/08/19 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
党员带头倡议书
2015/04/29 职场文书
2015年市场部工作总结
2015/04/30 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
党员读书活动心得体会
2016/01/14 职场文书