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+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
javascript表单验证大全
Aug 12 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
JavaScript函数柯里化实现原理及过程
Dec 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
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
Python制作爬虫抓取美女图
2016/01/20 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
杭州时比特电子有限公司SQL
2013/08/22 面试题
分布式数据库需要考虑哪些问题
2013/12/08 面试题
新闻专业个人自我评价
2013/09/21 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
地球上的星星观后感
2015/06/02 职场文书
总结会主持词
2015/07/02 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL