Javascript JQuery没有'；选择不当

我试图用JQuery在我的页面上选择一个按钮并隐藏它（现在，作为测试）。出于我无法理解的原因，我无法使用JQuery选择它，使用警报进行测试也不起作用。对不起，代码太乱了，谢谢你的帮助

片段：

function main函数（）{
document.getElementById（“quarter1”）.innerHTML=“欢迎来到艺术元素，这是一个旨在为艺术周教授艺术元素的网站项目。
”；
$（“#按钮1”）。单击（函数（）{
$（“#按钮1”）.hide（）；
});
document.getElementById（“quarte1”）.setAttribute（“样式”，“背景：颜色；”）；
document.getElementById（“quarter2”）.setAttribute（“样式”，“背景：颜色；”）；
document.getElementById（“quarter3”）.setAttribute（“样式”，“背景：颜色；”）；
document.getElementById（“quarter4”）.setAttribute（“样式”，“背景：颜色；”）；
}
函数setTopRight（颜色）{
document.getElementById（“quarter3”）.setAttribute(
“样式”、“背景：颜色；”；
}
函数mainJQ（）{
$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
$（“#按钮1”）.hide（）；
});
});
};
#主{
背景:#333333；
宽度：100%；
身高：100%；
左边距：0；
边际上限：0；
右边距：0；
页边距底部：0；
保证金：0；
位置：绝对位置；
字体系列：“开放式SAN”；
字体大小：25px；
文本对齐：居中；
}
#四分之一{
背景：006600；
宽度：50%；
身高：50%；
保证金权利：50%；
边际上限：0；
左边距：0；
边缘底部：50vh；
位置：绝对位置；
}
#第二季度{
背景#003399；
宽度：50%；
身高：50%；
保证金权利：50%；
边际上限：50vh；
左边距：0；
页边距底部：0；
位置：绝对位置；
}
#第三季度{
背景：#cc3300；
宽度：50%；
身高：50%；
右边距：0；
边际上限：0；
左边距：50%；
边缘底部：50vh；
位置：绝对位置；
}
#四分之一{
背景：#CC00；
宽度：50%；
身高：50%；
右边距：0；
边际上限：50vh；
左边距：50%；
页边距底部：0；
位置：绝对位置；
}
身体{
背景:#333333；
保证金：0；
}
.main按钮{
边界半径：4px；
背景：透明；
边框：纯色2px黑色；
颜色：黑色；
垫面：4px；
垫底：4px；
左侧填充：20px；
右边填充：20px；
文字装饰：无；
字体大小：25px；
字体系列：“开放式SAN”；
文本对齐：居中；
}

尝试使用
.on（“单击”，函数（）{}）而不是
。单击（函数（）{}）

.on（“单击”，函数（）{}）
将处理动态添加的内容，而
。单击（function（）{}）仅适用于已存在的元素

使用
.on（“单击”，function（）{}）
将确保函数将运行，即使在运行该行代码时元素不存在。
在调用任何自定义代码之前包括jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


在使用$（）或JQUERY（）方法时，请始终在代码之前包含JQUERY库，否则请使用纯javascript。
您的代码有很多地方出错，因此我将一次处理一个：

其中一个函数包含的代码应在DOM就绪时自动运行，但该函数从未被调用，并且它不应首先包装DOM就绪函数：

// This function is never called, so its child function can't do its job
// Plus, document.ready shouldn't be encapsulated anyway
function mainJQ() {
  $(document).ready(function() {
    $("#button1").click(function() {
      $("#button1").hide();
    });
  });
};


代码应该是：

   $(document).ready(function() {
     $("#button1").click(function() {
       $("#button1").hide();
     });
   });

或者更简短地说：

   $(function() {
     $("#button1").click(function() {
       $("#button1").hide();
     });
   });

现在，您确实在页面的另一个位置有了这段代码，但嵌套函数永远不会运行。另外，确保按钮隐藏代码位于为按钮创建HTML的第一行之后

您的每个setAttribute调用都是错误的。你有：

document.getElementById("quarter1").setAttribute("style", "background: color;");


setAttribute的第二个参数应该是正在设置的属性的值。例如：

 setAttribute("style", "background-color:yellow");

但是，您正在将
style
属性的值设置为：

 background:color;

这是不正确的

您正在使用jQuery，因此在所有使您的工作更轻松的地方都可以使用它。而不是重复：

 document.getElementById
 and setAttribute


只需使用：

 $("#ElementId").css("background-color", "SomeColor");

当然，正如其他人所说，除非从代码中引用库，否则不能使用jQuery，因此请确保：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



在网页的
标题
部分

我已经清理了你的代码，现在按钮的消失动作正常工作了。请参阅：
您是否真的包括jQuery？您刚刚完全更改了使我的答案无效的代码。该演示有效，因此我认为@divy3933在编辑答案时包含了您的答案。这与@SacWebDeveloper的答案相同。但是（…）上的$（“#按钮1”）。在创建按钮之前，（…）将不起作用。选择器必须更加通用，如（…）上的$（“按钮”）