javascript - Jquery - 无法在网页上显示 slider - 已编辑?

标签 javascript jquery

我对网络开发非常陌生。我正在尝试使用 jquery 在网页上显示 slider 。但是,我无法在网页上看到银条。我尝试通过调试代码。 Firebug 。但是,我在那里没有看到任何错误。有人可以告诉我我可能缺少什么吗?

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

index.html

<!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>

这是 jqueryTutorial.js 文件。

(function() {

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

})();

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

enter image description here

<小时/>

最后,我从源代码中执行了以下操作 - jquery 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>

现在,我在 firebug 上看到以下错误。

ReferenceError: $ is not defined


$(function() {


index.html (line 11, col 2)

最佳答案

试试这个:

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>

关于javascript - Jquery - 无法在网页上显示 slider - 已编辑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30799402/

相关文章:

javascript - 在 AngularJS 中使用 $broadcast 和 Service 将数据传递给指令

c# - 使用 js/jQuery 显示 'saving...' 消息,然后重定向到页面

javascript - 如何使用 Cropper 通过 javascript 检索 toDataURL 字符串 by fengyuanchen

javascript - Lightbox 杀死 javascript 表单选项

javascript - JQuery 使图像元素在可点击的 div 中不活动

Javascript 单击每个输入从中获取值

jQuery:将 Div 内容加载到另一个 div 中?

javascript - jScrollPane 鼠标中键点击不起作用

javascript - 为什么我无法替换 AJAX 成功响应中的 HTML 内容?

javascript - 可拖动元素被放到哪里了?