Ruby web开发实战(4)-JQuery(1)

发布时间 2023-06-27 09:45:51作者: 水泊waterPerl

下载并安装



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello,world</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
   alert( "你好,世界" );
</script>
</body>
</html>

Document Ready

在文档准备好被操作后立即运行代码,jQuery有一个称为就绪事件的语句:

$( document ).ready(function() {
 
    // Your code here.
 
});

image

.ready()方法提供了一种在页面的文档对象模型(DOM)变得可以安全操作时立即运行JavaScript代码的方法。这通常是在用户查看页面或与页面交互之前执行所需任务的好时机,例如添加事件处理程序和初始化插件。当通过对该方法的连续调用添加多个函数时,它们将在DOM按添加顺序准备就绪时运行。从jQuery 3.0开始,jQuery确保在一个处理程序中发生的异常不会阻止随后添加的处理程序执行。

大多数浏览器都以DOMContentLoaded事件的形式提供类似的功能。然而,jQuery的.ready()方法在一个重要而有用的方面有所不同:如果DOM准备就绪,并且浏览器在代码调用.ready之前启动DOMContentLoaded,则函数处理程序仍将执行。相反,在事件触发后添加的DOMContentLoaded事件侦听器永远不会执行。

jQuery提供了几种方法来附加将在DOM准备就绪时运行的函数。以下所有语法都是等效的:

    $( handler )
    $( document ).ready( handler )
    $( "document" ).ready( handler )
    $( "img" ).ready( handler )
    $().ready( handler )

从jQuery 3.0开始,只推荐使用第一种语法;其他语法仍然有效,但已被弃用。
.ready()方法通常与匿名函数一起使用:

$( document ).ready(function() {
  // Handler for .ready() called.
});

相当于推荐的调用方式:

$(function() {
  // Handler for .ready() called.
});

上面的可以进一步简化为



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello,world</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

    alert("愿望成真。");

});
</script>
</body>
</html>