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.2 document.querySelector() 方法的阐述：
2.2.1 概述
此方法返回当前文档中第一个匹配的特定选择器的元素（使用深度优先，前序遍历规则遍历所有文档节点）；例如，本例中的3个<h1>标签中的内容，使用此方法遍历替换的时候只是替换了第一个<h1>中的内容。
2.2.2 语法
element = document.querySelector(selectors);
其中
注：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>标签的结束前，引入方式如下：
<link href="main.css" rel="stylesheet">
4 如下是页面的输出效果：
浙公网安备 33010602011771号