如何测试jquery是否正确加载？
问题描述：
我有一个包含一个和li标签的jQuery/CSS旋转木马。一切似乎都正确地显示在HTML和样式方面，但它似乎像jQuery不加载B/C没有功能的旋转木马。我试过在Firebug中查看脚本选项卡，并且只能从我打电话的谷歌库中看到列出的未定义的断点jquery js library v1.6.2。我是一位设计师，想要了解更多的开发，所以任何帮助表示赞赏！谢谢，如何测试jquery是否正确加载？
这里是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hiLounge</title>
<link href="/css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/touchcarousel.css" rel="stylesheet" type="text/css" />
<link href="css/black-and-white-skin.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.touchcarousel-1.2.min.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/League_Gothic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace ('h1', 'h2', 'ul#nav li');
</script>
<script>
jQuery(function($) {
$("#carousel").touchcarousel({
itemsPerMove: 4,
pagingNav: true, // Enable paging nav. Overrides snapToItems.
// Snap to first item of every group, based on itemsPerMove.
pagingNavControls: true, // Paging controls (bullets).
autoplay:true, // Autoplay enabled.
autoplayDelay:3000, // Delay between transitions.
autoplayStopAtAction:true, // Stop autoplay forever when user clicks arrow or does any other action.
scrollbar: true, // Scrollbar enabled.
scrollbarAutoHide: false, // Scrollbar autohide.
scrollbarTheme: "light", // Scrollbar color. Can be "light" or "dark".
transitionSpeed: 600, // Carousel transition speed (next/prev arrows, slideshow).
directionNav:true, // Direction (arrow) navigation (true or false).
directionNavAutoHide:false, // Direction (arrow) navigation auto hide on hover.
// On touch devices arrows are always displayed.
loopItems: false, // Loop items (don't disable arrows on last slide and allow autoplay to loop).
keyboardNav: false, // Keyboard arrows navigation.
dragUsingMouse:true, // Enable drag using mouse.
scrollToLast: true, // Last item ends at start of carousel wrapper.
itemFallbackWidth: 500, // Default width of the item in pixels. (used if impossible to get item width).
baseMouseFriction: 0.0012, // Container friction on desktop (higher friction - slower speed).
baseTouchFriction: 0.0008, // Container friction on mobile.
lockAxis: true, // Allow dragging only on one direction.
useWebkit3d: false, // Enable WebKit 3d transform on desktop devices.
// (on touch devices this option is turned on).
// Use it if you have only images, 3d transform makes text blurry.
onAnimStart: null, // Callback, triggers before deceleration or transition animation.
onAnimComplete: null, // Callback, triggers after deceleration or transition animation.
onDragStart:null, // Callback, triggers on drag start.
onDragRelease: null // Callback, triggers on drag complete.
});
});
</script>
<style rel="stylesheet" type="text/css">
body {
background: #ffffff;
text-align: center;
font-family: helvetica, arial, sans-serif;
line-height: 25px;
margin-top: 0px;
}
h1 {
font-size: 34px;
line-height: 24px;
color: #007a3d;
}
a:link {
color: #007a3d;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #007a3d;
}
#container {
width: 960px;
margin: auto;
text-align: center;
}
#container #godbar {
width: 960px;
height: 32px;
margin: auto;
position: fixed;
background: url(images/godbar_bg.jpg) repeat-x;
border-left: 1px solid #dbc25e;
border-bottom: 1px solid #dbc25e;
border-right: 1px solid #dbc25e;
}
#container #godbar #godbarIcons {
width: 100%;
height: 32px;
float: right;
text-align: right;
margin-top: 5px;
margin-right: 5px;
}
#container #godbar #godbarIcons ul {
display: inline;
}
#container #godbar #godbarIcons li {
display: inline;
padding-right:13px;
}
#container #header {
width: 960px;
height: 150px;
margin-bottom: 0;
padding-bottom: 0;
}
#container #logo {
width: 233px;
height: 94px;
margin: 0;
padding: 0;
padding-top: 35px;
}
#container #header #logo h1{
width: 233px;
height: 94px;
clear: both;
display: block;
margin: 0 0 0 15px;
background: url(images/logo.jpg) no-repeat;
text-indent: -9999px;
}
#container #header #logo h1 a {
display: block;
width: 233px;
height: 94px;
}
#container ul#nav {
width: 100%;
height: 44px;
text-align: center;
margin: 0 auto;
padding: 0;
background: url(images/navigation_bg.jpg) repeat-x;
list-style: none;
display: block;
}
#container ul#nav a:hover {
text-decoration: none;
}
#container ul#nav li {
margin-top: 5px;
display: inline-block;
float: left;
text-align: center;
padding-top: 5px;
padding-right: 0;
padding-left: 15px;
text-transform: uppercase;
}
#container ul#nav a {
color: #FFF;
}
#container carousel {
position: relative;
width: 100%;
margin: 0 auto;
}
#container #carousel li {
display: inline;
list-style: none;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<!--GODBAR-->
<div id="godbar">
<div id="godbarIcons">
<ul>
<li id="godbarFacebook"><a href="http://www.facebook.com/hilounge" target="_blank"><img src="images/godbar_fb.png" alt="hilounge on Facebook" /></a>
</li>
<li id="godbarTwitter"><a href="http://www.twitter.com/hilounge" target="_blank"><img src="images/godbar_twitter.png" alt="hilounge on Twitter"/></a>
</li>
<li id="godbarInstagram"><a href="http://www.instagram.com/hilounge" target="_blank"><img src="images/godbar_instagram.png" alt="hilounge on Instagram" /></a>
</li>
<li id="godbarPinterest"><a href="http://www.pinterest.com/hilounge" target="_blank"><img src="images/godbar_pinterest.png" alt="hilounge on Pinterest" /></a>
</li>
<li id="godbarGplus"><a href="https://plus.google.com/b/108830451064104477365/108830451064104477365/posts" target="_blank"><img src="images/godbar_gplus.png" alt="hilounge on Goolge plus" /></a>
</li>
<li id="godbarRss"><a href="http://feeds.feedburner.com/hilounge" target="_blank"><img src="images/godbar_rss.png" alt="hilounge RSS feed" /></a>
</li>
<li id="godbarEmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=hilounge&loc=en_US" target="_blank"><img src="images/godbar_email.png" alt="hilounge email" /></a>
</li>
</ul>
</div>
<!--END GODBARICONS-->
</div>
<!--END GODBAR-->
<!--BEGIN HEADER-->
<div id="header">
<!--BEGIN LOGO-->
<div id="logo">
<h1><a href="index.html">hiLounge</a></h1>
</div>
<!--END LOGO-->
<!--BEGIN NAVIGATION-->
<ul id="nav">
<h2 class="nav"><li><a href="#"> News </a></li>
<li><a href="#"> Entertainment </a></li>
<li><a href="#"> Fashion </a></li>
<li><a href="#"> Munchies </a></li>
<li><a href="#"> Design </a></li>
<li><a href="#"> Reviews </a></li>
<li><a href="#"> Contests </a></li>
</h2>
</ul>
<!--END NAVIGATION-->
</div>
<!--END HEADER-->
<!--BEGIN CAROUSEL-->
<div id="carousel" class="touchcarousel black-and-white">
<ul class="touchcarousel container">
<!-- TouchCarousel items, place any HTML content inside them (img tag is inserted as an example) -->
<li class="touchcarousel-previous">
<img src="images/previous.jpg" width="20" height="184" />
</li>
<li class="touchcarousel-item">
<a href="#"><img src="images/carousel-image.png" width="184" height="184" /></a>
</li>
<li class="touchcarousel-item">
<a href="#"><img src="images/carousel-image2.png" width="184" height="184" /></a>
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image2.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-next">
<img src="images/next.jpg" width="20" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image2.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-next">
<img src="images/next.jpg" width="20" height="184" />
</li>
</ul>
</div>
<!--END CAROUSEL-->
<!--BEGIN MAIN-->
<div id="primaryContent">
<h1><a href="#"> 10 Best Bongs You Wish You Made</a></h1>
<a href="#"><img src="images/featured-post-featured-image.png" alt="Post Title" /></a>
<!--BEGIN POSTMETADATA-->
<div id="postMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END POSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POSTSHARINGBUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POSTSHARINGBUTTONS-->
<a href="#"><img src="images/read-more.jpg" /> Read More </a>
<!-- BEGIN RECENTPOSTS-->
<h2>Recent Posts</h2>
<div id="recentPosts">
<h1><a href="#">5 MUST FOLLOW MARIJUANA FACEBOOK PAGES</a></h1>
<img src="images/featured-image-1.png" alt="post-title" />
<!--BEGIN RECENTPOSTMETADATA-->
<div id="recentPostMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END RECENTPOSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POST SHARING BUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POST SHARING BUTTONS-->
<h1><a href="#">7 MARIJUANA INFOGRAPHICS YOU DON'T WANT TO MISS</a></h1>
<img src="images/featured-image-1.png" alt="post-title" />
<!--BEGIN RECENTPOSTMETADATA-->
<div id="recentPostMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END RECENTPOSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POST SHARING BUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POSTSHARINGBUTTONS-->
</div>
<!--END RECENTPOSTS-->
</div>
<!--END MAIN-->
</div>
<!--END CONTAINER-->
<div id="footerWrap">
<div id="footer">
<div id="footerLogo">
<a href="index.html"><img src="images/footer-logo.jpg" alt="hiLounge" /></a>
</div> <!--end footerLogo-->
<p>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<a href="#">Legal</a>
<a href="#">Advertising</a>
</p>
<p id="footerInfo">copyright (c) 2013 <a href="http://www.hilounge.com">hiLounge</a>
</p>
</div>
<!--END FOOTER-->
</div>
<!--END FOOTERWRAP-->
</body>
</html>
这里是jQuery的旋转木马添加的CSS：
/******************************************************\
*
* Base TouchCarousel stylesheet
*
* Contents:
*
* 1. Main containers
* 2. Carousel items
* 3. Arrows(direction) navigation
* 4. Paging navigation
* 5. Scrollbar
* 6. Cursors
*
\******************************************************/
/******************************************************\
*
* 1. Main containers (carousel size, background)
*
\******************************************************/
.touchcarousel {
position: relative;
display: block;
width: 100%;
height: 200px;
float: right;
left: 0px;
margin-bottom: 10px;
/* style is removed after carousel is inited, use !important if you want to keep it*/
overflow: hidden;
}
.touchcarousel .touchcarousel-container {
position: relative;
padding: 0;
list-style: none;
margin-top: 5px;
display: inline-block;
float: left;
text-align: center;
padding-top: 5px;
padding-right: 0;
}
.touchcarousel .touchcarousel-wrapper {
position: relative;
overflow:hidden;
width: 100%;
height: 100%;
}
/******************************************************\
*
* 2. Carousel items (item styling, spacing between items)
*
\******************************************************/
.touchcarousel .touchcarousel-item {
/* use margin-right for spacing between items */
margin: 0 1 0 0;
padding: 0;
float: left;
}
.touchcarousel .touchcarousel-previous {
float: left;
}
.touchcarousel .touchcarousel-next {
position: relative;
float: right;
}
/* Last carousel item */
.touchcarousel .touchcarousel-item.last {
margin-right: 0 !important;
}
/******************************************************\
*
* 3. Arrows(direction) navigation
*
\******************************************************/
/* arrow hitstate and icon holder */
.touchcarousel .arrow-holder {
height: 100%;
width: 45px;
position: absolute;
top: 0;
display: block;
cursor: pointer;
z-index: 25;
}
.touchcarousel .arrow-holder.left {
left: 0;
}
.touchcarousel .arrow-holder.right {
right: 0;
}
/* arrow icons */
.touchcarousel .arrow-icon{
width: 45px;
height: 90px;
top:50%;
margin-top:-45px;
position: absolute;
cursor: pointer;
}
.touchcarousel .arrow-icon.left { }
.touchcarousel .arrow-icon.right { }
.touchcarousel .arrow-holder:hover .arrow-icon { }
.touchcarousel .arrow-holder.disabled { cursor: default; }
.touchcarousel .arrow-holder.disabled .arrow-icon { cursor: default; }
/******************************************************\
*
* 4. Paging navigation
*
\******************************************************/
.touchcarousel .tc-paging-container {
width:100%;
overflow:hidden;
position:absolute;
margin-top:-20px;
z-index:25;
}
.touchcarousel .tc-paging-centerer {
float: left;
position: relative;
left: 50%;
}
.touchcarousel .tc-paging-centerer-inside {
float: left;
position: relative;
left: -50%;
}
/* Paging items */
.touchcarousel .tc-paging-item {
float:left;
cursor:pointer;
position:relative;
display:block;
text-indent: -9999px;
}
.touchcarousel .tc-paging-item.current { }
.touchcarousel .tc-paging-item:hover { }
/******************************************************\
*
* 5. Scrollbar
*
\******************************************************/
.touchcarousel .scrollbar-holder {
position: absolute;
z-index: 30;
left: 6px;
right: 6px;
bottom: 5px;
height:4px;
overflow: hidden;
}
.touchcarousel .scrollbar {
position: absolute;
left:0;
height:4px;
bottom: 0px;
}
.touchcarousel .scrollbar.dark {
background-color: rgb(130, 130, 130);
background-color: rgba(0, 0, 0, 0.5);
}
.touchcarousel .scrollbar.light {
background-color: rgb(210, 210, 210);
background-color: rgba(255, 255, 255, 0.5);
}
/******************************************************\
*
* 6. Cursors
*
\******************************************************/
/* IE and Opera use "move", FF uses -moz-grab */
.touchcarousel .grab-cursor{ cursor:url(grab.png) 8 8, move; }
.touchcarousel .grabbing-cursor{ cursor:url(grabbing.png) 8 8, move; }
/* Cursor that used when mouse drag is disabled */
.touchcarousel .auto-cursor{ cursor:auto; }
/* Copyright 2011, Dmitry Semenov, http://dimsemenov.com */
答
第一：
测试链接到jQuery的。您使用的是Goole的CDN，因此您可以直接将该链接弹出到浏览器中。顺便说一句，它工作正常。
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
二：
的Firebug，只需打开控制台，输入不带引号...如果jQuery是加载它会吐出一个版本号 '$（）jQuery的。'否则会吐出一个错误。
三
检查您的ID &类的HTML，CSS & JS。确切的说，你的旋转木马容器上有一些破碎的CSS，这可能会让事情搞得一团糟。我从你的标记中拿到了下面的CSS，你可以看到'#container carousel'应该是'#container＃carousel'。没有这一点，我不认为会有什么动作。
#container carousel {
position: relative;
width: 100%;
margin: 0 auto;
}
+0
我明白了，我想我正尝试在文档的头部初始化传送带的js脚本。当我使用空白索引文件开始工作时，我比较了这些文件，这是主要的区别。谢谢！ – jamesscaggs 2013-04-11 19:10:52
答
要检查的路径是确定的，用它来查看的源代码页面（ctrl-u）在jquery的src中右键单击并查看代码是否存在。我也使用铬开发工具...它告诉你，如果在JavaScript中发生了一些错误，它是一个梦幻般的调试工具。要检查是否jQuery是好的只是做$ .browser，如果回应这一切都OK使用jQuery进口...
+0
我实现了$ .browser警报并且加载正常。 我做了一些更多的挖掘工作，并在Chrome开发者工具中发现了以下错误：http://screencast.com/t/YEzKizvL4QWt – jamesscaggs 2013-04-11 18:23:37
+0
它接近js/jquery.touchcarousel-1.2.min.js没有正确加载...检查文件路径是否正常。 – tbem 2013-04-11 23:15:45
运行像Fiddler这样的流量监视工具，看看脚本请求是否404'。 – asawyer 2013-04-11 18:00:04
仔细检查相关文件的路径，并确保您已包含您的传送带可能需要的任何必需的类/标识。 – vtacreative 2013-04-11 18:00:04
大麻页面，不错。 – 2013-04-11 18:01:19