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 相关文章推荐
javascript操作文本框readOnly
May 15 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 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的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
《望洞庭》教学反思
2014/02/16 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL