Question

我对网络开发很陌生。我正在尝试使用jquery在网页上显示滑块。但是，我无法在网页上看到银色。我尝试通过调试代码。萤火虫。但是，我没有看到任何错误。有人可以告诉我可能缺少的东西吗？

我正在使用Linux - Fedora core 16和Firefox-38.0.5来运行此代码

的index.html

NSURL *myURL = [NSURL URLWithString:@"http://developer.b24solutions.com/grocery/api/rest/giveyourfilenamewithextension"];

这是jqueryTutorial.js文件。

<!DOCTYPE html>
<html>
   <script src=  "jquery-2.1.4.min.js"> </script>
   <script src=  "js/jquery-ui.js">   </script>
   <script src=  "js/jqueryTutorial.js">   </script>

 <title> "My Page"</title>  

 <head> "Hello Jquery"</head>

<body>

<div id="slider"> </div>

</body>   

</html>

firebug控制台中没有错误。这是屏幕截图。

enter image description here

最后，我从source-jquery滑块

执行了以下操作

(function() {

  $("#slider").slider();

})();

现在，我在萤火虫上看到以下错误。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#slider" ).slider();
  });
  </script>
</head>
<body>

<div id="slider"></div>


</body>
</html>

Answer 1

试试这个：

jQuery(document).ready(function () {
(function() {

  $("#slider").slider();

})();
});

<强>编辑：

好的，问题来自标签。

你写了这个：

<!DOCTYPE html>
<html>
   <script src=  "jquery-2.1.4.min.js"> </script>
   <script src=  "js/jquery-ui.js">   </script>
   <script src=  "js/jqueryTutorial.js">   </script>

 <title> "My Page"</title>  

 <head> "Hello Jquery"</head>

<body>

<div id="slider"> </div>

</body>   

</html>

你必须写下这个：

<!DOCTYPE html>
<html>
 <head>
   <script src=  "jquery-2.1.4.min.js"> </script>
   <script src=  "js/jquery-ui.js">   </script>
   <script src=  "js/jqueryTutorial.js">   </script>

 <title> "My Page"</title>  


</head>
<body>

<div id="slider"> </div>

</body>   

</html>

- ）

再次编辑

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  jQuery(function() {
    $( "#slider" ).slider();
  });
  </script>
</head>
<body>

<div id="slider"></div>


</body>
</html>

Answer 2

在关闭正文标记<script>之前添加</body>标记。此外，您的标记中也存在一些错误，例如<title>应位于<head>标记内（标题使用<h1>至<h7>标记）。像这样：

<!DOCTYPE html>
<html>  
<head>
 <title>"My Page"</title>
</head>

<body>
 <h1>hello jQuery</h1>
 <div id="slider"></div>

<!-- load scripts -->

 <script src="jquery-2.1.4.min.js">
 </script>
 <script src="js/jquery-ui.js">
 </script>
 <script src="js/jqueryTutorial.js">
 </script>

  </body>   

 </html>

你的javascript就是：

$('#slider').slider();

如果不起作用，请尝试：

$(document).ready( function () {
 $('#slider').slider();
}

因为如果你在开头包含它们，整个HTML文档将不会在脚本执行时完全加载，因此脚本将无法找到元素。

我认为.slider()不会给你你想要的东西。我建议你先学习更多。试试www.codecademy.com

Jquery - 无法在网页上显示滑块 - 已编辑？

2 个答案: