jquery 获取当前页面路径

原创

mob64ca12e2ba6f 2023-10-09 13:27:17 ©著作权

文章标签 当前页代码示例 javascript 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e2ba6f的原创作品，请联系作者获取转载授权，否则将追究法律责任

JQuery 获取当前页面路径

在前端开发中，经常需要获取当前页面的路径。通过这种方式，我们可以在代码中使用这个路径，例如用于加载其他资源文件、跳转页面或者进行一些其他的操作。

在本文中，我们将介绍如何使用 JQuery 获取当前页面的路径，并提供一些代码示例来帮助您理解和实践这个功能。

获取当前页面路径

在 JQuery 中，我们可以通过 window.location 对象来获取当前页面的路径。具体地说，我们可以使用 window.location.href 属性来获取完整的当前页面 URL，或使用 window.location.pathname 属性来获取当前页面的路径部分。

下面是一个使用 JQuery 获取当前页面路径的代码示例：

// 获取当前页面 URL
var currentUrl = window.location.href;
console.log("当前页面 URL：" + currentUrl);

// 获取当前页面路径
var currentPath = window.location.pathname;
console.log("当前页面路径：" + currentPath);

在上述代码中，我们分别使用 window.location.href 和 window.location.pathname 获取了当前页面的完整路径和路径部分，并通过 console.log() 打印到控制台上。

实例演示

为了更好地理解和实践获取当前页面路径的方法，我们可以创建一个简单的示例。在这个示例中，当用户点击一个按钮时，我们将获取当前页面路径，并将其显示在页面上。

首先，我们需要在 HTML 中添加一个按钮和一个用于显示路径的元素：

<button id="getPathButton">获取当前页面路径</button>
<p id="pathDisplay"></p>

然后，在 JavaScript 中添加以下代码：

// 当按钮被点击时，获取当前页面路径并显示在页面上
$("#getPathButton").click(function() {
  var currentPath = window.location.pathname;
  $("#pathDisplay").text("当前页面路径：" + currentPath);
});

在上述代码中，我们使用了 JQuery 的 click 方法来监听按钮的点击事件。当按钮被点击时，会执行一个回调函数，其中我们获取当前页面路径并将其显示在页面上的 p 元素中。

这样，当用户点击按钮时，页面上的 p 元素将显示当前页面的路径。

总结

在本文中，我们介绍了如何使用 JQuery 获取当前页面的路径。通过使用 window.location.href 和 window.location.pathname，我们可以轻松地获取当前页面的完整路径和路径部分，并在代码中进行操作。

以上是获取当前页面路径的基本方法和示例。希望本文能够帮助您理解并实践这个功能。如有任何疑问或建议，请随时与我们联系。

类图

下面是一个使用 mermaid 语法标识的类图，展示了相关的类和方法：

classDiagram
    class Window {
        +location: Location
    }

    class Location {
        +href: string
        +pathname: string
    }

    class JQuery {
        +click(callback: Function): JQuery
        +text(value: string): JQuery
    }

    class Button {
        +id: string
    }

    class Paragraph {
        +id: string
    }

    Window o-- Location
    JQuery o-- Button
    JQuery o-- Paragraph