Hello guys, in the last jQuery tutorial, I have taught you how to set and get values from a text field using jQuery and in this jQuery tutorial, you will learn about how to get the current URL and hash values, like something which starts with # (hash) letter. For example, in the URL http://localhost:8080/HelloWeb/test.html#ixzz2PGmDFlPd, URL is http://localhost:8080/HelloWeb/test.html and the hash value is ixzz2PGmDFlPd. This is important information and you will often find needing hash values from the current URL while working on a web application.
By the way, this is not the only way to retrieve the current URL and hash values in a web application. You can also get the current URL and hash values directly by using the location object of JavaScript as the window.location object and then the hash by using its hash property as window.locatoin.hash, you can also get them by using jQuery and its attr() function, as shown in the next section.
It's also good to know about different parts of URL and their association with location properties like:
Also, things have changed a lot in the last few years with so many JavaScript enhancements like ES6 and TypeScript. Now you can do most of the things in plain Javascript which requires jQuery, hence a good knowledge of modern JavaScript is essential for any developer.
If you want to learn Modern JavaScript or level up your skills then I suggest you join these best JavaScript courses from Udemy ad Coursera. It's one of the best and hands-on resources to learn ES 6 and other new Javascript features.
We are doing things in a jQuery way and I have used the attr() function to get these attributes as shown in the following example, btw, If you want to learn more about the common jQuery functions like val() and attr() and others then I also suggest you go through The Complete jQuery course on Udemy.
The course is not free but very affordable and you can buy in just $10 on Udemy flash sales which happen every now and then.
When you open this file into a browser, it will download the jQuery script file from a CDN mentioned in the file and when you click the submit button after entering a value into the text field it will fetch and show to you.
Here is how it would look like when you run this program:
You can see that our jQuery code has correctly captured the current URL, current hash, and current Path values from the URL.
That's all about how to get the current URL, path, and hash value using jQuery. Even though you can get those values directly from JavaScript location objects, using jQuery makes your solution cross-browser, and I highly recommend using jQuery for all-purpose if you are already using it. Mixing jQuery and JavaScript is ok, but then you are leaving holes that may get affected by browser compatibility issues. Using jQuery for everything keeps your code clean and cross-browser compatible.
Other JavaScript and jQuery tutorials you may like to explore the top 10 Courses to learn JavaScript (courses)
Thanks for reading this article so far, If you find this jQuery tutorial useful then please share it with your friends and colleagues. If you have any questions or feedback, then please drop a comment.
By the way, this is not the only way to retrieve the current URL and hash values in a web application. You can also get the current URL and hash values directly by using the location object of JavaScript as the window.location object and then the hash by using its hash property as window.locatoin.hash, you can also get them by using jQuery and its attr() function, as shown in the next section.
It's also good to know about different parts of URL and their association with location properties like:
- location.href - full URL including http like http://localhost:8080/HelloWeb/test.html but without the hash
- location.pathname - URL without http and hash value like the localhost:8080/HelloWeb/test.html
- location.hash - The hash value, I mean anything after # like, ixzz2PGmDFlPd
Also, things have changed a lot in the last few years with so many JavaScript enhancements like ES6 and TypeScript. Now you can do most of the things in plain Javascript which requires jQuery, hence a good knowledge of modern JavaScript is essential for any developer.
If you want to learn Modern JavaScript or level up your skills then I suggest you join these best JavaScript courses from Udemy ad Coursera. It's one of the best and hands-on resources to learn ES 6 and other new Javascript features.
jQuery Example to get the current Page URL, hash, and Path
Here is the pure jQuery solution to this problem. In this example, we are getting the current URL, the path, and the hash value from the current URL. All this information is extracted once the page is loaded. Depending upon the URL you enter, you will see the different output, which is nothing but text appended to div, used as output board.We are doing things in a jQuery way and I have used the attr() function to get these attributes as shown in the following example, btw, If you want to learn more about the common jQuery functions like val() and attr() and others then I also suggest you go through The Complete jQuery course on Udemy.
The course is not free but very affordable and you can buy in just $10 on Udemy flash sales which happen every now and then.
jQuery Coe to extract Hash and Path values from Current URL
<html> <head> <title>How to find current URL and hash using jQuery</title> </head> <body> <h2>jQuery example to find the current URL and hash</h2> <div id="board"></div> <script src="https://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).ready(function(){ var URL = $(location).attr('href'); var hash = $(location).attr('hash'); var path = $(location).attr('pathname'); $("#board").append("current URL: " + URL +"</br>"); $("#board").append("current hash: " + hash +"</br>"); $("#board").append("current path: " + path +"</br>"); }); </script> </body> </html>
How to run this jQuery Example?
If you look at this jQuery example it's nothing but an HTML file with some JavaScript in between. You can just copy-paste this code in a file and save it as an HTML file like test.html and then open that file in a browser like Chrome, Firefox, or any other browser.When you open this file into a browser, it will download the jQuery script file from a CDN mentioned in the file and when you click the submit button after entering a value into the text field it will fetch and show to you.
Here is how it would look like when you run this program:
You can see that our jQuery code has correctly captured the current URL, current hash, and current Path values from the URL.
That's all about how to get the current URL, path, and hash value using jQuery. Even though you can get those values directly from JavaScript location objects, using jQuery makes your solution cross-browser, and I highly recommend using jQuery for all-purpose if you are already using it. Mixing jQuery and JavaScript is ok, but then you are leaving holes that may get affected by browser compatibility issues. Using jQuery for everything keeps your code clean and cross-browser compatible.
Other JavaScript and jQuery tutorials you may like to explore the top 10 Courses to learn JavaScript (courses)
- Top 10 Courses to learn Angular for web developers (courses)
- How to redirect an URL using jQuery? (tutorial)
- Top 5 free Courses to learn Node.js for web developers (courses)
- How to get current URL parameters using jQuery? (tips)
- My favorite free JavaScript online tutorials (see)
- 10 Examples of jQuery selectors (examples)
- Top 5 Courses to learn React.js and Redux (courses)
- 3 ways to solve jQuery: Uncaught Reference: $ is not defined error (solution)
- 20 jQuery Interview Questions for Web Developers (list)
- Difference between the jQuery document.ready() function and JavaScript window.onload (answer)
- Top 5 books to learn JavaScript for Web Developers (books)
- How to use jQuery class and ID selector on a page? (example)
- Top 5 Courses to learn jQuery online for FREE (courses)
Thanks for reading this article so far, If you find this jQuery tutorial useful then please share it with your friends and colleagues. If you have any questions or feedback, then please drop a comment.
P. S. - A good knowledge of Modern JavaScript is essential for any web developer as now you can do most of the things in plain JavaScript which requires jQuery earlier. If you want to learn Modern JavaScript or level up your skills, then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy.
No comments:
Post a Comment
Feel free to comment, ask questions if you have any doubt.