标签：indent inline 占用 eset false 定义 滚动 组成 cond
http://www.jianshu.com/p/bee295965800 chrome开发者工具
第一章
一、发展
netscape--livescript+sun=javascript
二、特征
客户端脚本语言，安全性较高，嵌入式语言，松散型（弱类型），解释型。
三、应用
1.业内式
<script type="text/javascript">
...
</script>
2.
<script type="text/javascript" ref="路径,js文件">
3.页内式
<p onclick="JS代码"></p>
四、web标准
1.结构:页面实体 HTML（超文本标记语言）
2.表现:CSS（样式表）
3.行为:DOM（JS文档对象模型）
****结果表现行为，三者分离。
第二章 结构性语言-HTML
一.分类
XML:可拓展标记语言
html:
XHTML:可拓展超文本标记语言
二、语法
<标签名>...</标签名>或<标签名/>
前者：一般标签
或者：空标签
note：标签不允许交叉
三、常用标签
1.文档结构类
<html></html>:声明文档类型
<body></body>：声明文档内容（可见）
<head></head>：声明文档信息（不可见）
2.区段格式标签
<p></p>：自然段
<br />：断行
<title>...</title>：页面标题（唯一，head）
<hi></hi>：（i=1~6）：文字标题（值越小，级别越高。body）
<hr />：水平分割线
<pre></pre>：文字格式化标签（所见即所得）
3.图片标签
<img />
src 路径
alt 文字替换
width 宽
height 高
4.****列表
1)有序列表 <ol>...</ol>
列表项<li>...</li>
2)无序列表 <ul>...</ul>
列表项<li>...</li>
3)自定义列表 <dl></dl>
自定义列表项 <dd></dd>
标题<dt></dt>
5.表格
<table></table>:表格
<tr></tr>：行
<tb></tb>:单元格
属性：
border:边框
width :宽（绝对单位（PX），相对单位（%））
表格高度由单元格高度决定。
6.锚标签（定位）
<a></a>
属性：
href:链接目标。
target:链接目标打开方式。（_blank链接目标在新窗口打开。）
7.表单。（控件）
1.表单域
<form></form>
2.输入类控件
<input type="" />
type 属性：
type="text":单行文本框。
type="password":掩码
type="radio" :单选框 (通过ID与NAME属性，控制单选框唯一性。)
type="checkbox":复选框
type="file" :文件域
type="submit" :提交按钮 （value属性：默认值属性，可用于text,password,textarea,所有按钮）
type="reset" :重置按钮，清空表单（针对form内元素）
type="button" :普通按钮
补充：
disabled：禁用
size ：控制文本框的宽度。
maxlength：最大字符个数.
3.下拉列表框
<select></select>
<option><option> : 列表项
(
selected :下拉列表默认选择状态。
size : 控制列表高度。
multiple :复选（多选）
)
4.文字域
<textarea></textarea>
rows:控制文字域行数。=高度。
cols:控制文字域列数。=宽度。
第三章 层叠样式表
一、CSS概念
1.组成
选择器、属性值、值
2.语法格式
选择器{ 属性:值; }
note：
所有符号均为英文半角，选择器首字母不能用数字。
二、选择器分类****
1.基本选择器
1）标签选择器：针对同类标签生效，以标签名命名。
2）类选择器 ：针对个别元素，跨元素，1：多。自定义名称（用.声明，class调用）。
3）id选择器 ：针对个别元素，1:1，自定义名称。（用#声明，id调用）
优先级：id>类>标签
2.复合选择器
1）交集选择器：同时满足两个条件。
p.no2{} table.#abc{}
2）并集选择器：群组声明
h1,h2,h4,h3,.no2{}
3）后代选择器：通过制定祖先查找子元素，用空格区分。
table h3{}
note:特殊选择器
*:通配选择器，声明页面中所有元素。
三、常用CSS属性。
1.盒子模型。*****
width：内容宽度，不包含边框。
heidth：内容高度,不包含高度。
padding：内边距。
margin ：外边距。
border ：边框。
note:
margin与padding的简写方案
四个值：上，右，下，左。
两个值：上下，左右。
三个值：上，左右，下。
boder-wigth:边框宽。
boder-style：边框样式.
boder-color：边框颜色.
补充属性：
display:block\inline\none；控制元素的显示方式，块\行\隐藏。
**：行级元素不具备，宽高特征。
盒子模型水平距离：由相邻外边距之和决定.
垂直距离：塌陷，两个外边距最大的外边距决定。**
实际宽度=width+boder+margin+padding
2.文字属性。
font-family：字体
font-size :字号 px,pt ,%,em
color :字色。
line-heigth：行间距（% em）
font-weigth：文字加粗。（bold，bolder）
font-style ：倾斜.
text-align ：对齐方式。（left\right\center）
text-indent：首行缩进。
text-decoration:文字修饰.
3.背景属性。
background-color：背景色（纯色）
backgruoud-imag:url(图片地址) 背景图片。
background-repeat：背景的重复控制(repeat-x/y,no-repeat)
background-position:背景定位（后跟两个值）.
4.列表属性。
list-style-type:none;列表无修饰符。
5.浮动*****
float：left\right\none;
特点：
1.丢失宽度,变为仅能容纳内容的最小宽度。
2.丢失位置，后续元素取代其位置。
3.后续元素的内容，环绕前一个浮动元素显示。
clear:请出浮动不良效果（left\right\both）
空白DIV法：最后一个浮动元素后方,让其装载clear属性，解决自适应高度问题。
6.层定位模型
position:relative(相对定位)/absolute(绝对定位)
note:要想实现唯一，要结合方位属性(距离).
1.相对定位
相对原有位置进行位移。
对同级元素无影响。原位置保留。
2.绝对定位
位置丢失，宽度丢失。
定位参照物：距离它最近的，具有定位属性的，祖先元素。如没有，则以浏览器边界定位。
可实现层叠效果（可调整位置）。
补充：层叠位置属性
z-index:Z轴索引（数值）， 前提：层叠元素必须都是绝对定位。数值越大越靠前。
四、效果应用
1.布局效果。
2.链接效果。（伪类选择器）
:link 正常状态
:hover 触发状态
:active 激活状态
:visited浏览后状态
1)控制链接外观。
2）多种连接效果并存。
方法：为要指定特殊效果的链接指定class名，使用a.名称声明。
补充：（L-V-H-A）要按照这个次序指定外观。
补充：overflow:hidden(溢出后隐藏)/scroll(添加滚动条)
块级元素居中：
选择器{ margin:0px auto;}
第三部分-JS语法。
1.语法
1）严格区分大小写。
2）自定义名称：首字母必须字符，下划线，$,
2.注释：//，/* */
3.字面量/直接量/常量
4.保留字与关键字
5.变量。JS是弱类型语言，声明变量时不能声明数据类型，
用var声明，局部变量；
不用var声明。默认为全局变量；
变量类型由值决定、
二、数据类型
1.typeof:检测变量类型；
alter() 弹出警告框。
prompt("","") :弹出输入框。(提示文字，默认值)
onfocus:获取焦点
onblur:失去焦点。
2.Undefined:变量未初始化类型。
与not defined区别：
Undefined:有变量，无值，正常；
not defined:无变量，报错;
3.Null:空对象引用。（空指针），null
null
no :CSS中代表不
not ：取反。
none ：CSS中代表无
NaN ：not a number
4.boolean：布尔型。
1）注意事项
该类型与其他类型都有对应关系。
字符串：非空串==true 空串==false。
数值： 非零==true 0==false NaN==false
隐式转换 ：自动进行的类型转换。
2）涉及函数
Boolean():显性的将其他类型转换为布尔型。
5.number:无整形与浮点型，统称数值型。
1）进制
二：0 1
八：0~7
十：
十六：前导0x 后导0~9或A~F
2)浮点声明与运算
声明方式 ： var a=3.6 ,b=0.8,c=.7
运算特征：精确到十七位（慎用）
3）NaN ：非数值 not a number
InFinity:正无穷。
-InFinity:负无穷。
4)涉及函数
Number()：将其他类型转换为数值型
parseInt():将字符串或数值，转换为数值型；
(1)类型转换 (2)进制转换--8||16
(3)配合参数，可做任意进制转换
parseFloat():将字符串转换为浮点数值
6.string：字符串，是JS中，最基本的数据类型；
1）注意事项
""==‘‘,但不能交叉
2）转义字符 : <左尖括号< 右尖括号
\"代表输出双引号
\‘代表输出单引号
\n换行
note:
<左尖括号<
>右尖括号>
 :文字占位符
document.write("..."):向HTML输出，解析后显示
3）涉及方法
.toString(参数):将数值转换为字符串，参数代表进制
平方根Math.sqrt
note:补充方法
Date():当前系统时间对象
.getYear():年份1900-1999
.getFullYear():年份*****
.getMonth():月份，注意比正常少一个月
.getDay:星期数
.grtDate():日期
.getHours():小时
.getMinutes():分钟
.getSeconds():秒
平方根Math.sqrt()
Math.max():最大值
Math.min()：最小值
Math.random():介于0~1间的随机小数
三.运算符
1.
=：赋值
==：等于，字面含义判断
===：全等，数据类型必须一致
2.一元运算符：只有一个操作数
++ --
++a
3.三元（目）运算符：简化版的if语句
？：
x>y?x:y
4.求余数：% mod
4.优先级（见课件）
=========================================================================================================
第二部分 流程控制语句
一、语句构成：由一个或多个关键字组成，实现指定任务（如循环、判断...）
二、语句形式：
单行语句：if（） alter（“”）
复合语句：代码块。{...}当做一条语句处理。
三、语句分类
1.声明语句：
var box=100；
label：box；
2.表达式语句
box=100；
box（）；函数表达式；
box.property=100 属性表达式；
box.method（）；方法表达式
3.分支语句（判断语句）
1）if（）...单路分支
2）if（）...else...双路分支。
3）if（）...else if（）...else if（）... else... 多路分支
4）switch（表达式或值）{
case n:...
}精确型判断的多路分支。
note：常结合break,default来使用；
4.循环语句
1.for(赋值语句；判断语句；运算语句) {循环体}
2.while(条件表达式) { 循环体，带运算语句 }
3.do{循环体...} while（条件表达式）;
4.for in :枚举对象中的所有属性名
5.控制语句
break: 跳出循环；
countiue:跳出当前循环，进入下次循环；
try catch:
6.其他语句。
；空语句。
with:将语句功能定义到一个对象当中。（工作范围）
第三部分 函数
特征：
1）封装 2）重复调用
一、函数声明
1.普通声明:
function 函数名（）{...}
not：
匿名函数：
function (){...}
触发：
window.onload=function(){} 当窗体所有内容加载完毕，才可触发
document.事件=function{}{} 当前页面文档
2.带参数的函数声明
function 函数名(形式参数序列){...}
形参：决定运算过程。
实参：实际参与运算。
二、return
1.将运算结果返回到调用函数的位置（传值）
2.停止函数运行。
3.JS中，return false可停止html元素的默认动作。(表单的提交，超链接的跳转)
三、arguments参数
*****
JS中，函数不在乎实参与形参的个数及对应关系。
四、
.getElementById()通过ID名，或许页面中唯一元素。
.length :返回字符串长度
.indexOf() :检测字符在串中出现的位置;
1.检测首次出现的位置，下标从0开始。
2.如检测字符串，则返回首字母位置。
3.返回值为非负整数。如反馈-1，则没找到。
.focus() :获取焦点
.substring(数值1，数值2) :截取字符串。[数值1，数值2)。数值2可省略。
.isNaN :判断是否为非数值。
.innerHTML :获取（改写）指定HTML标签中的所有内容、
与value的区别，value只获取元素的值，innerHTML获取标签内所有元素。
==========
一、setTimeout("code",time):延迟执行，仅执行一次.
time:单位毫秒。延迟多长时间。
code:
1.如果是代码或基本语句，则用""声明。
2.如果是函数。
1）无参数，直接用函数名声明。 setTimeout(box,1000)
2）如有参数，或以函数表达式方式书写. setTimeout("box()",1000)
配套：clearTimeout(延迟对象名称)
二、setInterval("code",time):间隔执行（重复执行。）。
note：警告框会占用浏览器运行线程，中断（暂停）后台其他线程
.style:声明对象的某个属性。 （HTML样式）
.className：为HTML对象增加一个类名。（CSS样式）
confirm("string") :确认框。
确认==true
取消==false
递归：自身调用自身
迭代：自身的值由自身运算得到。
.scr:对象元素（图片）的路径。
disabled:控制对象元素是否禁用
==============================================================
数组：
1.new方法声明
var box=new box object
2.字面量（常量）
var box{
name:zhangsan,
age:18
}
3.传统方式
var box{}
box.name="zhangsan"
4.属性输出方法
对象名.属性名 == 对象名[‘属性名‘]
2、给对象创建方法（自定义方法）
通常使用匿名函数方式创建。
3、删除对象属性
delete 对象名.属性名
二、array类型
js中数组的特点：
1.同一数组中元素，不限定类型。
2.配合各种方法，对数组或元素进行，正，删，改，查，接
1.声明方法
1.new运算符
var box=new Array(); //空数组
var box=new Array(10); //指定长度数组
var box=new Array(1,"jhj",5) //指定内容数组
note：
使用alert和write方法输出时，数组会自动转换为字符串。
2.传统方法
var box=[]
var box=[10] //数组中只有一个元素10，该方法不能预定义长度。
box.length=10 定义数组长度
2.读取或修改数组内容
读取：结合下标
修改：通过赋值表达式。
3.使用length属性获取数组元素量
1.控制数组长度。
2.将指定内容追加至数组末端。 box[box.length]="123456666"
4.转换方法
隐式转换：使用alert或write.
显式转换：
.toString()：转换为普通字符串，功能偏向于显示
.toLocaleString()：同上，但针对时间有异
.valueOf():转换为原始格式，功能偏向于运算。
5.join()方法：用特殊字符替换间隔符
6.栈方法：先进后出
push():将新元素从末端追加进数组当中，返回新长度
pop():从末端删除一个元素，返回删除内容
7.队列方法：先进先出
shift():从首端删除一个元素，返回内容
unshift():从首端追加新元素，返回长度
8.重排序方法
reverse():倒序排序
sort():由小到大，按字符串格式排序 23,1,7,45，js ----1,23,45，js
9.其它操作方法
concat():
1)数组连接
2）从末端追加元素，产生新数组
silce(start[,end]):截取数组元素对象，对原数组无影响 []可省略
note:结束位不包含在范围
splice(start,num[,元素]):
1)截取数组元素，按个数获取，修改原数组
2)插入数组元素
3)替换
==========================================================================================
BOM(浏览器对象模型)
note:BOM兼容性有问题。
i:ie , F:firefox C:chrom
一、window对象
属性：
defaultStatus :默认状态栏信息 （I）
status : 自定义状态栏信息 （I）
opener :父级对象
screenLeft :浏览器水平坐标 （I,C）
screenX :同上 （C，F）
screenTop : 浏览器垂直坐标。
属性及方法：
print():调用打印命令。（IFC）
find():查找命令框 （F）
open("url"[,打开方式或窗口名称][,外观]):新建window对象
close():关闭window对象
----------------------------------
IE私有对象：
moveTo(x,y):移动到指定坐标点。
moveBy(x,y):参照当前位置位移。
resizeTo(): 更改到指定大小。
resizeTo(): 参照当前尺寸缩放
二、location对象
属性：
hash:#后
location.hash
moudle=welcome.WelcomeModule%7C%7B%7D
host:主机名+端口号
location.hostname
mail.126.com:80
prot:端口号
location.prot
80
href:完整的URL
location.href="http://www.qq.com"
*****search:?后
location.search
pathname:路径名
protocol:网络协议
location.protocol
http
https:加密的超文本协议
方法：
assign(url):加在新页面替换本页面
reload([False]):从本地缓存刷新页面(快，旧)
reload([true]):强制从服务器刷新页面==F5（新，慢）
replace(url):用地址替换当前地址
三、history:历史记录
属性：
length:当前窗体的历史记录
方法：
forward():前进一页
back():后退一页
go(num):跳转指定步数
正值：前进
负值：后退
0：刷新本页
四、navigator对象：返回浏览器信息
属性：
appCodeName:浏览器名称代码
appVersion:当前浏览器版本号
appName:浏览器名字
cookieEnabled:电脑中的浏览器是否支持本地缓存 文件缓存 信息缓存
platfrom:当前系统平台 win32
方法：
javaEnabled():是否支持java 谷歌不支持支持简单的应用，火狐不支持 IE支持
五、screen对象:返回屏幕信息
width：
height ：
availWidth:实际可用分辨率
availHeight：
colorDepth：判断颜色位数，一般都是24，IE=24+8（强调alpha）
补充：
一：open与close经典问题！
1.colse()无法关闭页面
close只能关闭open/脚本打开的页面
2.open传值
如果使用getElement系列方法时，要考虑加在顺序因素
note:谷歌chrome和苹果safari都为webkit内核,本地测试JS不准，除非在服务器状态下
五、screen对象 ：返回屏幕信息
===========================================================
事件入门
事件：当用户操作软件时，所采取的一系列操作。
一、内联事件（内联模型） -慎用-
事件处理函数被当做HTML属性应用。
<input type="button" value="内联" onclick="javascript:alert(‘12346‘)">
优：直观
缺：违背了web标准，结构与行为混用
二、脚本事件（脚本模型）*****
优：实现web标准，便于维护，对象操作。
note：
1.对象.事件处理函数（onclick）=函数名;
2.对象.事件处理函数=function(){
...js代码块
}
三、事件处理函数
1.鼠标事件：
onclick : 鼠标单击
ondblclick ：鼠标双击 double click
onmousedown：鼠标摁下
onmouseup ：鼠标弹起
onmouseover：鼠标覆盖
onmouseout ：鼠标移出
onmousemove：鼠标移动
2.键盘事件：
onkeydown ：键盘任意键摁下
onkeypress：按任意字符键
onkeyup ：按键抬起
3.HTML事件
onload ：加载完毕
onunload：卸载完毕
onfocus ：获得焦点
onblur ：失去焦点
onselect：选中文字时（单行或多行文本框）
onchange：值改变时 （同上）
onsubmit：表单提交时
onrest ：表单重置时
note:仅适用于<form>对象
onscroll：滚动条滚动时
onresize：窗口大小改变时
note：仅适用于window对象.
===================================
DOM（文档对象模型）---节点树
一、结点分类
1.元素结点 标签
2.属性结点 标签中的属性
2.文字结点 连续的字符串
二、获取结点的方法
1. .getElementById():唯一性
.tagName :标签名
.id :ID值
.innerHTML :元素节点中的内容
.className :类名
.style :控制外观
2. .getElementsByTagName(‘标签名‘) ：获取多个标签元素，返回数组集合
note：如要精确指向，必须配合数组下标。
.getElementsByTagNmae(‘标签名‘)[0]
.getElementsByTagName(‘标签名‘).Item(0)
3. .getElementsByName(‘name属性值‘) :同ByTagName
4. .getAttrubute():获取属性结点
5. .setAttruibute(‘属性名‘,‘属性名‘) :设置属性节点
note:4.5ie7以下不支持
二、DOM节点关系（指针）
1.获取子节点 :childNodes 配合下标使用
2. .firstChild : 获取第一个节点 childNodes[0]
3. .lastChild : 获取最后一个节点
4. .parentNode : 指向当前节点的父节点
5. .previousSibling: 上级节点
6. .nextsibling : 下级节点
7. .ownerDocument : 指向根节点 ===document
8. .attributes : 指向当前节点的属性,返回数组对象
补充：
.nodeName
元素--标签名 属性---属性名 文本---#text
.nodeType
元素--1 属性--2 文本--3
.nodeValue
元素--NULL 属性--属性值 文本--字符串
*****note：
空字符串或换行都被chrome和FF认为是文字节点
三、节点操作 增，应用，删，复制，替换
1.新建节点
1）document.write("<p>123</p>") :缺点：不稳定，在某些情况下，该方法输出会覆盖原有节点
2) .createElement(‘标签名‘)
2.向某个节点末端追加节点 ：appendChild(‘节点对象‘)
3.创建文本节点： .createTextNode("连续字符串")
note：新建完的节点，都驻留在缓存中，因此要用插入方法插入到界面。
4. .insertBefore(‘节点对象‘,‘节点位置‘)：在节点位置前插入节点
5. .replaceChild(‘新节点‘,‘旧节点‘) ： 替换子节点
6. .removeChild(‘节点‘) ：删除子节点
note：5and6，要想实现自我操作，必须要将节点指针移到父节点上操作。
7. .cloneNode(‘bool‘) :复制节点
true:包含子节点
false:不包含子节点，只有结构
补充：
.hasChildNodes:判断是否包含子节点，返回布尔值
标签：indent inline 占用 eset false 定义 滚动 组成 cond
原文地址：http://www.cnblogs.com/Zhang-silence/p/6391273.html
