[已解决]使用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替换为你要发送请求的服务器端地址。

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

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