JS基础学习笔记一 -- 从Hello Word输出开始

2024-04-27 14:09:35

字体：大中小

来源：转载

供稿：网友

JS基础学习笔记一 -- 从Hello Word输出开始

一个 "hello world" 的页面输出

1.首先，建立一个标准的html文本文件，并在<body>中输入如下代码：

1<header>2<h1>我的测试页面！</h1>3<h1>我的测试页面！</h1>4<h1>我的测试页面！</h1>5</header>

2.在html文件的</body>标签结束之前引入我们将要书写javascript代码的js文件，这里我将之命名为：main.js，引入方式为：

1 <script type="text/Javascript" src="main.js"></script>

2.1建立main.js文本文件，使用文本编辑器打开，书写入如下javascript代码：　

/** *  * @authors Edward.Lee (2452563196@QQ.com) * @date    2015-05-11 11:19:53 * @version main1.0 */var myHeading = document.querySelector('h1');myHeading.innerHTML = 'Hello world!';

2.2document.querySelector() 方法的阐述：

2.2.1 概述

　　　此方法返回当前文档中第一个匹配的特定选择器的元素（使用深度优先，前序遍历规则遍历所有文档节点）；例如，本例中的3个<h1>标签中的内容，使用此方法遍历替换的时候只是替换了第一个<h1>中的内容。

2.2.2 语法

　　 element = document.querySelector(selectors);

　　其中

element是一个element对象（DOM 元素）。
selectors是一个字符串，包含一个或是多个CSS 选择器，多个则以逗号分隔。

　注：selectors 可以是选择器的名称、className、idName，但是这些匹配须是符合css语法的；如果没有找到匹配元素，则返回null，否则找到多个匹配元素，则返回第一个匹配到的元素。

3.在我的html文件中我还引入了一个css样式文件：main.css；代码如下：（只是为了我的页面显示居中效果）

@charset "UTF-8";/** *  * @authors Edward.Lee (you@example.org) * @date    2015-05-11 11:38:09 * @version main1.0.css */html, body, div, dt, dd, dl, form, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, ul, ol, li, h1, h2, h3, h4, h5, h6{    display: block;    margin: 0;padding: 0;list-style: none;text-decoration: none;}body{    font: 12px/28px Arial, Tahoma, "Microsoft YaHei", "微软雅黑", Verdana, Simsun, "宋体", sans-serif;    color: #000;    min-width: 1000px;    word-break: break-word;    background: #f8f7f3;}header{width: 100%;line-height:2.8; }header h1{font-size: 32px;text-align: center;}

3.1 main.css的引入位置在html文件的<head>标签的结束前，引入方式如下：