Javascript 未捕获引用错误：未定义JQuery
我正在学习如何从一本名为《单页Web应用程序》的书中创建单页应用程序。我尝试过提供的代码只是为了构建我的第一个简单SPA，但是当我启动它时，滑块不起作用，并且在浏览器中使用开发人员工具会显示消息“UncaughtReferenceError:JQuery未定义”。为什么会发生错误？以下是书中所写的代码。问题出在我有箭头指向的底部Javascript 未捕获引用错误：未定义JQuery,javascript,jquery,single-page-application,Javascript,Jquery,Single Page Application,我正在学习如何从一本名为《单页Web应用程序》的书中创建单页应用程序。我尝试过提供的代码只是为了构建我的第一个简单SPA，但是当我启动它时，滑块不起作用，并且在浏览器中使用开发人员工具会显示消息“UncaughtReferenceError:JQuery未定义”。为什么会发生错误？以下是书中所写的代码。问题出在我有箭头指向的底部 <!doctype html> <html> <head> <meta charset="UTF-8"> <
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SPA Chapter 1 section 1.2.2</title>
<style type="text/css">
body {
width : 100%;
height : 100%;
overflow : hidden;
background-color : #777;
}
#spa {
position : absolute;
top : 8px;
left : 8px;
bottom : 8px;
right : 8px;
border-radius : 8px 8px 0 8px;
background-color : #fff;
}
.spa-slider {
position : absolute;
bottom : 0;
right : 2px;
width : 300px;
height : 16px;
cursor : pointer;
border-radius : 8px 0 0 0;
background-color : #F00;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var $ = jQuery
/*jslint browser : true, continue : true,
devel : true, indent : 2, maxerr : 50,
newcap : true, nomen : true, plusplus : true,
regexp : true, sloppy : true, vars : true,
white : true
*/
/*global jQuery */
// Module /spa/
// Provides chat slider capability
//
var spa = (function ( $ ) {
// Module scope variables
var
// Set constants
configMap = {
extended_height : 434,
extended_title : 'Click to retract',
retracted_height : 16,
retracted_title : 'Click to extend',
template_html : '<div class ="spa-slider"><\/div>'
},
// Declare all other module scope variables
$chatSlider,
toggleSlider, onClickSlider, initModule;
// DOM method /toggleSlider/
// alternates slider height
//
toggleSlider = function () {
var
slider_height = $chatSlider.height();
// extend slider if fully retracted
if ( slider_height === configMap.retracted_height ) {
$chatSlider
.animate({ height : configMap.extended_height })
.attr( 'title', configMap.extended_title );
return true;
}
// retract slider if fully extended
else if ( slider_height === configMap.extended_height ) {
$chatSlider
.animate({ height : configMap.retracted_height })
.attr( 'title', configMap.retracted_title );
return true;
}
// do not take action if slider is in transition
return false;
};
// Event handler /onClickSlider/
// receives click event and calls toggleSlider
//
onClickSlider = function ( event ) {
toggleSlider();
return false;
};
// Public method /initModule/
// sets initial state and provides feature
//
initModule = function ( $container ) {
// render HTML
$container.html( configMap.template_html );
$chatSlider = $container.find( '.spa-slider' );
// initialize slider height and title
// bind the user click event to the event handler
$chatSlider
.attr( 'title', configMap.retracted_title )
.click( onClickSlider );
return true;
};
return { initModule : initModule }; // <<<<<<<-------
}( JQuery )); // <<<<<<<--------
// Start SPA once DOM is ready
//
jQuery(document).ready(
function () { spa.initModule( jQuery('#spa') ); }
);
</script>
</head>
<body>
<div id="spa">
<div class="spa-slider"></div>
</div>
</body>
</html>
SPA第1章第1.2.2节
身体{
宽度：100%；
身高：100%；
溢出：隐藏；
背景色：#777；
}
#温泉{
位置：绝对位置；
顶部：8px；
左：8px；
底部：8px；
右：8px；
边界半径：8px 8px 0 8px；
背景色：#fff；
}
.spa滑杆{
位置：绝对位置；
底部：0；
右：2px；
宽度：300px；
高度：16px；
光标：指针；
边界半径：8px0；
背景色：#F00；
}
var$=jQuery
/*jslint浏览器：true，continue:true，
德维尔：对，缩进：2，最大错误：50，
newcap:true，nomen:true，plusplus:true，
regexp:true，sloppy:true，vars:true，
怀特：是的
*/
/*全局jQuery*/
//模块/水疗/
//提供聊天滑块功能
//
var spa=（函数（$）{
//模块作用域变量
变量
//设置常数
配置映射={
延伸高度：434，
扩展标题：“单击以收回”，
缩回高度：16，
收回标题：“单击以扩展”，
模板\u html:'
},
//声明所有其他模块作用域变量
$chatSlider，
toggleSlider、onClickSlider、initModule；
//DOM方法/切换滑块/
//交替滑块高度
//
toggleSlider=函数（）{
变量
slider_height=$chatsslider.height（）；
//如果完全缩回，则伸展滑块
如果（滑块高度===configMap.retracted高度）{
$chatSlider
.animate（{height:configMap.extended_height}）
.attr（'title'，configMap.extended_title）；
返回true；
}
//如果滑块完全伸出，则缩回滑块
else if（滑块高度===configMap.extended高度）{
$chatSlider
.animate（{height:configMap.retracted_height}）
.attr（'title'，configMap.retracted_title）；
返回true；
}
//如果滑块处于过渡状态，则不执行操作
返回false；
};
//事件处理程序/onClickSlider/
//接收click事件并调用toggleSlider
//
onClickSlider=函数（事件）{
切换滑块（）；
返回false；
};
//公共方法/初始化模块/
//设置初始状态并提供功能
//
initModule=函数（$container）{
//呈现HTML
$container.html（configMap.template\u html）；
$chatsslider=$container.find（'.spa slider'）；
//初始化滑块高度和标题
//将用户单击事件绑定到事件处理程序
$chatSlider
.attr（'title'，configMap.retracted_title）
。单击（单击滑块）；
返回true；
};
返回{initModule:initModule}；//JavaScript区分大小写。在用箭头标记的第二行，将JQuery
更改为JQuery
（小写j
）：
}（jQuery）） 看起来您使用的Jquery脚本源代码可能已经过时。试试这个：
'<script src="http://code.jquery.com/jquery-latest.min.js"></script>'
“”
Google CDN是否过时？你可以很容易地找到。他们在jQuery版本1.11中还没有jQuery？当我把它复制到网站上时，这一定是一个打字错误，因为我的ide上不是这样的。但是谢谢，我很抱歉，这是你提到的，我试过了，效果很好。谢谢，我已经连续两天痴迷了，谢谢。
'<script src="http://code.jquery.com/jquery-latest.min.js"></script>'