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 相关文章推荐
简明json介绍
Sep 28 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
vue实现锚点定位功能
Jun 29 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
来自PHP.NET的入门教程
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
javascript的push使用指南
2014/12/05 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django 配置多站点多域名的实现步骤
2019/05/17 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
产品包装策划方案
2014/05/18 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
python 单机五子棋对战游戏
2022/04/28 Python