首頁 > web前端 > js教程 > 主體

jQuery如何轉換url位址取得url目錄

php中世界最好的语言
發布: 2018-04-23 14:02:25
原創
2425 人瀏覽過

這次帶給大家jQuery如何轉換url位址取得url目錄,jQuery轉換url位址取得url目錄的注意事項有哪些,下面就是實戰案例,一起來看一下。

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>
 
<p data-role="page">
 
 <p 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">
  <p id="myResult">The result will be displayed here</p>
 </p>
</p>
<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>
 
<p data-role="page"> 
 <p 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" />
  <p id="myResult">The result will be displayed here</p>
 </p>
</p>
<script>
$(document).ready(function() { 
  $( ".myButton" ).on( "click", function() { 
   var dirName = $.mobile.path.get( $( this ).attr( "value" ) ); 
  $( "#myResult" ).html( String( dirName ) );
 }) 
});
</script>
 
</body>
</html>
登入後複製

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

jquery動態載入Js檔案與Css檔步驟詳解

jquery解析XML字串XML文件步驟詳解(附程式碼)

#

以上是jQuery如何轉換url位址取得url目錄的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!