文档章节

JavaScript & DOM 学习笔记(二)

pradosoul
 pradosoul
发布于 2015/12/08 17:04
字数 468
阅读 50
收藏 1

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">

© 著作权归作者所有

共有 人打赏支持
pradosoul
粉丝 6
博文 40
码字总数 37445
作品 0
闵行
程序员
私信 提问
day03_js学习笔记_03_js的事件、js的BOM、js的DOM

day03js学习笔记03_js的事件、js的BOM、js的DOM ============================================================================= 涉及到的知识点有: ==================================......

黑泽明军
2018/04/19
0
0
第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt
2018/06/05
0
0
jQuery学习笔记二:"$"

在jQuery中,使用最频繁的就是"$"符号了,他给我们提供了丰富的功能,例如选择页面中的一个和或是一类元素、作为功能函数的前缀、window.onload的完善、创建页面的DOM节点等。 1.选择器: 在...

长平狐
2013/06/17
26
0
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo
2018/04/23
0
0
JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解......

苦水润喉
2018/08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
1
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
1
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
昨天
3
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linuxCool
昨天
6
0
协议简史:如何学习网络协议?

大学时,学到网络协议的7层模型时,老师教了大家一个顺口溜:物数网传会表应。并说这是重点,年年必考,5分的题目摆在这里,你们爱背不背。 考试的时候,果然遇到这个问题,搜索枯肠,只能想...

Java干货分享
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部