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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
JavaScript文档对象模型DOM
Nov 20 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 解压rar文件及zip文件的方法
2014/05/05 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JsRender for object语法简介
2014/10/31 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
期中考试反思800字
2014/05/01 职场文书
节能环保标语
2014/06/12 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python