文档章节

JavaScript & DOM 学习笔记(二)

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

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
闵行
程序员
第一章--JavaScript简介

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

lovewt ⋅ 06/05 ⋅ 0

JSON,异步加载(学习笔记)

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

Mrs_CoCo ⋅ 04/23 ⋅ 0

WEB前端学习javascript学习笔记

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/25 ⋅ 0

怪异的JavaScript系列(一)

译者按: JavaScript有很多坑,经常一不小心就要写bug。 原文: What the f*ck JavaScript? 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学...

Fundebug ⋅ 04/24 ⋅ 0

JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa ⋅ 前天 ⋅ 0

前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

WEB前端学习JS灵魂之问:JS为什么是单线程的?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/27 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung ⋅ 2014/09/23 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vuex学习

1、getters基本用法: 在store.js里面用const声明我们的getters属性。 const getters={ count:function (state) { return state.count +=100; }} export default new Vuex.S......

大美琴 ⋅ 33分钟前 ⋅ 0

292. Nim Game - LeetCode

Question 292. Nim Game Solution 思路:试着列举一下,就能发现一个n只要不是4的倍数,就能赢。 n 是否能赢1 true2 true3 true4 false 不论删除几,对方都能一把赢5 t...

yysue ⋅ 45分钟前 ⋅ 0

G6 关系数据可视化图形库 简单使用

官网 https://antv.alipay.com/zh-cn/g6/1.x/index.html 效果 首先生成给定数目的小球,并设置随机的颜色 按照顺序,设置小球的角度以及坐标 设置定时器,每隔一定的时间修改小球的角度和坐标...

阿豪boy ⋅ 48分钟前 ⋅ 0

6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩

zip压缩工具 zip命令可以压缩目录和文件,-r 压缩目录。 zip使用方法 zip 1.txt.zip 1.txt //压缩文件 zip -r 123.zip 123/ //压缩目录 unzip 1.txt.zip //解压 unzip 123.zip -d /root/456...

Linux_老吴 ⋅ 56分钟前 ⋅ 0

react-loadable使用跳坑

官方给react-loadable的定义是: A higher order component for loading components with dynamic imports. 动态路由示例 withLoadable.js import React from 'react'import Loadable fro......

pengqinmm ⋅ 今天 ⋅ 0

记录工作中遇到的坑

1、ios safari浏览器向下滚动会触发window resize事件

端木遗风 ⋅ 今天 ⋅ 0

桥接设计模式

1、概述: 将抽象部分与他的实现部分分离,这样抽象化与实现化解耦,使他们可以独立的变化 如何实现解耦的呢,就是通过提供抽象化和实现化之间的桥接结构 桥接模式将继承模式转化成关联关系,他降...

职业搬砖20年 ⋅ 今天 ⋅ 0

20.zip压缩 tar打包 打包并压缩

6月25日任务 6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩 6.5 zip压缩工具: zip支持压缩目录 zip压缩完之后原来的文件不删除 不同的文件内容其实压缩的效果不一样 文件内有很多重复的用xz压...

王鑫linux ⋅ 今天 ⋅ 0

double类型数据保留四位小数的另一种思路

来源:透析公式处理,有时候数据有很长的小数位,有的时候由在四位以内,如果用一般的处理方法,那么不足四位的小树会补充0到第四位,这样子有点画蛇添足的感觉,不太好看。所以要根据小数的...

young_chen ⋅ 今天 ⋅ 0

Django配置163邮箱出现 authentication failed(535)错误解决方法

最近用Django写某网站,当配置163邮箱设置完成后,出现535错误即:smtplib.SMTPAuthenticationError: (535, b'Error: authentication failed') Django初始配置邮箱设置 EMAIL_HOST = "smtp.1...

陈墨轩_CJX ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部