JavaScript
1.JS和DOM的关系
浏览器有渲染html代码的功能，把html源码在内存里形成一个DOM对象，就是文档对象
浏览器内部有一个JS的解释器/执行/引擎，如chrome用v8引擎
我们在html里面写一个JS代码，JS代码被引擎所执行，而执行的结果就是对DOM的操作，也就是我们常看到的特效，比如 图片漂浮，文字变色
浏览器执行时，遇到html代码就渲染，遇到js就解释执行，所以为了保证页面整体的显示，一般把js写在最后，即先渲染页面，再操作DOM
2.变量的声明
var name = 'jquery';
注:
严格区分大小写;
变量名称:数字,字母,下划线.其中数字不能作为变量名称的起始.变量名称也可以以$来作为起始(不建议使用)
不使用var 会污染全局变量;
加var 表示在函数内部声明一个局部变量并且赋值，若没有则单单是个赋值过程，会往外一直找这个变量
调试：
console.log();
document.write(string);
alert(string);
3.变量类型
三大类(八种数据类型)
- 传统类型
Number(数值类型)
String(字符串类型)
Boolean(布尔类型)
- 复合类型
Object(对象类型) 类似php中的关联数组{name: 'tom', age: 18}
Array (数组类型) ['a', 3, true] 不管中途去掉某个值，索引始终从0...N编排
Function(函数类型)
- 特殊类型
undefined (未定义类型)
若声明变量时,没有赋初值.此时变量数据类型为undefined.
没有原生数据
null
自定义函数
可以重复执行的代码段.
函数的组成:
1.函数名称
- 数字,字母,下划线,数字不能作为函数名称的起始.
- 函数名称要尽量起的有意义.函数名称建议采用小驼峰式命名规则.
2.参数(可选),一个函数最多有255个参数.
3.函数体.
4.返回值(可选)
函数的声明
1.function 函数名称([参数...]){
函数体;
返回值;
}
2.var 函数名称 = new Function(参数...函数体);
3.匿名函数
var test = function([参数...]){
函数体;
返回值;
}
函数的调用
1.直接用函数名称在代码段中调用.
2.以超链接的形式调用自定义函数.
例如:
3.以事件形式调用自定义函数.
变量的作用域
全局作用域和局部作用域
1.全局作用域
在函数体外声明的变量,作用域是全局作用域.
2.局部作用域
在函数体内声明的变量,作用域是局部作用域.
4.运算
按照运算功能来划分
-算术运算
+ - * / % ++ -- +(正) -(负)
-逻辑运算(JS，逻辑运算，返回的是最早能判断表达式结果的那个值)
&& || !
-比较运算
> < >= <= != === !== ==
-赋值运算
= += -= *= /= %=
-连接运算(一旦遇到非法数字时，后面的一律理解为“拼接”)
+
按照参加运算数目来划分
- 单目运算
++ -- +(正) -(负) !(非)
- 双目运算
- 三目运算
exp1?exp2:exp3
当exp1为真时,执行exp2,否则执行exp3.
5.分支语句
if
if...else...
if...else if....
switch()
6.循环
for
while
do...while...
while和do...while的区别:
do...while循环是在循环条件不满足的情况下也会执行一次循环体.while在循环条件不满足的情况下不执行循环体.
7.JavaScript内置对象
js中一切都可以理解为对象，在调用方法时，那一瞬间被包装成对象
1.对象的声明
var o = new Object();
var o = {};
var o = {name:'tom',age:10}
2.对象中访问成员的方法
对象名称.对象中的成员(属性和方法)
- 字符串对象
var s = new String();
var s = new String("hello");
var s = "hello";
属性和方法
属性:
length 获取字符串的长度
方法:
对象.indexof(子字符串)
功能:判断子字符串在对象中首次出现的位置.从0开始
返回:位置.若子字符串在对象中没有出现,则返回-1.
对象.toUpperCase();
功能:将对象转换为大写
对象.toLowerCase();
功能:将对象转换为小写
对象.substr(start [,length])
功能:字符串的截取.从start位置开始截取length长度.
length可选参数不给默认截取到字符串尾.
对象.slice(start[,end])
功能:字符串的截取.从start位置开始截取,截取到第end位置为止.end可选参数不给默认截取到字符串尾.
对象.replace(str1,str2)
- 数组对象
声明:
var a = new Array();
var a = [];
var a = new Array('team',1);
var a = ['team',1...];
var a = new Array(7); //7 是数组的长度
数组的输出:
document.write(数组的名称);
数组的赋值
a[0] = 'nico';
属性:
length 数组的长度
方法:
数组对象.concat(数组对象)
功能:连接两个数组对象.
返回:新合并的数组,新数组中元素的顺序取决于合并时两个数组的顺序.
数组对象.pop()
功能:将数组对象中的最后一个元素弹出.
返回:被弹出(删除)的数组元素.
数组对象.push(数组元素)
功能:向数组末尾添加元素.
返回:被添加元素后的数组的长度.
数组对象.shift()
功能:弹出数组头部一个元素
返回:被弹出的数组元素.
数组对象.unshift(元素名称)
功能:向数组的头部添加元素
返回:被添加元素后的数组的长度.
数组对象.join(',')
数组对象.split(',')
数组对象.reverse()
数组对象.sort()
- 日期对象
var d = new Date()
方法:
对象.getFullYear()
功能:获取四位的年份
对象.getMonth()
功能:获取月份,月份(0~11)
对象.getDate()
功能:获取日
对象.getHours()
功能:获取小时数
对象.getMinutes()
功能:获取分钟
对象.getSeconds()
功能:获取秒值.
对象.getDay()
功能:获取当前的星期值(0周日~6周六)
- 数学(Math)对象
没有实例化，相当于PHP中的通过类名静态调用
属性:
PI 派值
方法:
Math.ceil(变量)
功能:向上取整
Math.floor(变量)
功能:向下取整
Math.round(变量)
功能:四舍五入
Math.abs(变量)
功能:取绝对值
Math.random()
功能:返回伪随机值.大于等于0小于1 [0,1).
Math.max(变量..)
功能:返回变量中的较大者.
Math.min(变量..)
功能:返回变量中的较小者.
8.浏览器window对象
注：window对象是浏览器宿主对象 和JS语言无关
window对象的方法：
window.alert(message);
window.confirm(message);
window.prompt();
window.open();
window.close();
window.print();
window.setInterval();
window.setTimeout();
window.clearInterval();
window.clearTimeout();
window对象的子对象：
1.navigator 浏览器信息对象
2.location 地址栏对象
3.history 历史记录
4.screen 屏幕对象
5.document 对象（DOM对象）
6.存储对象
Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
9.DOM对象操作
DOM(Document Object Model 文档对象模型)
Document HTML/XML
XML
eXtensionable Markup Language
(扩展标记语言)
用途:信息的记载和传递.
特点:不作为.
Object 将HTML转换为JavaScript对象.
Model 模型
找对象
- document.getElementsByTagName(HTML tag标签)
返回:对象组成的数组.
- document.getElementsByName(HTML标签的name属性值)
返回:对象组成的数组.
- document.getElementById(HTML标签的id属性值)
返回:对象.
- document.getElementsByClassName(HTML标签的class属性值)
返回:对象组成的数组.
window.document为什么可以省略前面的window?
答：还是作用域的问题，内部找不到往外层找，全局下有window.document
Model 模型
如果将HTML文档视为一个倒置树型结构.那么文档中的HTML标签,文本,注释,属性都可以被视为树型结构上的节点.节点之间是有关联的.找到其中的一个节点.就可以找到树型结构上的全部节点.
注：一个空白、注释都是一个节点；
节点:节点名称(nodeName),
节点类型(nodeType).
有些节点有节点值(nodeValue).
父节点: 节点对象.parentNode
子节点:
节点对象.childNodes 返回数组（包含空白节点）
节点对象.children 非标准属性，但兼容很好，不包括空白节点
节点对象.firstChild
节点对象的第一个子节点
节点对象.lastChild
节点对象的最后一个子节点
同胞节点:
节点对象.previousSibling
上一个同胞节点
节点对象.nextSibling
下一个同胞节点
document.createElement(HTML tag 标签)
功能:创建新的HTML对象
返回:对象
父对象.appendChild(子对象)
功能:将子对象添加到父对象中.
父对象.removeChild(父对象.lastChild)
功能:删除对象的最后一个子节点.
操作对象
属性
1.属性的读取
对象.属性名称
2.属性的修改
对象.属性名称 = 属性值
文本
1.读取
对象.innerText
对象.innerHTML // 标签内的所有html代码
2.修改
对象.innerText = 修改的文本
对象.innerHTML = 修改的文本
innerHTML解析HTML标签,innerText不解析HTML标签.
样式
1.读(因为style属性后面还是对象,所以要用 . 继续访问，且只能去读内连样式的值，无法读取
0 
0
1203