How to implement click to jump to a new page in jquery-Front-end Q&A-php.cn

How to implement click to jump to a new page in jquery

PHPz

Release： 2023-04-11 09:29:12

Original

3881 people have browsed it

jQuery (JQuery JavaScript Library) is a fast, small, and feature-rich JavaScript library written in JavaScript, making HTML document operations, event handling, animation effects, and Ajax interactions simpler and more elegant. In Web development, the application of jQuery has rapidly become popular and has become an important tool for page interaction. One of the most commonly used functions is to click to jump to a new page. Here is a brief introduction to how to implement this function.

To implement jQuery click to jump to a new page, we need to use the click() method and window.location.href property in jQuery. window.location.href is a property in the window object. It is used to return the URL of the current page and can be used to jump to a new URL, which is the key to achieving page jump.

The following is a simple example:

<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                window.location.href="http://www.baidu.com";
            });
        });
    </script>
</head>
<body>
<button id="btn">跳转到百度</button>
</body>
</html>

Copy after login

In this example, we introduced the jQuery library file in the head and added click() to a button in the ready() method ) event, when the user clicks the button, a jump operation will be performed to jump the page to the Baidu website.

It should be noted that when using the window.location.href attribute to jump to a page, you must pay attention to whether the jump target site complies with the security protocol, such as whether it is HTTPS or HTTP protocol, etc., otherwise it may It was deemed as unsafe behavior by the browser and blocked.

Another way is to use the location.replace() method to jump to the page. This method can replace the current page with a new target page, for example:

$(document).ready(function(){
    $("#btn").click(function(){
        location.replace("http://www.baidu.com");
    });
});

Copy after login

The above is to implement jQuery click Several ways to jump to a new page. By flexibly using the methods and properties in the jQuery library, we can easily achieve various page interaction effects. At the same time, we must pay attention to security behaviors to ensure the efficiency and security of the website experience.

The above is the detailed content of How to implement click to jump to a new page in jquery. For more information, please follow other related articles on the PHP Chinese website!