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 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
webpack3+React 的配置全解
Aug 21 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 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自动获取目录下的模板的代码
2010/08/08 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
Web开发之JavaScript
2012/03/29 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python正规则表达式学习指南
2016/08/02 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
python批量处理txt文件的实例代码
2020/01/13 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
销售人员求职的自我评价分享
2014/03/15 职场文书
爱心活动计划书
2014/04/26 职场文书
3分钟演讲稿
2014/04/30 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL