JavaScript & DOM 学习笔记（二）

最新推荐文章于 2024-05-21 02:06:32 发布

weixin_33828101

最新推荐文章于 2024-05-21 02:06:32 发布

阅读量47

点赞数

文章标签： javascript python xhtml ViewUI

原文链接：https://my.oschina.net/u/1757476/blog/541012

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. CSS（层叠样式表）、JavaScript 在 html 中的引用

（1）JavaScript 代码必须通过 HTML/XHTML 文档才能执行。有两种方式可以做到这点：

第一种方式：将 JavaScript 代码放到文档 <head> 标签中的 <script> 标签之间：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>shopping list</title>
        <link rel="stylesheet" type="text/css" href="shopping.css">
        <script>
            function getElementsByClassName(node, className) {
                if (node.getElementsByClassName) {
                    return node.getElementsByClassName(className);
                } else {
                    var results = new Array();
                    var elems = node.getElementsByTagName("*");
                    for (var i=0; i < elems.length; i++) {
                        if (elems[i].className.indexOf(className) != -1) {
                            results[results.length] = elems[i];
                        }
                    }
                    return results;
                }
            }
        </script>
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff.</p>
        <h2>So does this headline</h2>
        <ul id="purchase">
            <li>A tin of beans</li>
            <li>Cheese</li>
            <li class="sale important">Milk</li>
        </ul>
    </body>
</html>

第二种方式（better）：将 JavaScript 代码存放在扩展名为 .js 的独立文件（例如：testScript.js）。然后在文档的 <head> 部分用 <script>标签来引用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>shopping list</title>
        <link rel="stylesheet" type="text/css" href="shopping.css">
        <script src="testScript.js"></script>
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff.</p>
        <h2>So does this headline</h2>
        <ul id="purchase">
            <li>A tin of beans</li>
            <li>Cheese</li>
            <li class="sale important">Milk</li>
        </ul>
    </body>
</html>

而最好的做法是把 <script> 标签放到 HTML 文档的最后，</body> 标签之前。这样能使浏览器更快地加载页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>shopping list</title>
        <link rel="stylesheet" type="text/css" href="shopping.css">
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff.</p>
        <h2>So does this headline</h2>
        <ul id="purchase">
            <li>A tin of beans</li>
            <li>Cheese</li>
            <li class="sale important">Milk</li>
        </ul>
        
        <script src="testScript.js"></script>
    </body>
</html>

（2）CSS 的引用如上面代码中，在 <head> 标签中使用 <link> 标签来引用。

<link rel="stylesheet" type="text/css" href="shopping.css">

转载于:https://my.oschina.net/u/1757476/blog/541012

weixin_33828101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript & DOM 学习笔记（二）

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

JavaScript & DOM 学习笔记（二）

“相关推荐”对你有帮助么？