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 相关文章推荐
jquery.tmpl JQuery模板插件
Oct 10 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
vue实现记事本功能
Jun 26 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
财会自我鉴定范文
2013/12/27 职场文书
《社戏》教学反思
2014/04/15 职场文书
营销团队口号
2014/06/06 职场文书
个人委托书范本
2014/09/13 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
博物馆观后感
2015/06/05 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2016年学校招生广告语
2016/01/28 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
浅析Django接口版本控制
2021/06/26 Python