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 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
采用call方式实现js继承
2014/05/20 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python继承和抽象类的实现方法
2015/01/14 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
网络安全方面的面试题
2015/11/04 面试题
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
迎七一演讲稿
2014/09/12 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书