[已解决]使用Jquery后还能使用JS的原生DOM方法吗？

Brian233 · 发表于 2023-8-29 16:54:01

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

一个关于JQuery的问题

我正在写一个页面，html和js如下：
index.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Blog-主页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/dialog.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><img src="./imgs/book.png" alt="书籍图片-用作网页logo" srcset=""></li>
                <li><a href="">主页</a></li>
                <li><a href="">博文</a></li>
                <li><a href="">我的</a></li>
            </ul>
        </nav>
        <section>
            <div>
                <h1>Test</h1>
                <p>
                    Test
                </p>
            </div>
        </section>
    </header>
    <section class="register-now">
        <div>
            <h1>注册！</h1>
            <p>Test</p>
            <button class="user-dialog-button">注册</button>
        </div>
    </section>
    <dialog class="user-dialog">
        <form method="post" action="#">
            <h2>注册</h2>
            <label for="username">用户名</label>
            <input type="text" name="username" id="" />
            <br>
            <label for="email">邮箱</label>
            <input type="text" name="email" id="" />
            <br>
            <label for="user-password">密码</label>
            <input type="password" name="user-password" id="">
            <br>
                <input type="checkbox" name="user-rules">
                <label for="rules">我同意《用户协议》</label>
            <br>
            <button id="submit" onclick="return false;">注册</button>
        </form>
        <br>
        <button id="change">切换登录</button>
        <form method="dialog">
            <button id="close-user-dialog">X 关闭</button>
        </form>

    </dialog>
    <footer>
        <h3>友情链接</h3>
        <ul>
            <li><a href="">Example</a></li>
        </ul>
    </footer>
    <script src="./scripts/base.js"></script>
    <script src="./scripts/user-dialog.js"></script>
</body>

</html>

user_dialog.js

import jquery from "./jquery";
document.querySelector(".user-dialog-button").addEventListener("click",function set_event() {;
    let element = document.querySelector(".user-dialog");
    element.showModal();
})
function send_data(){
    let json_data = {"username":document.getElementsByName("username").innerText,
    "password":document.getElementsByName("password").innerText,
    "email":document.getElementsByName("email").innerText

}
    if (json_data[0] == "" | json_data[1] == ""| json_data[2] == ""){
        alert("数据填写不完整");
        return false;
    }
    $.ajax({
        type: "post",
        url: "",//我发不了url
        data: json_data,
        dataType: "json",
        success: function (response) {
            if (JSON.parse(response)["message"] == "error"){
                alert("注册失败");
            }
            else{
                alert("注册成功")
            }
        }
    });
}
document.querySelector("#submit").addEventListener("click",send_data)

然而，我发现只要引入了Jquery，原来JS的DOM好像操作不了或者事件监听用不了，请大佬告诉我这是怎么回事，谢谢！

以及我Ajax写得可能不对，第一次写233

最佳答案

月排行榜 / 总排行榜

isdkz

2023-8-29 16:54:43

在你的代码中，当你引入了jQuery之后，确实会覆盖掉一些原生的JavaScript DOM方法和事件监听。这是因为jQuery是一个JavaScript库，它提供了自己的方法和事件处理机制。

在你的代码中，你使用了原生的 document.querySelector 方法来选择元素，并使用 addEventListener 方法来添加事件监听器。然而，当你引入了jQuery之后， document.querySelector 方法将不再起作用，因为jQuery提供了自己的选择器和事件处理方法。

解决这个问题的一种方法是，你可以使用jQuery提供的选择器和事件处理方法来代替原生的方法。例如，你可以使用 $(".user-dialog-button").click(function(){...}) 来替代 document.querySelector(".user-dialog-button").addEventListener("click", function(){...}) 。

另一种方法是，你可以在使用jQuery之前，将jQuery对象转换回原生的JavaScript对象。你可以使用 $() 函数来包装原生的DOM元素。例如，你可以使用 $(document.querySelector(".user-dialog-button")) 来获取一个jQuery对象，然后再使用jQuery提供的方法和事件处理机制。

至于你的Ajax代码，你需要注意几个问题：
1. 在 send_data 函数中，你使用了 document.getElementsByName 方法来获取表单元素的值。然而，这个方法返回的是一个NodeList对象，而不是单个元素。你应该使用 document.getElementsByName("username")[0].value 来获取输入框的值。
2. 在比较json_data的值时，你使用了位运算符 | 来代替逻辑运算符 || 。你应该使用 || 来进行逻辑或操作。
3. 在发送Ajax请求时，你需要提供一个有效的URL。你可以将URL替换为你要发送请求的服务器端地址。

希望这些解释能够帮助你理解问题的原因，并提供了解决问题的方法。如果你有任何疑问，请随时提问。

跳转到最佳答案楼层

isdkz · 发表于 2023-8-29 16:54:43

在你的代码中，当你引入了jQuery之后，确实会覆盖掉一些原生的JavaScript DOM方法和事件监听。这是因为jQuery是一个JavaScript库，它提供了自己的方法和事件处理机制。

在你的代码中，你使用了原生的 document.querySelector 方法来选择元素，并使用 addEventListener 方法来添加事件监听器。然而，当你引入了jQuery之后， document.querySelector 方法将不再起作用，因为jQuery提供了自己的选择器和事件处理方法。

解决这个问题的一种方法是，你可以使用jQuery提供的选择器和事件处理方法来代替原生的方法。例如，你可以使用 $(".user-dialog-button").click(function(){...}) 来替代 document.querySelector(".user-dialog-button").addEventListener("click", function(){...}) 。

另一种方法是，你可以在使用jQuery之前，将jQuery对象转换回原生的JavaScript对象。你可以使用 $() 函数来包装原生的DOM元素。例如，你可以使用 $(document.querySelector(".user-dialog-button")) 来获取一个jQuery对象，然后再使用jQuery提供的方法和事件处理机制。

至于你的Ajax代码，你需要注意几个问题：
1. 在 send_data 函数中，你使用了 document.getElementsByName 方法来获取表单元素的值。然而，这个方法返回的是一个NodeList对象，而不是单个元素。你应该使用 document.getElementsByName("username")[0].value 来获取输入框的值。
2. 在比较json_data的值时，你使用了位运算符 | 来代替逻辑运算符 || 。你应该使用 || 来进行逻辑或操作。
3. 在发送Ajax请求时，你需要提供一个有效的URL。你可以将URL替换为你要发送请求的服务器端地址。

希望这些解释能够帮助你理解问题的原因，并提供了解决问题的方法。如果你有任何疑问，请随时提问。

账号		自动登录	找回密码
密码			立即注册