1. html

body属性

HTML常用特殊字符

HTML原代码         显示结果            描述
&lt;                <           小于号或显示标记
&gt;                >           大于号或显示标记
&amp;               &           可用于显示其它特殊字符
&quot;              “               引号
&reg;               ®               已注册
&copy;              ©               版权
&trade;             ™               商标
&nbsp;                              空格

1.1. 块级标签

前后断行显示，默认状态下占用一整行

具有一定的宽度和高度，可以通过设置块级标签的width、height 属性来控制

块级标签常用作容器.即可以再容纳其他块级标签或行级标签。

1.1.1. 标题标签

<h1>一级标题</h1>

h1-h6，可使用 align属性对齐

1.1.2. 段落标签

<p>有勇气就会有奇迹。</p>

可使用 align属性对齐

1.1.3. 水平线标签

【标签】<hr>
【属性】
    size：尺寸，取值单位为 px（像素），可以省略
    width：宽度，取值单位为px（像素）可以省略或百分比
    color：颜色，取值自然颜色值
    align：水平对齐方式，取值：left/center/right

1.1.4. 列表

有序列表

<ol>
  <li></li>
  <li></li>
</ol>

【属性】
    type:指定列表项标志的类型，默认为数字排列
    取值：1（默认值）/a/A/i/I（顺序标号为数字、英文字母、罗马字母）
    start:定义起始值(数字)，默认从1开始
    取值：数字

无序列表

 <ul>
   <li></li>
</ul>

【属性】
    type：指定无序列表的列表项标识
    取值： disc,默认,实心圆/ circle空心圆/ square实心矩形 none，不显示标识

定义列表

<dl>
    <dt>列表中的标题内容</dt>
        <dd>列表中的数据</dd>
</dl>
使用场合：图文混排时使用

1.1.5. 表格

由<table>元素定义。

【标签】<table></table>
【属性】
    width ：设置表格的宽度
    height：设置表格的高度
    align：设置表格的对齐方式，取值: left/center/right
    border：设置表格边框宽度
    cellpadding：内边距（单元格边框与内容之间的距离）
    cellspacing：外边距（单元格之间的距离）
    bgcolor：设置表格的背景颜色

table中的子元素

【标签】<tr></tr> （创建表行）
【属性】
    align：该行内容水平对齐方式，取值: left/center/right
    valign：该行内容的垂直对齐方式，取值: top/middle/bottom
    bgcolor：设置表格的背景颜色
 

【标签】<td></td> （创建单元格）
【属性】
    align：内容水平对齐方式
    valign：内容垂直对齐方式
    width ：宽度
    height ：高度
    colspan=值（数字，合并单元格的个数）;
    rowspan=值（数字，合并单元格的个数）;

【标签】<caption></caption> （表格标题）
【标签】<th></th> （表头，即列标题）
    行标题或列标题，字体有加粗的效果，放在tr中

【标签】<thead></thead> （表头）
【标签】<tbody></tbody> 表主体）
【标签】<tfoot></tfoot> （表尾）

其他运用

（1）不规则表格

- 跨列：从指定单元格位置处，横向向右合并几个（包含自己）单元格

属性：colspan=值（数字，合并单元格的个数）;

- 跨行：从指定单元格位置处，纵向向下合并几个（包含自己）单元格

属性：rowspan=值（数字，合并单元格的个数）;

（2）表格的嵌套

在单元格中去嵌套另一个表格，但嵌套的表格必须要放在td中

1.1.6. 表单

由<form>定义，将用户输入的数据提交给后台。
【常见属性】
    action：提交的服务器地址
    method：表单数据提交的方式，取值： get：明文提交/post：隐式提交
    name：定义表单名称，JS用到的比较多
    id： 独一无二的标识
如：<form action="url" method="get/post"> </form>

【表单控件主要属性】

    type：根据不同的type属性值可以创建各种类型的输入字段
    value：最终提交给服务器的值
    name：控件的名称，提供给服务器使用，没有name，控件则无法提交
    id：唯一标识，只能在当前页面使用，服务器不能用
    disabled：禁用，不能被提交

常用的表单控件：

基本格式：

<input name="元素的名称" type="类型" value="值“
size="显示宽度" maxlength="最多输入字符" checked="是否选中" />

（1）文本框：<input type="text">
（2）密码框：<input type="password">
 【专有属性】
     maxlength：限制输入的字符数，取值：数字
     readonly：设置文本控件只读
（3）单选按钮：<input name= “组名" type="radio" value="… " checked=" … ">
                    name相同表示同一组
（4）复选框：<input type="checkbox">
【专有属性】
     checked，设置默认被选中
（5）提交按钮：<input type="submit">
（6）重置按钮：<input type="reset">
（7）普通按钮：<input type="button">
     属性：onclick 值：事件代码
（8）图片按钮：<input type="image" src=""> 
（9）隐藏域：<input type="hidden">
（10）文件选择框：<input type="file">
**下拉选择框****select** **和** **option**
<select name="" size="行数">
  <option value="" selected="selected">选项1</option>
  <option value="" >选项2</option>
</select>
(11)多行文本框
<textarea name="... "cols="列宽"rows="行宽">
文本内容
</textarea>

只读和禁用属性
readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用

1.1.7. 分区元素

（1）块分区元素：<div></div>
【特点】独立成行
【作用】页面布局
（2）行内分区元素：<span></span>
【特点】多个元素在一行内显示
【作用】设置同一行文字内的不同格式

1.2. 行级标签

不会换行，多个元素会在一行内显示

可以嵌套行级标签

1.2.1. 文本样式

斜体：<i></i>       <em></em>
粗体：<b></b>          <strong></strong>
删除线：<del></del>
下划线：<u></u>
上标：<sup></sup>
下标：<sub></sub>

1.2.2. 换行元素

【标签】<br>

1.2.3. 图像

【标签】<img>
【属性】
    src：图片地址（绝对/相对）
    alt: 替代文本
    title：提示文字
    width：图像宽度 
    height：图像高度
    border:边框宽度

1.2.4. 行范围标签span

<span></span>

1.2.5. font

【标签】<font>
【属性】
    size: 字号-1 ~+7
     color:值rgb(r,g,b),#rrggbb,colorname
     face:字体

1.2.6. 内容居中

<center>文字、图片、其他对象</center>

1.2.7. 滚动文字，图片 marquee

[标签]<marquee>
[属性]：
width ,height,bgcolor,
direction:up,down,right,left(默认)
loop：循环次数，-1表示无限循环；
onMouseOver=”this.stop()” onMouseOut=”this.start()” :鼠标覆盖停止滚动，鼠标移开继续滚动；

1.2.8. pre预格式化

<pre>预格式化文本</pre>

1.2.9. 链接

【标签】<a></a>
【属性】
href：链接地址（要跳转到的页面的地址）
target：目标，打开新网页的形式
取值：
   _blank：在新标签页中打开
   _self：在自身页面中打开（默认值）
   frameName:在指定框架中打开链接
   title：鼠标放到链接上的提示

锚链接：
1、定义标记（锚）：<a name="标记名">目标位置的</a>
    or      <a id="标记名">目标位置的</a>
2、设置链接到标记位置：<a href="#标记名">当前位置</a>

框架

frameset框架集

<frameset cols="25%,50%,*" rows ="50%,*" border="5">
    <frame src="the_first.html " name="firstFrameName">
    ...
</frameset>


框架窗口见的跳转：
<a href="the_first.html" target="firstFrameName"></a>
<frameset>可以嵌套使用

<a href="跳转的目标网页" target="跳转的框架名"></a>
<frameset>标签的cols属性表示将页面横向分割为几列，例如，cols=“25%,50%,*"表示将页面分割为三列.第一列占浏览器窗口总宽度的25%，第二列占50%，第三列占剩余部分，各列的宽度值也可使用具体数值(单位像素为px)。
rows属性表示将页面纵向分割为几行。
    
各框架对应的页面情况：使用<frame> 标签的src属性引用各框架对应的页面文件，同时还可以使用name属性标识各框架窗口。

需要注意的是：<frameset> 标签和<body> 标签不能同时使用，需要使用<frameset> 代替页面中的<bady>标签

iframe

<body>
 <iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="no" />
<body>
    
和<frameset>不同，放在<body>标签内
<iframe>可以嵌套使用

2 CSS

基本语法结构

<head>
  <style type="text/css">
    选择器（即修饰对象）{
      对象的属性1: 属性值1;
      对象的属性2: 属性值2;
    }
  </style>
</head>

1.标签选择器
    标签名{ 属性名1: 属性值1;
        属性名2: 属性值2;
    }
2.类选择器
类选择器是定义某类样式，让多个HTML 元素共享，这些样式是可以共享和代码复用的。
（1）定义样式：
    .类名{ 属性名1: 属性值1;
        属性名2: 属性值2;
    }
（2）应用样式：
    <标签名 class=“类名1 类名2">标签内容</标签名>
                   
注意：定义时类名前有个点号，应用样式时则不需要点号
                   
嵌套选择器：
    p{ }:           为所有 p 元素指定一个样式。
    .marked{ }:     为所有 class="marked" 的元素指定一个样式。
    .marked p{ }:   为所有 class="marked" 元素内的 p 元素指定一个样式。
    p.marked{ }:    为所有 class="marked" 的 p 元素指定一个样式。
3.ID选择器
ID选择器用于修饰某个指定的页面元素或区块，这些样式是对应ID标识的HTML 元素所独占的
    (1)定义样式
        #ID标识名{ 属性名1: 属性值1;
            属性名2: 属性值2;
        }
    （2）应用样式
        <标签名 id=“ID标识名">标签内容</标签名>      
注意：定义ID选择器时有个井号，但给HTML 标签设置ID 属性时不需要

4.伪类选择器
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

##当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

CSS 中规定样式的优先级规则为:
行内样式表> 内部样式表> 外部样式表
ID 选择器 > 类选择器 > 标签选择器

插入样式表

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和字体。

<p style="color:sienna;font:large 楷体 ">这是一个段落。</p>

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head> 
    <style type="text/css"> 
        hr {color:sienna;} 
        p {margin-left:20px;}
        body {background-image:url("images/back40.gif");}
    </style>
</head>

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

1）链接外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>


2）外部样式表
    <style type="text/css">
    @import url("sheet1.css");
    @import url("sheet2.css"");
    </style>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;} 
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

属性

文本和字体属性

背景属性

列表属性

盒子属性

尺寸

<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span>
<span style="cursor:crosshair">crosshair</span>
<span style="cursor:default">default</span>

<span style="cursor:e-resize">e-resize</span>

<span style="cursor:help">help</span>

<span style="cursor:move">move</span>

<span style="cursor:n-resize">n-resize</span>

<span style="cursor:ne-resize">ne-resize</span>

<span style="cursor:nw-resize">nw-resize</span>

<span style="cursor:pointer">pointer</span>

<span style="cursor:progress">progress</span>

<span style="cursor:s-resize">s-resize</span>

<span style="cursor:se-resize">se-resize</span>

<span style="cursor:sw-resize">sw-resize</span>

<span style="cursor:text">text</span>

<span style="cursor:w-resize">w-resize</span>

<span style="cursor:wait">wait</span>

DIV+CSS布局

浮动的三大显著特征：

1. DIV块元素失去“块状”换行显示特征，变为行内元素
2. 紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示
3. 占据行内元素的空间，导致行内元素围绕显示

div设置width height （%）嵌套 进行布局

三行两列模式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div+css布局</title>
        <style type="text/css">
            #bg{width: 100%;height: 1000px;}/*大容器*/
            #header{
                width: 100%;height: 20%;background:yellowgreen;
            }
            #main{
                width: 100%;height: 70%;
            }
            #left{
                width: 20%;height: 100%;background:brown;float: left;
            }
            #right{
                width: 80%;height: 100%;background:yellow;float: left;
            }
            #footer{
                width: 100%;height: 10%;background:black;clear: both;
            }
        </style>
    </head>
    <body>
        <div id="bg">
            <div id="header"></div>
            <div id="main">
                <div id="left"></div>
                <div id="right"></div>
            </div>
            <div id="footer"></div> 
        </div>
    </body>
</html>

3. JavaScript

基本语法

与html结合方式
    1. 内部JS：
        * 定义<script>，标签体内容就是js代码
    2. 外部JS：
        * 定义<script>，通过src属性引入外部的js文件

        * 注意：
            如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
            1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
            2. <script>可以定义多个。
2. 注释
    1. 单行注释：//注释内容
    2. 多行注释：/*注释内容*/
3. 数据类型：
    在 JavaScript 中有 6 种不同的数据类型：
        string      字符串。 字符串  "abc" "a" 'abc'
        number      数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
        boolean     true和false
        object
        function
        symbol
    3 种对象类型：
        Object
        Date
        Array
    2 个不包含任何值的数据类型：
        null    一个对象为空的占位符
        undefined   未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
    
        # null 和 undefined 的值相等，但类型不等：
        
    constructor 属性返回所有 JavaScript 变量的构造函数。
    你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
    function isArray(myArray) {
        return myArray.constructor.toString().indexOf("Array") > -1;
    }
            
4. 变量
    * 语法：
    * var 变量名 = 初始化值;
            
    * typeof运算符：获取变量的类型。
    * 注：null运算后得到的是object
5. 运算符
    1. 一元运算符：只有一个运算数的运算符
        ++，-- ， +(正号)  
        * ++ --: 自增(自减)
        * ++(--) 在前，先自增(自减)，再运算
        * ++(--) 在后，先运算，再自增(自减)
        * +(-)：正负号
    ### 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
           * 其他类型转number：
           * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
           * boolean转number：true转为1，false转为0
    2. 算数运算符
        + - * / % ...

    3. 赋值运算符
        = += -+....

    4. 比较运算符
        > < >= <= == ===(全等于)
        * 比较方式
        1. 类型相同：直接比较
          * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
        2. 类型不同：先进行类型转换，再比较
          * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
    5. 逻辑运算符
                && || !
                * 其他类型转boolean：
                   1. number：0或NaN为假，其他为真
                   2. string：除了空字符串("")，其他都是true
                   3. null&undefined:都是false
                   4. 对象：所有对象都为true
            
    6. 三元运算符
        ? : 表达式
                
    7. 位运算符
        &  |  
        ~  取反
        ^  异或
            
6. 流程控制语句：
    1. if...else...
    2. switch:
    * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
        * switch(变量):
            case 值:
        * 在JS中,switch语句可以接受任意的原始数据类型
    3. while
    4. do...while
    5. for
    6. for in
7. JS特殊语法：
    1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
    2. 变量的定义使用var关键字，也可以不使用
        * 用： 定义的变量是局部变量
        * 不用：定义的变量是全局变量(不建议)
    3. with语句为代码块创建默认对象：
        with(默认对象){
             代码块;
        }

json

定义：
    var json_obj = {
        "属性":值,
        "属性":值,
        "属性":值
    }
    值可以是任何类型，数组，包括json对象
    
访问:
    1.  json_obj.属性
    2.  json_obj["属性"]
    
数据交换：
    string to json_obj:
        window.eval("var jo ="+json_str);
        
        var obj = JSON.parse(text);
        
    json_obj to string:
        var json_str = JSON.stringify(json_obj);
    

JavaScript 表单验证

HTML 表单验证可以通过 JavaScript 来完成。

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

/* onsubmit="return fun()"
    提交时调用fun();返回false阻止数据提交
*/

常用对象、函数

String

https://www.runoob.com/jsref/jsref-obj-string.html

字符串属性和方法
属性:
length
prototype
constructor
方法:
charAt()
charCodeAt()
concat()
fromCharCode()
# indexOf()
lastIndexOf()
match()
replace()
search()
slice()
split()
substr()
# substring()
# toLowerCase()
toUpperCase()
valueOf()

Date

https://www.runoob.com/jsref/jsref-obj-date.html

# getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
# getDay()  从 Date 对象返回一周中的某一天 (0 ~ 6)。
# getFullYear() 从 Date 对象以四位数字返回年份。
# getHours()    返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()   返回 Date 对象的毫秒(0 ~ 999)。
# getMinutes()  返回 Date 对象的分钟 (0 ~ 59)。
# getMonth()    从 Date 对象返回月份 (0 ~ 11)。
getSeconds()    返回 Date 对象的秒数 (0 ~ 59)。
# getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
setDate()   设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()   设置 Date 对象中的年份（四位数字）。
setHours()  设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()   设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()    设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()  设置 Date 对象中月份 (0 ~ 11)。
setSeconds()    设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()   setTime() 方法以毫秒设置 Date 对象。
toDateString()  把 Date 对象的日期部分转换为字符串。
toISOString()   使用 ISO 标准返回字符串的日期格式。
toJSON()    以 JSON 数据格式返回日期字符串。
toLocaleDateString()    根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()    根据本地时间格式，把 Date 对象的时间部分转换为字符串。
# toLocaleString()  根据本地时间格式，把 Date 对象转换为字符串。
toString()  把 Date 对象转换为字符串。
toTimeString()  把 Date 对象的时间部分转换为字符串。
toUTCString()   根据世界时，把 Date 对象转换为字符串。实例：

Math

https://www.runoob.com/jsref/jsref-obj-math.html

Math 对象属性
E   返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10    返回 10 的自然对数（约等于2.302）。
LOG2E   返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E  返回以 10 为底的 e 的对数（约等于0.434）。
PI  返回圆周率（约等于3.14159）。
SQRT1_2 返回 2 的平方根的倒数（约等于 0.707）。
SQRT2   返回 2 的平方根（约等于 1.414）。

Math 对象方法
abs(x)  返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)  返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x)  返回数的余弦。
exp(x)  返回 Ex 的指数。
floor(x)    对 x 进行下舍入。
log(x)  返回数的自然对数（底为e）。
max(x,y,z,...,n)    返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)    返回 x,y,z,...,n中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    四舍五入。
sin(x)  返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x)  返回角的正切。

Array

https://www.runoob.com/jsref/jsref-obj-array.html

创建Array:
var arr= [];
var arr2=new Array();
var arr2=new Array(10);//长度为10
var arr2=new Array(1,2,3,4,5,6);//数组中有1，2，3，4，5，6元素


属性  描述
constructor 返回创建数组对象的原型函数。
length  设置或返回数组元素的个数。
prototype   允许你向数组对象添加属性或方法。
Array 对象方法
方法  描述
concat()    连接两个或更多的数组，并返回结果。
copyWithin()    从数组的指定位置拷贝元素到数组的另一个指定位置中。
fill()  使用一个固定值来填充数组。
includes()  判断一个数组是否包含一个指定的值。
indexOf()   搜索数组中的元素，并返回它所在的位置。
isArray()   判断对象是否为数组。
join(str)   把数组的所有元素放入一个字符串。以str连接
lastIndexOf()   搜索数组中的元素，并返回它最后出现的位置。
splice(n,n) 删除数组m位置n个元素
pop()   删除数组的最后一个元素并返回删除的元素。
push()  向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()   反转数组的元素顺序。
sort()  对数组的元素进行排序。
toString()  把数组转换为字符串，并返回结果。

window

https://www.runoob.com/jsref/obj-window.html

属性  描述
closed  返回窗口是否已被关闭。

history 对 History 对象的只读引用。请参数 History 对象。
innerHeight 返回窗口的文档显示区的高度。
innerWidth  返回窗口的文档显示区的宽度。
localStorage    在浏览器中存储 key/value 对。没有过期时间。
length  设置或返回窗口中的框架数量。
location    用于窗口或框架的 Location 对象。请参阅 Location 对象。
name    设置或返回窗口的名称。
navigator   对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener  返回对创建此窗口的窗口的引用。
outerHeight 返回窗口的外部高度，包含工具条与滚动条。
outerWidth  返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent  返回父窗口。
screen  对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft  返回相对于屏幕窗口的x坐标
screenTop   返回相对于屏幕窗口的y坐标
screenX 返回相对于屏幕窗口的x坐标
sessionStorage  在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY 返回相对于屏幕窗口的y坐标
self    返回对当前窗口的引用。等价于 Window 属性。
status  设置窗口状态栏的文本。
top 返回最顶层的父窗口。
Window 对象方法
 
方法  描述
alert() 显示带有一段消息和一个确认按钮的警告框。
atob()  解码一个 base-64 编码的字符串。
btoa()  创建一个 base-64 编码的字符串。
blur()  把键盘焦点从顶层窗口移开。
# clearInterval()   取消由 setInterval() 设置的 timeout。
clearTimeout()  取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
# open(url , target)    打开一个新窗口。target值：_blank：新窗口(默认)，_self：当前窗口
confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()   创建一个 pop-up 窗口。
# eval()     执行字符串形式的JavaScript代码；
focus() 把键盘焦点给予一个窗口。
getSelection()  返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()  获取指定元素的 CSS 样式。
matchMedia()    该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()    可相对窗口的当前坐标把它移动指定的像素。
moveTo()    把窗口的左上角移动到一个指定的坐标。
open()  打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt()    显示可提示用户输入的对话框。
resizeBy()  按照指定的像素调整窗口的大小。
resizeTo()  把窗口的大小调整到指定的宽度和高度。
scroll()    已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()  按照指定的像素值来滚动内容。
scrollTo()  把内容滚动到指定的坐标。
# setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()    在指定的毫秒数后调用函数或计算表达式。
stop()  停止页面载入。
postMessage()   安全地实现跨源通信。

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。


var obj = JSON.parse(json_str)      用于将一个 JSON 字符串转换为 JavaScript 对象。
var json_str JSON.stringify(obj)    用于将 JavaScript 值转换为 JSON 字符串。

对话框

//警告框    一个确定按钮
alert(msg);

//确认框    确定:true,取消:false，
confirm(msg);

//输入框   确认;返回输入信息,取消:null;
prompt('提示信息',默认值);

HTML DOM

查找html

通过 id 查找 HTML 元素
var x=document.getElementById("intro");

通过标签名查找 HTML 元素
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");

通过 html name属性 查找html元素 可以获得一组name相同的html元素；
var x = document.getElementsByName(nameStr);

改变html

改变 HTML 输出流:    document.write(html_str);
document.write(Date());

改变 HTML 内容:   document.getElementById(id).innerHTML=新的HTML内容
document.getElementById("p1").innerHTML="新文本!";

改变 HTML 属性:   document.getElementById(id).属性=新属性值
<img id="image" src="smiley.gif">
document.getElementById("image").src="landscape.jpg";

改变html样式:   document.getElementById(id).style.属性=新样式
document.getElementById("p2").style.color="blue";

常见的HTML事件

下面是一些常见的HTML事件的列表:

<!--  事件注册1    -->
<!--onmouseover  onmouseout测试-->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;">Mouse Over Me</div>

<script>
function mOver(obj){
    obj.innerHTML="mose over on me";
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me";
}
</script>


<!--  事件注册2  -->
<input type="button" id="btn">btn</input>
<scrip>
    function fun(){
    
    }
    document.getElementById("btn").onclick = fun;
    //可以使用匿名函数
    document.getElementById("btn").onclick = function (){};
</scrip>


<!--  事件注册3  -->
addEventListener() 方法用于向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。
element.addEventListener(event, function, useCapture*);
element.removeEventListener("mousemove", myFunction);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。默认值为 false, 即冒泡传递，
在冒泡中，内部元素的事件会先被触发；当值为 true 时, 事件使用捕获传递。

使用示例：
document.getElementById("myDiv").addEventListener("mouseover", myFunction);

注册事件一般使用

<scrip>
    window.onload=function(){
         document.getElementById("btn").onclick = function (){
             //鼠标点滴事件
         };
    }
</scrip>
<input type="button" id="btn">btn</input>

手动触发事件

元素.事件();

document.getElementById("text").blur();//手动让文本框失去焦点

创建新的 HTML 元素 (节点) - appendChild()

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
    //创建 <p> 元素:
var new_child = document.createElement("p");
    //为 <p> 元素创建一个新的文本节点：
var node = document.createTextNode("这是一个新的段落。");
    //将文本节点添加到 <p> 元素中：
new_child.appendChild(node);
    //查找已存在的元素
var parent = document.getElementById("div1");
    //最后，将<p>元素添加到一个已存在的元素中
parent.appendChild(new_child);
</script>


以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到特殊，可以使用 insertBefore() 方法:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var new_child = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child_p2 = document.getElementById("p2");
parent.insertBefore(new_child, child_p2);//将new_child添加到child_p2之前
</script>

移除已存在的元素
parent.removeChild(child);
替换 HTML 元素 
parent.replaceChild(new_child, child);//在parent容器中用new_child取代child

案例

键盘按下——捕获回车键

<input type="text" id="tx"/>
<script>
    window.onload=function(){
        document.getElementById("tx").onkeydown=function(e){
            //console.log(e.keyCode) 可以测试
            if(e.keyCode == 13){//回车键
                //...
            }
        }
    }
</script>

复选框的全选和取消全选

<input type="checkbox" name="hobby" value="music"/>音乐<br>
<input type="checkbox" name="hobby" value="film"/>电影<br>
<input type="checkbox" name="hobby" value="sport"/>运动<br>

<script>
    window.onload=function(){
        var quan = document.getElementById("quan");
        var hobbys = document.getElementsByName("hobby");
        //点击全选框时将每个复选框checked设置同全选框一样
        quan.onclick=function(){
            for(var i in hobbys){
                hobbys[i].checked = quan.checked;
            }
        }
        
        //设置每个复选框的点击事件，
        for(var i in hobbys){
            hobbys[i].onclick=function(){
                var checkdCount =0;
                for(var j =0;j<hobbys.length;j++){//不知为何这里用for in 会出错
                    if(hobbys[j].checked){  
                        checkdCount++;
                }
                quan.checked = (checkdCount==hobbys.length);
            }
        }
        
    }
</script>

表单提交验证

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .er{
                color: red;
            }
        </style>
    </head>
    <body>
        <form   id="userForm">
            邮箱<input type="text" name="email" id="email" /><span class="er" id="email_er"></span><br>
            密码<input type="password" name="pswd" id="pswd"/><br>
            确认密码<input type="password" id="confirm" /><span class="er" id="pswd_er"></span><br>
            <input type="button" id="submit" value="注册" />
            <input type="reset" value="重置" />
        </form>
        
        <script>  
        var emailElt = document.getElementById("email");
        var email_er = document.getElementById("email_er");
        var pswdElt = document.getElementById("pswd");
        var confirm = document.getElementById("confirm");
        var pswd_er = document.getElementById("pswd_er");
        var submitBtn = document.getElementById("submit");
        
        
        emailElt.onblur=function(){
            var email = emailElt.value.trim();// 获取email
            // 编写email的正则
            var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            var ok = emailRegExp.test(email);
            if(!ok){// 不合法
                 email_er.innerText = "邮箱地址不合法";
            }
        }
        
        emailElt.onfocus=function(){
            if(email_er.innerText !=''){//"邮箱地址不合法"
                emailElt.value='';
            }
            email_er.innerText='';
        }
        
        confirm.onblur=function(){
            var pswd = pswdElt.value;
            if(pswd != confirm.value){
                pswd_er.innerText='密码不一致';
            }
            if(pswd == ''){
                pswd_er.innerText="密码为空";
            }
        }
        confirm.onfocus=function(){
            if(pswd_er.innerText!=''){
                confirm.value='';
            }
            pswd_er.innerText='';
        }
        
        //此处不可以使用submit按钮，该按钮会刷新页面；
        submitBtn.onclick=function(){ 
            //让email和confirm获得焦点再失去焦点，检查后面提示是否为空；
            emailElt.focus();
            emailElt.blur();
            
            confirm.focus();
            confirm.blur();
            
            if(email_er.innerText=='' && pswd_er.innerText==''){
                // 获取表单对象
                var userFormElt = document.getElementById("userForm");
                // 可以在这里设置action,也可以不在这里.
                userFormElt.action = "http://localhost:8080/jd/save";
                // 提交表单
                userFormElt.submit();
            }
        }
        
        
        </script>
    </body>
</html>

其他用法

跳转页面

1.  浏览器地址栏直接写url
2.  超链接
3.  提交表单
4.  window.open(url,target)
5.   window.location.href=url       window.location=url 
    document.location.href=url      document.location=url