Home > Article > Web Front-end > How jQuery converts url address to obtain url directory
This time I will show you how jQuery converts the url address to obtain the url directory. What are the precautions for jQuery to convert the url address to obtain the url directory. The following is a practical case, let's take a look.
path.makeUrlAbsolute() Convert relative URL to absolute URL
jQuery.mobile.path.makeUrlAbsolute( relUrl, absUrl )Method to convert relative URL to absolute URL. This function returns a
string , absolute URL.
relUrl: relative URL. Type: string. absUrl: Absolute URL. Type: string.<!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() Determine the directory part of the URL
jQuery.mobile.path.get( url )url: Only one parameter. Type: string. A practical way to determine the directory portion of a URL. If the URL does not have slashes, that part of the URL is considered a file. This function returns the directory portion of a given 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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
Detailed explanation of the steps for jquery to dynamically load Js files and Css files
The above is the detailed content of How jQuery converts url address to obtain url directory. For more information, please follow other related articles on the PHP Chinese website!