Jquery 隐藏P标记不工作_Jquery_Html

Jquery 隐藏P标记不工作

jquery html

Jquery 隐藏P标记不工作,jquery,html,Jquery,Html,我在自学Javascript（使用Jquery），我只是想做一个点击显示/隐藏功能现在，我正在使用Sublime Text 2，并试图通过本地主机在浏览器中查看它——我也在使用HTML5样板文件下面是我的代码调用Jquery <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 剧本 <script type="text/javascript

我在自学Javascript（使用Jquery），我只是想做一个点击显示/隐藏功能

现在，我正在使用Sublime Text 2，并试图通过本地主机在浏览器中查看它——我也在使用HTML5样板文件

下面是我的代码

调用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>


$（文档）.ready（函数（）
{
$（'p'）.hide（）；
});

HTML


这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试

我在我的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>


$（文档）.ready（函数（）
{
$（'p'）.hide（）；
$（a#段落锚定）。单击（函数（）
{
$（'p'）.show（）；
});
});
这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试
window.jQuery | | document.write（“”）
//将UA-XXXXX-X更改为您站点的ID
窗口。\ u gaq=[[''u setAccount'，'UAXXXXXXXXX1'，[''u trackPageview']，[''u trackPageLoadTime']；
现代化负荷({
加载：（'https:'==location.protocol？'//ssl':'//www'）+'.google analytics.com/ga.js'
});

更新：问题已解决

HTML5样板文件似乎应该使用

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

或者至少我是这样工作的

这是您在

$（文档）中需要的。ready

函数

$('#paragraphAnchor').click(function() {
  $('p').toggle();
});

jQuery URL缺少协议。这一行：

应该读

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

EDIT:这是因为文件正在本地加载，因此假定的协议

文件

将无法通过HTTP加载任何jquery库

这可以通过检查控制台来确认。Chrome报告：

Failed to load resource file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

检查这个代码，工作正常

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


$（文档）.ready（函数（）
{
$（“p”）.hide（）；
$（“a”）。单击（函数（）{
$（“p”）。滑动切换（“慢速”）；
});
});
这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试

您似乎在加载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>


window.jQuery | | document.write（“”）

在此之前：

<script type="text/javascript">
    $(document).ready(function()
{
  $('p').hide();
  $('a#paragraphAnchor').click(function()
  {
    $('p').show();
  });
});

  </script>


$（文档）.ready（函数（）
{
$（'p'）.hide（）；
$（'a#paragraphAnchor'）。单击（函数（）
{
$（'p'）.show（）；
});
});

例如：

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


...
window.jQuery | | document.write（“”）
$（文档）.ready（函数（）
{
$（'p'）.hide（）；
$（'a#paragraphAnchor'）。单击（函数（）
{
$（'p'）.show（）；
});
});
...

试试这个：

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


$（文档）.ready（函数（）{
$（'p'）.hide（）；
$（“#段落锚定”）。单击（函数（）{
$（'p'）.show（）；
});
});

jQuery没有加载到您的页面中，请注意，您应该为选择器使用引号。

这是对op的意图进行假设，而不是回答问题

toggle（）

不同于

hide（）

“匹配的元素将立即显示或隐藏”->公平点！虽然如果要隐藏初始状态，那么更改标记将suffice@JamesKyburz：没有区别，http://和just//它们的执行方式相同。转到这里：jsfiddle.net/PypBz（不包括jquery，仅通过脚本），根据需要添加或删除http://结果相同。无论哪种方式，p标记都会使用OPs原始代码成功删除。我认为

未定义的可能是关于这个问题的评论中的某些东西。那么，Mmm@Michael一定是一个很好的东西，因为它在textmate中工作，没有http://，你生活和学习为什么投了反对票（我投了一个反对票）-这是正确的。@martinburch这就是我现在已经拥有的。在我的问题中？不，你有//应该是哪一个http://My 抱歉-我真的不知道“忽略协议”的事情，但我找到了解释-当然这里是SA：所以-不，实际上这不是正确的答案；-）您应该向p标记添加id或类，否则$（'p'）.hide（）；将隐藏页面中的所有p标记。HTML5样板文件加载jQuery库本身，我认为您加载了2个jQuery库。@kiranvj我现在只测试一个。这是我唯一的P标签。但是谢谢。您是否在源代码为jquery lib的脚本标记之前或之后有脚本块（带有.ready函数）？$（a#paragraphAnchor）
=未捕获的语法错误：意外标记非法
，该语句应该使用引号，正如回答中指出的那样：$（'a#paragraphAnchor'））。Chrome是否允许用户在本地主机上查看Jq？这句话不是；检查编辑现在，它的工作，工作！但是我的代码有什么问题吗？导入JQuery库+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>