JavaScript & DOM 学习笔记(二)
JavaScript & DOM 学习笔记(二)
pradosoul 发表于2年前
JavaScript & DOM 学习笔记(二)
  • 发表于 2年前
  • 阅读 49
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: JavaScript 和 CSS 在 html中的引用 ——《JavaScript & DOM、CSS 等Web前段的学习笔记》 注:本系列中案例、代码选自 《JavaScript DOM 编程艺术》 第二版

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">
共有 人打赏支持
粉丝 7
博文 40
码字总数 37445
×
pradosoul
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: