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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
sina的lightbox效果。
Jan 09 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 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
如何在PHP程序中防止盗链
2008/04/09 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
详解js闭包
2014/09/02 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
python数值基础知识浅析
2019/11/19 Python
python爬虫基础知识点整理
2020/06/02 Python
Python过滤序列元素的方法
2020/07/31 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
什么是TCP/IP
2014/07/27 面试题
Linux的文件类型
2016/07/05 面试题
大学生自我鉴定评语
2014/01/27 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
运动会广播稿50字
2015/08/19 职场文书
python如何获取网络数据
2021/04/11 Python
Nginx速查手册及常见问题
2022/04/07 Servers