jQuery事件函数位置放置的两种方法

jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中:

实例

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("p").hide();
 8   });
 9 });
10 </script>
11 </head>
12 
13 <body>
14 <h2>This is a heading</h2>
15 <p>This is a paragraph.</p>
16 <p>This is another paragraph.</p>
17 <button>Click me</button>
18 </body>
19 
20 </html>

在上面的例子中,当按钮的点击事件被触发时会调用一个函数:

$("button").click(function() {..some code... } )

该方法隐藏所有 <p> 元素:

$("p").hide();

单独文件中的函数

如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):

实例

1 <head>
2 <script type="text/javascript" src="jquery.js"></script>
3 <script type="text/javascript" src="my_jquery_functions.js"></script>
4 </head>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。