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 显示当前系统时间代码
Dec 28 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
Apache设置虚拟WEB
2006/10/09 PHP
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
javascript数组详解
2014/10/22 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
webpack优化的深入理解
2018/12/10 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python super()方法原理详解
2020/03/31 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
python集合能干吗
2020/07/19 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android