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 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
分享PHP header函数使用教程
2013/09/05 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
详解Vue.js分发之作用域槽
2017/06/13 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python开发中module模块用法实例分析
2015/11/12 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python发展史及网络爬虫
2019/06/19 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
求职信的要素有哪些呢
2013/12/26 职场文书
营销总经理岗位职责
2014/02/02 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
mysql 排序失效
2022/05/20 MySQL