Javascript $（document）.ready在我将jquery库放在正文之前时不起作用_Javascript_Jquery_Optimization

Javascript $（document）.ready在我将jquery库放在正文之前时不起作用

javascript jquery optimization

Javascript $（document）.ready在我将jquery库放在正文之前时不起作用,javascript,jquery,optimization,Javascript,Jquery,Optimization,它正在工作 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").slideT

它正在工作

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>

</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“p”）.slideToggle（）；
});
});
这是一段
在p元素的向上滑动和向下滑动之间切换

但是当我搬家的时候

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

在

标记之前，它不起作用，因为我想将JavaScript放在底部，但我不能将document.ready部分放在jquery库之后，解决方案是什么。

一：您的代码必须放在jquery库之后
第二：如果将代码移动到页面底部，则不需要
$（document）.ready（…
）

<!DOCTYPE html> <html> <head> </head> <body> <p>This is a paragraph.</p> <button>Toggle between slide up and slide down for a p element</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $("button").click(function(){ $("p").slideToggle(); }); </script> </body> </html>

这是一段在p元素的向上滑动和向下滑动之间切换 $（“按钮”）。单击（函数（）{ $（“p”）.slideToggle（）； });
如果您绝对必须在jquery库上方具有特定于页面的代码，则可能需要一个队列系统，以便在jquery可用时处理队列

<!DOCTYPE html> <html> <head>  <script> window.initQueue = []; </script>  <script> window.initQueue.push(function(){ $("button").click(function() { $("p").slideToggle(); }); }) </script> </head> <body> <p>This is a paragraph.</p> <button>Toggle between slide up and slide down for a p element</button>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $.each(window.initQueue,function(i,fn){ fn(); }) </script> </body> </html>

window.initQueue=[]； window.initQueue.push（函数（）{ $（“按钮”）。单击（函数（）{ $（“p”）.slideToggle（）； }); }) 这是一段在p元素的向上滑动和向下滑动之间切换 $.each（window.initQueue，函数（i，fn）{ fn（）； })
window.onload=函数（）{ $（“按钮”）。单击（函数（）{ $（“p”）.slideToggle（）； }); }
无论代码在哪里，只要它位于jquery库之后，就应该可以工作。@Kierchon：我想把JavaScript放在底部，但document.ready部分来自cmsI。我的问题是，为什么要放在底部？在CMS系统中，通常最好把它放在顶部，除非你构建了d到你的CMS中一种方法是让它包含底部的所有脚本，而不仅仅是库。然后我想是时候把它构建到你的CMS中，或者向你的老板解释这样做的利弊了。为什么OP不能使用
窗口。onload
而不是
文档。准备好了吗如果OP想把脚本放在任何地方..尽管它不是必需的因为它是在元素之后出现的。他当然可以。我不知道你为什么会问这个。我问这个是因为你的#1真的，总是有“另一种方式”，即使它很糟糕。我的意思是，它没有那么糟糕，但如果应用程序的资产很重，它实际上可能会对应用程序的性能产生负面影响。@ParnitaDas当然，请确保您的脚本是外部的，并使用“延迟”属性。请注意，它并不适用于所有浏览器。@ParnitaDas我指的是您的评论，而不是这个答案。这是swer可以在所有浏览器中工作，只是在执行javascript之前，它必须等待加载所有资产（所有图像、css表单、css引用的图像等）。 <script> window.onload = function() { $("button").click(function() { $("p").slideToggle(); }); } </script>