1-3 jQueryHelloWorld体验
本节编程练习不计算学习进度,请电脑登录imooc.com操作

jQueryHelloWorld体验

当页面加载完成后,在页面中以居中的方式显示“您好!通过慕课网学习 jQuery 才是最佳的途径”字样。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>第一个简单的jQuery程序</title>
    <style type="text/css">
        div{
            padding:8px 0px;
            font-size:12px;
            text-align:center;
            border:1px solid #888;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                    $("div").html("您好!通过慕课网学习jQuery才是最佳的途径。");
            });
    </script>
</head>
<body>
    <div></div>
</body>
</html>


代码分析:
$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。

任务

在第18行代码中填写

$("div").html("您好!通过慕课网学习jQuery才是最佳的途径。");
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>第一个简单的jQuery程序</title>
  6. <style type="text/css">
  7. div{
  8. padding:8px 0px;
  9. font-size:12px;
  10. text-align:center;
  11. border:solid 1px #888;
  12. }
  13. </style>
  14. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  15. <script type="text/javascript">
  16. $(document).ready(function() {
  17. });
  18. </script>
  19. </head>
  20. <body>
  21. <div></div>
  22. </body>
  23. </html>
下一节