我需要帮助阅读这段代码来理解它在做什么，这样我才能将它转换为javascript

Question

我想学习JavaScript。我知道jQuery是JavaScript的一个库，但语法非常不同，我只需要一些阅读代码的帮助，这样我就可以使用JavaScript重新创建它。

我正在处理youtube教程中的一个项目，该项目将项目添加到使用jQuery Mobile的WebSQL数据库中。在教程中，我正在更新我们输入的项目。代码能够用我们输入的信息填充更新表单。代码运行得很好，但它在jQuery中，如果可能的话，我想把它改成JavaScript。你能帮我解释一下代码实际在做什么以及如何将其转换为JavaScript吗？

更新表单的HTML代码

<div数据角色="；标题"><h1>更新产品<h1><div><div数据角色="；主"；class＝"；ui内容"><表单><div class="；ui字段包含"><标签为"＝"；newName"class＝"；ui隐藏可访问">名称<标签><输入类型＝"；文本"；id＝"；newName"数据清除btn＝"0"；真"；占位符＝"；新名称"/>lt；br/><标签为"＝"；newQuantity；class＝"；ui隐藏可访问">数量<标签><输入类型＝"；数字"；name＝"；数字"；pattern＝"；[0-9}"id="newQuantity"值="数据清除btn="true"占位符="New Quantity"/><br/><按钮类＝"；ui btn ui图标加上ui btn图标左"id＝"；btupdate"onclick="；updateProduct()"gt；更新<按钮><div><表单><div>````<div>填充表单然后更新更改的JavaScript代码。````var currentProduct={id:-1，名称："&"；，数量：-1，````}````$(document).on('pagebeforeshow'，'#updatedialog'，function(){$('#newName').val(currentProduct.name)；$('#newQuantity').val(currentProduct.quantity)；})；函数updateProduct(){var newName=$('#newName').val()；var newQuantity=$('#newQuantity').val()；productHandler.updateProduct(currentProduct.id，newName，newQuantity)；}

databaseHandler.db.transaction(函数(tx){tx.executeSql("更新产品集名称=？，数量=？其中id=&"；，[newName，newQuantity，_id]，函数(tx，results){}，函数(tx，error)｛//todo：向用户显示此消息console.log("更新产品时出错"+Error.message)；})；})；}

我想用产品信息填充更新表单，更改表单上的任何信息，并使用JavaScript而不是jQuery更新信息。

Answer 1

以下是jQuery部分：

$(document).on('pagebeforeshow', '#updatedialog', function() {
$('#newName').val(currentProduct.name);
$('#newQuantity').val(currentProduct.quantity);
});
function updateProduct() {
var newName = $('#newName').val();
var newQuantity = $('#newQuantity').val();
productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

以下是如何将它们转换为纯JavaScript：

document.getElementById("updatedialog").addEventListener("pagebeforeshow", function() {
document.getElementById("newName").value = currentProduct.name;
document.getElementById("newQuantity").value = currentProduct.name;
});
function updateProduct() {
var newName = document.getElementById("newName").value
var newQuantity = document.getElementById("newQuantity").value
productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

Answer 2

每当我需要将JQuery代码更改为Javascript时，我都会使用此网页：http://youmightnotneedjquery.com/Jquery到Javascript。您应该拥有将Jquery部分更改为javascript所需的所有信息。

最明显的是将"$"替换为document.querySelectorAll.

示例：

$('#newName').val(currentProduct.name);

替换为：

document.getElementById('newName').value = currentProduct.name;

希望它能有所帮助！