我正在自学Javascript(使用Jquery),我只是想在点击功能上进行显示/隐藏。
现在,我正在使用Sublime Text 2,我正试图在本地主机的浏览器中查看它 - 我也是用HTML5 Boilerplate来做这件事。
以下是我的代码。
调用Jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
脚本
<script type="text/javascript">
$(document).ready(function()
{
$('p').hide();
});
</script>
HTML
<a href="#" id="paragraphAnchor">click me</a>
<p>This is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a test</p>
我正在HTML文档中执行所有这些操作。不是最佳实践,但我认为我从小做起。
现在我这样做了,文字甚至都没有隐藏。
为什么会这样?
更新:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="css/style.css">
<!-- end CSS-->
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('p').hide();
$(a#paragraphAnchor).click(function()
{
$('p').show();
});
});
</script>
</head>
<body>
<a href="#" id="paragraphAnchor">click me</a>
<p>This is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a test</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts-->
<script> // Change UA-XXXXX-X to be your site's ID
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>
更新:已解决的问题
看来HTML 5 Boilerplate应该用
调用JavaScript<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
而不是:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
或者至少我是这样做的。
答案 0 :(得分:1)
jQuery URL缺少协议。这一行:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
应该阅读
<强> HTTP:强> // ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
编辑:这是因为文件是在本地加载的,因此假定的协议file
无法通过HTTP(S)加载任何jquery库。< / p>
这可以通过检查控制台来确认。 Chrome报告:
Failed to load resource file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
答案 1 :(得分:1)
试试这个:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="css/style.css">
<!-- end CSS-->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src="js/libs/modernizr-2.0.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').hide();
$('#paragraphAnchor').click(function() {
$('p').show();
});
});
</script>
</head>
jQuery未加载到您的页面中,请注意您应该为选择器使用引号。
答案 2 :(得分:0)
这是您在$(document).ready
功能
$('#paragraphAnchor').click(function() {
$('p').toggle();
});
答案 3 :(得分:0)
检查此代码是否正常
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script>
$(document).ready(function()
{
$("p").hide();
$("a").click(function () {
$("p").slideToggle("slow");
});
});
</script>
</head>
<body>
<a href="#" id="paragraphAnchor">click me</a>
<p>This is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a testThis is a test</p>
</body>
</html>
答案 4 :(得分:0)
在加载之前,您似乎正在调用jquery代码。
添加:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
之前:
<script type="text/javascript">
$(document).ready(function()
{
$('p').hide();
$('a#paragraphAnchor').click(function()
{
$('p').show();
});
});
</script>
例如:
<head>
...
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script type="text/javascript">
$(document).ready(function()
{
$('p').hide();
$('a#paragraphAnchor').click(function()
{
$('p').show();
});
});
</script>
</head>
...