HTML

网页标记

标题 h1~h6

  1. <h1>一级标题</h1>
  2. ...
  3. <h6> <h6>

段内换行 br

  1. <br />

段内分组 span

组合行内元素便于通过CSS样式来格式化

  1. <span>文字文字</span>
  1. <style type="text/css">
  2. span{
  3. color:blue;
  4. font-weight:bold;
  5. }
  6. </style>

段落 p

  1. <br>...</br>
  2. <br />

预留格式 pre

保留空格和空行

  1. <body>
  3. <pre>
  4. 预留文本格式，保留 连续空格和
  6. 和空行
  7. </pre>
  8. 很适合显示计算机代码
  9. </body>

水平线 hr

  1. <hr />

空格字符

（特殊字符全小写）

  1. &nbsp;

添加注释

  1. <!--zhushi-->

超链接 a

  1. <!--链接到本站点其他网页-->
  2. <a href= "news.html" >新闻 </a>
  3. <!--链接到其他站点-->
  4. <a href= "http://www.baidu.com/" >百度 </a>
  5. <!--虚拟超链接-->
  6. <a href= "#" >板块2</a>

插入图像 img

src属性：路径＋文件名
alt属性：图片的替换文本
相对路径：上一级文件夹”../logo.gif”

  1. <img src= "w3school.gif" alt= "w3c" />

列表 ul ol li

li：列表项

  • 无序列表 ul li
  1. <ul>
  2. <li>HTML</li>
  3. <li>CSS</li>
  4. <li>JS</li>
  5. </ul>
  • 有序列表 ol li
  1. <ol>
  2. <li>HTML</li>
  3. <li>CSS</li>
  4. <li>JS</li>
  5. </ol>

区域 div

确定一个单独的区域
如页面的一个组成部分，一个栏目板块
align属性：区域内部的排布
center：居中

  1. <div id="container" align="center">
  2. <h1>web 前端开发<h1>
  3. <p>HTML</p>
  4. <p>CSS</p>
  5. <p>JavaScript</p>
  6. </div>

表格 table tr td

border=”1” 显示较细的边框
th标签：表头单元格，加粗显示

  1. <!--tr为行 td为列-->
  2. <table border="1">
  3. <tr>
  4. <th>内容</th>
  5. <th>内容</th>
  6. </tr>
  7. <tr>
  8. <td>内容</td>
  9. <td>内容</td>
  10. </tr>
  11. </table>

表单 form

  1. <form action="数据处理网页">
  2. 表单元素
  3. </form>
  • 文本框、密码框 input
    文本框 type=”text”
    密码框 type=”password”
  1. <form>
  2. <input type="text|password" />
  3. </form>

例如：

  1. <form>
  2. 账户：<input type="text" name="userName" />
  3. <br />
  4. 密码：<input type="password" name="userPsd" />
  5. </form>
  • 按钮
    按钮：提交按钮、重置按钮
    type:submit
    value:按钮上显示的文字
  1. <form>
  2. <input type="text" value="" name="myName" />
  3. <input type="submit" value="提交" name="submit" />
  4. <input type="reset" value="重置" />
  5. </form>
  • 单选框、复选框input-radio checkbox
  1. <form>
  2. <input type="radio|checkbox"
  3. value="值" name="名称" checked="checked"/>
  4. </form>

当设置 check=”checked”时，该选项被默认选中
name属性要设为相同的取值，才会被认作一组

  • 下拉列表框 select option
  1. <select>
  2. <option>选项1</option>
  3. <option selected="selected">选项2</option>
  4. </select>
  • 文本域textarea
  1. <textarea rows="行数" cols="列数">文本</textarea>

Web语义化

让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容

em strong标签

  1. <p>
  2. <em>强调</em>
  3. <i>斜体，无语义<i>
  4. </p>
  5. <p>
  6. <strong>重点强调</strong>
  7. <b>粗体，无语义</b>
  8. </p>

dl dt dp标签

自定义列表dl、列表项dt、描述dd

  1. <dl>
  2. <dt>HTML</dt>
  3. <dd>超文本标记语言</dd>
  4. <dt>CSS</dt>
  5. <dd>层叠样式表</dd>
  6. </dl>

CSS

CSS概述

Cascading Style Sheets层叠样式表

  1. p{
  2. font-size:12px; /*字号*/
  3. color:blue; /*文字颜色*/
  4. font-weight:bold; /*加粗*/
  5. }

CSS添加方法

行内

  1. <body>
  2. <p style="color:red;">
  3. 内容
  4. </p>
  5. </body>

内嵌

  1. <head>
  2. <style type="text/css">
  3. p{
  4. color:red;
  5. }
  6. </head>

单独文件

外部式样式表文件style.css

  1. p{
  2. color:red;
  3. }

网页文件：1.htm

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="css/style.css" />
  4. </head>
  5. <body>
  6. <p>内容</p>
  7. </body>
  8. </html>

（优先级）

行内样式>内嵌样式>链接样式>浏览器默认样式

CSS选择器

标签p

  1. <style type="text/css">
  2. body{background-color:#ccc;
  3. text-align:center;
  4. font-size:12px;}
  5. h1 {font:"黑体";font-size:16px;}
  6. p {color:red;font-size:16px;}
  7. hr {width:200px;}
  8. </style>
  1. <body>
  2. <h1>标题</h1>
  3. <hr>
  4. <p>正文的段落</p>
  5. 版权所有
  6. </body>

嵌套p span

  1. <style type="text/css">
  2. p span{
  3. color:red;
  4. }
  5. </style>
  1. <body>
  2. <p><span>123<span>456</p>
  3. </body>

类别.one

  1. <style type="text/css">
  2. p {font-size:12px;}
  3. .one{font-size:18px;}
  4. .two{font-size:24px;}
  5. </style>
  1. <body>
  2. <p class="one">样式1</p>
  3. <p class="two">样式2</p>
  4. <p>普通样式</p>
  5. </body>

集体p,hl

  1. <style type="text/css">
  2. h1,p{text-align:center;
  3. }
  4. </style>
  1. <body>
  2. <h1>欢迎访问论坛</h1>
  3. <p>欢迎访问论坛</p>
  4. </body>

id#left

  1. <style type="text/css">
  2. #one{font-size:12px;}
  3. #two{dont-size:24px;}
  4. </style>
  1. <body>
  2. <p id="one">文字1</p>
  3. <p id="two">文字2</p>
  4. <body>

ID选择器只能被唯一地引用一次

全局*

  1. <style type="text/css">
  2. * {
  3. text-align:center;
  4. }
  5. </style>

混合

  1. <div class="one yello left">...</div>
  2. <!--id和class混用-->
  3. <div id="my" class="one yello left">

CSS常用单位

大小

  • px 像素
  • em 1em：1个字符 2em：2个字符 自动适应用户所使用的字体
  • %百分比

颜色

  • red,blue,green 颜色名
  • rgb(x,x,x)
    RGB值
    每个颜色分量取值0~255
    红色：rgb(255,0,0)
    灰色：rgb(66,66,66)
  • rgb(x%,x%,x%)
    RGB百分比值 0~100%
    红色：rgb(100%,0%,0%)
  • rgba(x,x,x,x)
    RGB值，透明度
    a值：0.0（完全透明）与1.0(完全不透明)
    红色半透明：rgba(255,0,0,0.5)
  • #rrggbb
    十六进制数
    红色：#ff0000
    红色：#f00 去掉重复位

文本

  • color 文本颜色 red #f00 rgb(255,0,0)
  • letter-spacing 字符间距 2px -3px
  • line-height 行高 14px 1.5em 120%
  • text-align 对齐 center left right justify
  • text-decoration 装饰线 none overline underline line-through
  • text-indent 首行缩进 2em

字体

  • font 在一个声明里设置所有字体属性 font:bold 18px '幼圆'

顺序：font:斜体 粗体 字号/行高 字体

  • font-family 字体系列 font-family:"Hiragino Sans GB","Microsoft YaHei",sans-serif;
  • font-size 字号 14px 120%
  • font-style 斜体 italic
  • font-weight 粗体 bold

背景

  • background:颜色 图片 repeat
  • background-color
  • background-image url("logo.jpg")
  • background-repeat repeat repeat-x repeat-y no-repeat

超链接

  • a:link 普通的、未被访问的链接
  • a:visited 用户已访问的链接
  • a:hover 鼠标指针位于链接的上方悬停
  • a:active 链接被点击的时刻

： 伪类选择器

a:hover 必须位于a:link和a:visited之后 a:active 必须位于a:hover之后 Love&Hate

列表

  • list-style 所有用于列表的属性设置于一个声明中
  • list-style-image 为列表项标志设置图像
    url（”images/bullet1.gif”）
  • list-style-position 标志的位置
    inside / outside
  • list-style-type 标志的类型 | 值 | 描述 | | —- | —- | | none | 无标记。 | | disc | 默认。标记是实心圆。 | | circle | 标记是空心圆。 | | square | 标记是实心方块。 | | decimal | 标记是数字。 | | lower-roman | 小写罗马数字（i,ii,iii,iv,v等） | | upper-roman | 大写罗马数字（I,II,III,IV,V等） | | lower-alpha | 小写英文字母（a,b,c,d,e等） | | upper-alpha | 大写英文字母（A,B,C,D,E等） | | lower-Greek | 小写希腊字母（alpha,beta,gamma等） | | lower-latin | 小写拉丁字母（a,b,c,d,e等） | | upper-latin | 大写拉丁字母（A,B,C,D,E等） |

表格

  • border 边框
  1. table,td,th {
  2. border:1px solid #eee;
  3. }

solid: 实线

  • width 宽
  • height 高
  • border-collapse 坍缩：表格边框和单元格边框重叠

奇偶选择器

  1. tr:nth-child(odd|even) {
  2. background-color:#EAF2D3;
  3. }

CSS布局与定位

container

header navbar main menu content sidebar footer

盒子模型

概念

页面上 区域、图片、导航、列表、段落，都可以是盒子

组成

  • content 内容
  • height 高度
  • width 宽度
  • padding 内边距
  • margin 外边距
    margin border padding后面可以加top/bottom/right/left
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #box {
  5. width:100px;
  6. height:100px;
  7. border:1px solid;
  8. padding:20px;
  9. margin:10px;
  10. }
  11. </head>
  12. <body>
  13. <div id="box">
  14. 内容内容内容内容内容内容
  15. </div>
  16. </body>
  17. </html>

overflow属性

  • hidden 超出部分不可见
  • scroll 显示滚动条
  • auto 如果有超出部分，显示滚动条

border属性

  • border:width style color
  • border-width:px thin medium thick
  • border-style:dashed dotted solid double
  • border-color:颜色

padding属性

取值：px，%（外层盒子的宽度和高度）
可以使用-top,left,right,bottom

margin:1px 1px 1px 1px;外边距四个方向上都是一个像素

四个值分别是：上、右、下、左（顺时针）

当省略后两个值时，代表bottom与top相等，left与right相等

margin属性

对默认属性值进行清零

  1. * {
  2. margin:0;
  3. padding:0:
  4. }

浏览器在解析时，做了垂直方向上外边距的合并，合并取较大的值

div水平居中margin:0 auto;浏览器自动计算

案例

  1. <div id="newsimglist">
  2.   <img src="images/crisis.img" />
  3.   <img src="images/crisis.img" />
  4.   <img src="images/crisis.img" />
  5. </div>
  1. #newsimglist{
  2.   text-align:center;
  3.   font-size:0;/*否则图间有空隙*/
  4. }
  5. #newsimglist img{
  6.   height:100px;
  7.   width:100px;
  8.   margin-left:5px;
  9.   border:1px solid #0cf;
  10.   padding:5px;
  11. }

CSS定位机制

文档流 flow

<无特殊，从上到下，从左到右

元素分类

  • block
    独占一行
    元素的height、width、margin、padding都可设置
    常见的block元素：<div> <p> <h1>...<h6> <ol> <ul> <table> <form>
    将其他类型的元素显示为block元素

    1. a{
    2. display:block;
    3. }


  • inline元素a转换为block元素，从而使a元素具有块状元素特点。

  • inline
    不单独占用一行
    width、height不可设置
    width就是它包含的文字或图片的宽度
    常见的inline元素：<span> <a>
    显示为inline元素：display:inline
    inline元素的间距问题：

    1. <style type="text/css">
    2. a{
    3.   background:pink;
    4. }
    5. </style>
    6. <body>
    7. <a href="www.baidu.com">baidu</a>
    8. <a href="www.imooc.com">mooc</a>
    9. </body>


  • 两段粉色背景之间有间隙

  • Inline-block
    同时具备inline元素、block元素的特点
    不单独占用一行
    元素的height、width、margin、padding都可以设置
    例如：<img>
    显示为inline-block元素：display:inline-block

元素类型转换

display 属性

浮动定位 float

float属性

left 左浮动

right 右浮动

none 不浮动

  1. div{
  2.   width:200px;
  3.   height:200px;
  4.   border:1px solid red;
  5.   float:left;
  6. }
  1. <div id="box1"></div>
  2. <div id="box2"></div>

clear属性

both，清除左右两边的浮动

left和right只能清除一个方向的浮动

none是默认值，只在需要移除已指定的清除值时用到

侧栏向右浮动，并且短于主内容区域。页脚（footer）于是按照浮动所要求的向上跳到了可能的空间。

解决方法：

  1. #footer{
  2.   clear:both;
  3. }

层定位 layer

position属性

  • static 默认值
    没有定位，元素出现在正常的流中，left，z-index等元素不生效
  • fixed 固定定位
    相对于浏览器窗口进行定位 元素有效
  • ralative 相对定位
    相对于其直接父元素进行定位 元素有效
  • absolute 绝对定位
    相对于static定位以外的第一个父元素进行定位 元素有效

left属性

right属性

top属性

bottom属性

z-index属性

值大在上面

CSS3

概述

  • 新特性
  • 浏览器支持度

圆角边框border-radius属性

  • border-top-left-radius左上角的形状
  • 水平值、垂直值
  1. div{
  2.     width:350px;
  3.     height:50px;
  4.     border:2px solid #alalal;
  5.     background:#ddd;
  6.     border-radius:25px;
  7. }

阴影box-shadow属性

  • inset 水平偏移 垂直偏移 模糊距离 颜色
  • inset 可选，内部阴影
  • outset 默认值，外部阴影

text-shadow属性

text-shadow:水平偏移 垂直偏移 阴影大小 颜色

  1. h1{
  2.     text-shadow:2px 2px 8px blue;
  3. }

word-wrap属性

长单词、URL的换行

normal、break-word

@font-face属性

字体格式：ttf/otf eot svg woff

生成其他格式 http://www.fontsquirrel.com/tools/webfont-

  1. <style>
  2.     @font-face{
  3.         font-family:kastlerFont;
  4.         src:url('fonts/kastler.ttf'),
  5.             url('fonts/kastler.eot');
  6.     }
  7.     p{
  8.         font-family:kastlerFont;
  9.     }
  10. </style>

旋转transform:rotate()

transform:rotate(deg)

  1. div{
  2.     width:100px;
  3.     height:75px;
  4.     background-color:#ccc;
  5.     border:1px solid black;
  6. }
  7. #rotateDiv{
  8.     transform:rotate(30deg);
  9. }

快捷：trsf扩展

缩放transform:scale()

transform:scale(x,y)

x:水平方向缩放的倍数

y:垂直方向缩放的倍数，若省略，同x

0~1,缩小；>1放大

  1. .box:hover{
  2.     transform:scale(1.2);
  3. }

过渡transition

将元素的某个属性从”一个值“在指定时间内过渡到”另一个值“

transition：属性名 持续时间 过渡方法

transition-property：属性名|all 对哪个属性变化

transition-duration：持续时间

transition-timing-function：过渡使用的方法（函数）

值
linear 匀速
ease 慢快慢
ease-in 慢快
ease-out 快慢
ease-in-out 慢快慢 
  1. div{
  2.         height: 30px;
  3.         width: 100px;
  4.         line-height: 30px;
  5.         border-radius: 5px;
  6.         color: #000;
  7.         background-color: silver;
  8.         transition: all 1s ease;
  9.     }
  10.     div:hover{
  11.         color: white;
  12.         background-color: #45B823;
  13.     }

动画animation

  • 1）定义动画 @keyframes 规则（关键帧）
  • 2）调用动画 animation 属性
  1. <style type="text/css">
  2.     @keyframes mycolor {
  3.         0% {background-color: red;}
  4.         30% {background-color: blue;}
  5.         60% {background-color: yellow;}
  6.         100% {background-color: green;}
  7.     }
  8.     div:hover{
  9.         animation: mycolor 5s linear;
  10.     }
  11. </style>
  12. <body>
  13. <div>123</div>
  14. </body>
值 描述
animation
animation-name 引用@keyframes动画的名称
animation-duration
animation-timing-function 规定动画的速度曲线。默认是“ease”。
animation-play-state running|paused

3D变换

transform-style:preserve-3d

旋转

transform属性

rotateX()

rotateY() 角度deg

rotateZ()

透视

perspective属性

  • 父容器：旋转
    transform-style:preserve-3d
    transform:rotateY(69deg);
  • 舞台：透视关系
    perspective:100px

JS

使用方法

1、将JS代码嵌入在元素“事件”中

  1. onclick：当单机元素时所作的操作

<div id="" onclick="JS代码">xxx</div>

  1. <html>
  2.     <body>
  3.         <button onclick="console.log('Hello World');"><!--注意单双引号-->
  4.             打印消息
  5.         </button>
  6.     </body>
  7. </html>

2、将JS代码嵌入在<script>标记中

  • <script></script>
    允许出现在网页的任意位置处

    1. <html>
    2.   <body>
    3.       页头
    4.       <hr/>
    5.       <script>
    6.           document.write('<b>欢迎</b>');
    7.           console.log('脚本执行结束了...');
    8.       </script>
    9.       <hr/>
    10.       页尾
    11.   </body>
    12. </html>

  • 将JS代码写在外部脚本文件中（.js）
    1）创建JS文件，并编写JS代码
    .js
    2）在页面中引入JS文件
    <script src="js文件"></script>

    1. <html>
    2.   <head>
    3.       <script src="myscript.js"></script>
    4.   </head>
    5.   <body>
    6.   </body>
    7. </html>


  • 如果JS标签中已经引入了外部文件，则标签对内不能出现内容！

语法

语句

允许被JS引擎所解释的代码

  • 使用 分号 来表示结束
    console.log();
    document.write();
  • 大小写敏感
  • 英文标点符号
  • 由表达式、关键字、运算符 组成

注释

单行注释：//

多行注释：/* */

sublime text中 Ctrl+/

ECMA JS\DOM\BOM

ECMA JS

  1. var a = [1,2,3,4];/*数组*/
  2. var sum = 0;
  3. for(var i=0;i<a.length;i++){
  4.     sum += a[i];
  5. }
  7. document.write(sum);

DOM

  1. <html>
  2.     <body>
  3.         <p id="changeStyle">
  4.             通过DOM改变样式，字号变为24px。
  5.         </p>
  6.         <button onclick="document.getElementById('changeStyle').style.fontSize='24px'">
  7.             点击改变字号
  8.         </button>
  9.     </body>
  10. </html>

BOM

  1. <head>
  2.     <script>
  3.         function load(){
  4.             window.open('http://www.baidu.com','_blank','width=600,height=400,
  5.                         top=100px,left=0px')
  6.         }
  7.     </script>
  8. </head>
  9. <body>
  10.     <button onclick='load()'>
  11.         百度
  12.     </button>
  13. </body>

变量

语法

  1. var userName;
  2. var bookPrice = 25.5;

注意：声明过程中，尽量不要省略 var 关键字，否则声明的是“全局变量”

在console.log()或document.write()使用变量名 取代“”打印 变量stuName的值到控制台上

  1. var stuName="PP.XZ";
  2. console.log(stuName); -- PP.XZ
  3. console.log("stuName") -- stuName

一次性声明多个变量并赋值：var stuName="PP.XZ",stuAge=25,stuHeight;

  • 不允许使用JS的关键字和保留关键字
  • 由数字、字母、下划线以及$组成
  • 不能以数字开头
  • 尽量见名知意
  • 可以采用“驼峰命名法”

变量被声明，但没有被初始化过，为undefined

变量未声明，直接使用，为错误

变量的使用

  • 获取变量的值-GET操作 ```javascript var userPwd=’123456’;

console.log(userPwd); document.write(userPwd); var newPwd=userPwd;

  2. - 保存（设置）变量的值-SET操作
  3. ```javascript
  4. var oldPwd='123'
  6. oldPwd='456';
  7. oldPwd=newPwd;

数据类型

  • 数字类型
    可以表示32位的整数以及64位的浮点数
    整数：32位即4字节
    浮点数：即小数，64为，8字节
  • 字符串类型
    表示一系列的文本字符数据
    由Unicode字符，数字，标点组成
    Unicode下所有的字符，数字，标点在内存中都占2字节
    “张”.charCodeAt().toString16
    查看 字符 “张” 的十六进制 表现方式
    结果为：5f20
    \u4e00：汉字的起始字符
    \u9fa5：汉字的结束字符
    转义字符：1、\n 换行 2、\r回车 3、\t一个制表符
  • 布尔类型
    作用：用于表示 条件的结果
    取值：true false
    除条件判断外，做运算时，作为true=1,false=0运算
  • 空
    undefined 声明变量未赋值、访问对象不存在的属性
  • 未定义

隐式转换

  • 函数
    typeof()或typeof

    1. var num1 = 15;
    2. var s = typeof(num1);
    3. var s1 = typeof num1;

  • NaN
    Not a Nunber
    isNaN：判断 数据是否为非数字
    是不是一个数字
    结果为boolean类型
    结果为 true：不是一个数字
    结果为 false：是一个数字

所有的数据类型与string做 +运算时，最后的结果都是string

强制转换

  • toString()
    将任意类型的数据转换为string类型
    变量.toString();
    会得到一个全新的结果，类型为string

    1. var num=15;
    2. var str=num+"";

  • parseInt()
    作用：获取指定数据的整数部分
    语法：var result=parseInt(数据);
    注意：paraseInt，从左向右依次转换，碰到第一个非整数字符则停止转换。如果第一个字符就是非整数字符的话，结果为NaN。

  • parseFloat()
    作用：将指定数据转换成小数
    语法：var result = parseFloat(数据);
  • Number()
    作用：将一个字符串解析为number
    语法：var result=Number(数据);
    注意：如果包含非法字符，则返回 NaN

函数

  1. function 函数名(){
  2.     可执行语句;
  3. }

任何JS的合法位置处，都允许调用函数，语法：函数名称();

定义带参数函数

  1. function printInfo(userName,userPwd){
  2.     console.log('用户名：'+userName+'密码'+userPwd);
  3. }
  4. printInfo('Tom','123');

带返回值的函数

  1. function 函数名(0或多个参数){
  2.     //代码块
  3.     return 值;
  4. }
  5. var result = 函数名();

声明提前

JS在正式执行之前，会将所有var声明的变量和function执行的函数，预读到所在作用域的顶部，但是对变量的赋值，还保留在原来的位置处。

分支结构

if else 结构

  1. if(){
  2.    语句块;
  3.    }

if语句条件位置处，必须为boolean类型的值，如果不是bool类型的话，JS会在以下情况认为是false

0/0.0/""/null/undefined/NaN除此以外，一律为真

  1. if(){
  2.    语句块1;
  3.    }else{
  4.     语句块2;
  5. }
  1. if(){
  3.    }else if(){
  5.             }

switch-case

  1. switch(表达式){
  2.     case 值1:
  3.         语句1;
  4.         语句2;
  5.     case 值2:
  6.         语句1;
  7.         语句2;
  8.     default:
  9.         语句n;
  10. }

循环结构

  1. while(boolean表达式){
  2.     循环体语句;
  3. }
  1. do{
  2.     可执行语句;
  3. }while(boolean表达式);
  1. for(表达式1;表达式2;表达式3){
  2.     循环体语句;
  3. }

数组

创建空数组

var arr=[]; 或 var arr=new Array();

  1. var arr1 = [];
  2. var arr2 = [97,85,79];
  3. var arr3 = new Array();
  4. var arr4 = naw Array("Tom","Mary","John");

数组的length属性

length属性的值永远是最大下标+1

  1. var arr4 = new Array(10);
  2. console.log(arr4.length); //长度为10

数组的遍历

  1. var nums = [50,90,20,10];
  2. for(var i=0;i<nums.length;i++){
  3.     nums[i]+=10;
  4. }

获得倒数第n个元素：arr[arr.length-n]

数组缩容：减小arr.length的值，会删除结尾的多余元素。

关联数组

可自定义下标名称的数组

  • 创建空数组
  • 向空数组中添加新元素，并自定义下标名称
  1. var bookInfo = [];
  2. bookInfo['bookName']='西游记';
  3. bookInfo['price']='35.5';

遍历关联数组

  1. for(var key in hash){
  2.     key//只是元素的下标名
  3.     hash[key]//当前元素值
  4. }

数组API

1.1

String(arr)：将arr中每个元素转为字符串，用逗号分隔

固定套路：对数组拍照，用于鉴别是否数组被修改过

1.2

arr.join("连接符")：将arr中每个元素转为字符串，用自定义的连接符分隔

  1. //将字符拼接为单词
  2. var chars=["H","e","l","l","o"];
  3. console.log(chars.join("")); //Hello

固定套路： 1、将字符组成单词：chars.join(“”)->无缝拼接 扩展：判断数组是空数组：arr.join(“”)==”” 2、将单词组成句子：words.join(“”) 3、将数组换华为页面元素的内容： “<开始标签>”+arr.join(“</结束标签><开始标签>”)+”</结束标签>”

拼接和选取

不直接修改原数组，而返回新数组

concat()拼接两个或更多的数组，并返回结果

var newArr=arr1.concat(值1,值2,arr2,值3,...)

slice()返回现有数组的一个子数组

var subArr=arr.slice(starti,endi+1)选取arr中starti位置开始，到endi结束的所有元素组成新数组返回

强调：凡是两个参数都是下标的函数，都有一个特性：含头不含尾

  1. var arr1 = [10,20,30,40,50];
  2. var arr2 = arr1.slice(1,4); //20,30,40
  3. var arr3 = arr1.slice(2); //30,40,50
  4. var arr4 = arr1.slice(-4,-2); //20,30

选取简写： 1、一直选取到结尾，可省略第二个参数 2、如果选取的元素离结尾很近：可用负数下标 3、复制数组：arr.slice(0,arr.lenngth);可简写为arr.slice();

修改数组

删除：splice直接修改原数组

arr.splice(starti,n);

删除arr中starti位置开始的n个元素不考虑含头不含尾

var deletes=arr.splice(starti,n);

返回值deletes保存了被删除的临时数组

插入：arr.splice(starti,0,值1,值2,...)

替换：arr.splice(starti,n,值1,值2,...)

颠倒：arr.reverse()

排序

排序API：

arr.sort()：默认将所有元素转为字符串再排列

问题：只能排列字符串类型的元素

解决：使用自定义比较器函数

DOM查找

按ID属性，精确查找一个元素对象

  1. var elem=document.getElementById("id")

强调：getElementById只能用在document上

何时：只用于精确查找一个元素

问题：不是所有元素都有ID

例：

  1. <ul id="myList">
  2.     <li id="m1">首页</li>
  3.     <li id="m2">企业介绍</li>
  4.     <li id="m3">联系我们</li>
  5. </ul>
  1. var ul = document.getElementById('myList');
  2. console.log(ul);

按标签名查找

  1. var elems=parent.getElementsByTagName("tag");

查找指定parent节点下的所有标签为tag的子代节点

强调：可用在任意父元素上、不仅查直接子节点，而且查所有子代节点。返回一个动态集合，即使只找到一个元素，也返回集合，必须用[0]取出唯一元素。

问题：不但找直接，而且找所有子代。

  1. <ul id="myList">
  2.     <li id="m1">首页</li>
  3.     <li id="m2">企业介绍</li>
  4.     <li id="m3">联系我们</li>
  5. </ul>
  1. var ul = document.getElementById('myList');
  2. var list = ul.getElementsByTagName('li');
  3. console.log(ul);

通过name属性查找

  1. document.getElementsByName('name属性值')

可以返回DOM树种具有指定name属性值的所有子元素集合

  1. <form id="registerForm">
  2.     <input type="checkbox" name="boy"/>
  3.     <input type="checkbox" name="boy"/>
  4.     <input type="checkbox" name="boy"/>
  5. </form>
  1. var list = document.getElemenrsByName('boy');
  2. console.log(typeof list);

通过class查找

查找父元素下指定class属性的元素

var elems=parent.getElementsByClassName("class");

有兼容性问题：IE9+

  1. <div id="news">
  2.     <p class="mainTitle">新闻标题1</p>
  3.     <p class="subTitle">新闻标题2</p>
  4.     <p class="mainTitle">新闻标题1</p>
  5. </div>
  1. var div = document.getElemntById('news');
  2. var list = div.getElementsByClassName('mainTitle');
  3. console.log(list);

通过CSS选择器查找

只找一个元素

var elem=parent.querySelector("selector")

强调：selector支持一切css选择器

强调：如果选择器匹配的有多个，只返回第一个

找多个

var elems=parent.querySelectorAll("selector")

强调：selector API 返回的是非动态集合

DOM修改

读取属性值

var value=elem.getAttribute("属性名");

修改属性值

  1. var h1 = document.getElementById("a1");
  2. h1.setAttributeNode("name",zhangji);

判读是否包含指定属性

var bool=elem.hasAttribute("属性名");

document.getElementById('bt1').hasAttribute('onclick');

移除属性

elem.removeAttribute("属性名");

修改样式

内联样式：elem.style.属性名

强调：属性名：去横线，变驼峰

比如：css:background-color => backgroundColor、list-style-type => listStyleType

DOM添加

1、创建空元素

2、设置关键属性

3、将元素添加到DOM树

创建空元素

var elem=document.createElement("元素名")

  1. var table = document.createElement('table');
  2. var tr = document.createElement('tr');
  3. var td = document.createElement('td');
  4. var td = document.createElement('td');
  6. console.log(table);

设置关键属性

a.innerHTML=”go to tmooc”

a.href=”http://tmooc.cn“

设置关键样式

a.style.opacity=”1”;

a.style.cssText=”width:100px;height:100px”;

将元素添加到DOM树

parentNode.appendChild(childNode)

可用于为一个父元素追加最后一个子节点

  1. var div = document.createElement('div');
  2. var txt = document.createTextNode('版权声明');
  4. div.appendChild(txt);
  5. document.body.appendChild(div);

parentNode.insertBefore(newChild,existingChild)

ul.insertBefore(newLi,ul.lastChild);

添加元素优化

如果同时创建父元素和子元素，建议在内存中先将子元素添加到附院估算，再将父元素一次性挂到页面

如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中，再将文档片段整体添加到页面

  1. var frag=document.createDocumentFragment();
  2. frag.appendChild(child);
  3. parent.appendChild(frag);

强调：append之后，frag自动释放，不会占用元素

BOM

周期性定时器

setInterval(exp,time)

  1. var timer= setInterval(function(){
  2.     console.log("Hello World");
  3. },1000)
  1. clearInterval(timer);

一次性定时器

让程序延迟一段时间执行

setTimeout(exp,time);