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 WEB操作方法分享
Feb 28 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
原生js调用json方法总结
Feb 22 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
vue实现记事本功能
Jun 26 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
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分页代码学习示例分享
2014/02/20 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
python SocketServer源码深入解读
2019/09/17 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
部队万能检讨书
2014/02/20 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
个性婚礼策划方案
2014/05/17 职场文书
献爱心标语
2014/06/21 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
入股协议书范本
2014/11/01 职场文书
植树节新闻稿
2015/07/17 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android