Javascript 我能'；t使用；jsbin"；本地代码，JQuery_Javascript_Jquery_Html

Javascript 我能'；t使用；jsbin"；本地代码，JQuery

javascript jquery html

Javascript 我能'；t使用；jsbin"；本地代码，JQuery,javascript,jquery,html,Javascript,Jquery,Html,首先，这是代码该代码用于在本地运行DIV时使用一个按钮显示和隐藏DIV，但它不起作用，这是我的html代码 <!DOCTYPE html> <html> <head> <script src="//fb.me/react-with-addons-0.9.0.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"

首先，这是代码

该代码用于在本地运行DIV时使用一个按钮显示和隐藏DIV，但它不起作用，这是我的html代码

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <meta charset=utf-8 />
<title>JS Bin</title>
<style>
#login_Box_Div{
  background:#999;
  display:none;
}
</style>
<script>
$('#buttonLogin').click(function(){
   $('#login_Box_Div').toggle();
});
</script>
</head>
<body>


<h3> <a href= "#">Pictio  </a> <button id="buttonLogin">LogIn</button></h3>

  <div id = "login_Box_Div"> 
        <form name = "myform" > 
            <input type = "text" name = "username" placeholder = "Username"  />
            <input type = "password" name = "password" placeholder= "Password" />
            <input type = "submit" id = "submitLogin" />
        </form>

</div>






  </body>
</html>


JS-Bin
#登录箱分区{
背景：#999；
显示：无；
}
$（“#按钮登录”）。单击（函数（）{
$（'#login_Box_Div'）.toggle（）；
});
登录

浏览器从上到下阅读。当jQuery执行时，浏览器还没有找到元素，所以什么也没有发生。将

标记移动到页面底部（正文结束标记的正前方）。或者，您可以将jQuery代码打包，这样会延迟执行，直到整个页面被读取。

替换此-

<script>
$('#buttonLogin').click(function(){
   $('#login_Box_Div').toggle();
});
</script>


$（“#按钮登录”）。单击（函数（）{
$（'#login_Box_Div'）.toggle（）；
});

因此—

<script>
$(document).ready(function() { // tells jquery that the document is ready to whirl
    $('#buttonLogin').click(function(){
       $('#login_Box_Div').toggle();
    });
});
</script>


$（document）.ready（function（）{//）告诉jquery文档已准备就绪
$（“#按钮登录”）。单击（函数（）{
$（'#login_Box_Div'）.toggle（）；
});
});

代码被放入一个文档就绪处理程序中，该处理程序本质上让jQuery知道所有元素都在文档中。一旦它们出现在文档中，您编写的代码就可以对它们进行操作。如果没有这个处理程序，代码运行时将不考虑元素是否存在，正如您所看到的，这可能会导致一些问题。

您忘记了文档。readyi我很抱歉，我不是JQuery开发人员-\u-对不起，但是您能解释一下区别吗？