文档章节

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 ============================================================================= 涉及到的知识点有: ==================================......

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

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

lovewt
06/05
0
0
JSON,异步加载(学习笔记)

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

Mrs_CoCo
04/23
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0
JS对象与Dom对象与jQuery对象之间的区别

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

苦水润喉
08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue-router的HTML5 History 模式设置

VUE是当下最火爆的前端框架之一,vue-router是vue项目中几乎都会用到的组件,然而体验一时爽,其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题,并给出解决方...

peakedness丶
24分钟前
1
0
Dubbo 源码分析 - 服务引用

1. 简介 在上一篇文章中,我详细的分析了服务导出的原理。本篇文章我们趁热打铁,继续分析服务引用的原理。在 Dubbo 中,我们可以通过两种方式引用远程服务。第一种是使用服务直联的方式引用...

小刀爱编程
33分钟前
1
0
redis_集群原理

数据分布 数据分布理论 分布式系统数据分区规则:常见的有哈希分区和顺序分区两种。 哈希分区 常见的hash分区规则有:节点取余分区,一致性hash分区,虚拟槽分区. redis数据分区 redis集群功能...

grace_233
34分钟前
0
0
数据库(mysql)业务用户表批量造测试用户密码数据[方案]

博主这几天在配合公司测试做商城商品秒杀场景的压测,由于秒杀需要登录,所以需要为测试创建多个用户密码。此项任务可能在今后还会遇到,先做个笔录。同时,让小伙伴们需要的时候也可以有个参...

em_aaron
49分钟前
2
0
JDK_jvisualvm访问远程weblogic服务

1.首先需要在远程的weblogic的域下面,找到/bin/ setDomainEnv.sh ,需要在此文件下加入如下内容: -Dcom.sun.management.jmxremote.port=1090 ##端口号可以自己指定 -Dcom.sun.management.j...

四年级小学生
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部