无错误JQuery/Javascript在Firefox4或Chrome中不起作用_Javascript_Jquery

无错误JQuery/Javascript在Firefox4或Chrome中不起作用

javascript jquery

无错误JQuery/Javascript在Firefox4或Chrome中不起作用,javascript,jquery,Javascript,Jquery,代码： <title>jQuery Example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> window.onload = function() { $('#one').click(function() {

代码：

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

页面看起来应该是这样的，标题、5个段落和按钮都出现了。每个按钮都应该对特定的元素样式进行小的修改

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

当前，单击任何按钮都不会发生任何操作

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

基于在chrome的javascript控制台或firebug中没有发现错误，我只是声称上面的代码是无错误的。再说一次，我对这一切都不熟悉，所以我不知道我是否正确使用了它们

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

任何帮助都将不胜感激。

如果您要使用jQuery，请绑定并单击类似的事件

$('#oneButton').click(boldTheText);

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

或

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

参考

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

您实际上没有在这里利用jQuery的潜力。。。我不太清楚为什么你的代码不起作用，但是我不想特别研究它，我会给你一些关于如何改进它的提示。最有可能的情况是，它将在流程中开始工作=）

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

首先，您不再需要

document.getElementById（）

。jQuery的选择器功能更强大，要选择带有

id=“oneButton”

的按钮，只需使用

$（“#oneButton”）

。它们中的大多数看起来和工作起来都像css选择器，所以您已经知道它们了

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

其次，您不必使用名称定义所有方法来连接它们，而是使用匿名函数（并使用jQuery的

单击或live
来连接它们）：
<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

因此，前两个按钮可以连接起来，只需使用以下几行代码即可完成完全相同的操作：
$('#oneButton').click(function() { 
    $('div.firstDiv').css('font-weight', 'bold'); 
});
$('#twoButton').click(function() { 
    alert('There are ' + $('p').size() + ' paragraphs.'); 
});

<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

编辑：正如Mark Bridges在对另一个答案的评论中所指出的那样，将onClick
更改为onClick
（小写c
）可以解决您眼前的问题。不过，我不会对此感到满意，因为您可以使用jQuery。
为了更好地利用jQuery的语法，我在这里简化了您的代码：
<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>



<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

jQuery示例
window.onload=函数（）{
$（'#一'）。单击（函数（）{
$（'#first'）.css（'font-weight'，'bold'）；
});
};
我应该用粗体字
<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

大胆的

最重要的是：
<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

使用$（'#foo'）
而不是document.getElementById（'foo'）
返回具有更丰富交互语义的jQuery对象
在jquery对象上使用.click（）
方法定义单击处理程序
在jquery对象上使用.css（）
方法进行样式更改
将事件处理程序添加到按钮时，您正在分配给onClick
。改为单击onclick
——注意小写字母“C”
<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>

控制台中没有错误，因为将某些内容分配给对象的onClick
属性是完全有效的；浏览器永远不会使用它。
FireBug和Chrome控制台都不是神奇的或无所不知的。如果页面不工作，那么显然它不是无错误的：-）另外，jsfiddle.net是一种功能更强大的方式来处理这样的测试/审判案例。你试过这个吗？编辑：刚刚在JSFIDLE中测试过；很有效，谢谢你的反馈。是的，我把所有“C”的大小写都改成了“C”，现在可以用了。所有的JQuery示例都非常棒，我将尝试重写我的代码以利用您的所有建议。不要忘记对帮助您的答案进行投票，并将最好的答案标记为“答案”（通过单击分数下方的小复选标记）=），如果您想用DOM元素的onclick成员绑定事件，那么click中的“c”应该是小写。
<title>jQuery Example</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#one').click(function() {
      $('#first').css('font-weight', 'bold');
    });
  };
</script>

</head>

<body>
  <div class="firstDiv">
    <p id="first">I should be bold.</p>
  </div>

  <button type="button" id="one">Bold</button>
</body>
</html>