ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryがURLアドレスを変換してURLディレクトリを取得する方法
今回は、jQuery が URL アドレスを変換して URL ディレクトリを取得する方法を説明します。 jQuery が URL アドレスを変換して URL ディレクトリを取得するときの 注意事項 とは何ですか。実際のケースを見てみましょう。
path.makeUrlAbsolute() 相対URLを絶対URLに変換
jQuery.mobile.path.makeUrlAbsolute( relUrl, absUrl )相対URLを絶対URLに変換するメソッド。この関数は、絶対 URL である
String を返します。
relUrl: 相対 URL。タイプ: 文字列。 absUrl: 絶対 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.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 のディレクトリ部分を決定します: パラメーターは 1 つだけです。タイプ: 文字列。 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 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
jquery が Js ファイルと Css ファイルを動的にロードする手順の詳細な説明
jquery が XML 文字列 + XML ファイルを解析する手順の詳細な説明 (コード付き)
以上がjQueryがURLアドレスを変換してURLディレクトリを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。