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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
javascript学习小结之prototype
Dec 03 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
服装设计师职业生涯规划范文
2014/02/28 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
高中同学会活动方案
2014/08/14 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
安全守法证明
2015/06/23 职场文书
换届选举主持词
2015/07/03 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
分享15个Webpack实用的插件!!!
2021/03/31 Javascript