JavaScript -小记

JS引入方式：
1、内嵌方式
2、外链方式

js实现幻灯片（图片播放）

常见变量命名：
1、驼峰式
2、帕斯卡：每个单词的首字母大写
3、匈牙利：属性+类型+对象描述   ,G_Str_w3c

window中常用的提示框：
1. alert
2. confirm
3. prompt

数据类型：
1. 原始数据类型
存放在栈中，变量与其值存放在一处

undefined、null、number、string、boolean

2. 引用数据类型-复合数据类型

typeof -- 查看数据类型

条件控制：
if、switch（支持字符串的）、三元运算、

循环控制：
while
do...while
for
for...in  一般在数组或对象中使用  ，直接遍历结果为数组的索引或者对象中的属性名
break
continue

类与对象：

JavaScript类本身也是一种对象。

自定义对象：
var obj = {
name:'tom',
age:2
} ;
或者
var obj = new Object();
obj.name = 'tom';

if(obj.name){.....}
或者
if("name" in obj){.....}

属性获取：
1、使用点操作符  obj.name
2、使用中括号[]   obj["name"]    --- 可以针对复杂的键问题

静态类：

//此种形式叫对象直接量
var Person = {
name:'jerry',
age:2
} ;

非静态类：
var Car = function(name,color){

this.name = name ;
this.color = color ;
this.say = function(){
alert(this.name);
// 此处的this指向的是当前的对象function（函数也是对象），即指向say ，
// 但是发现say中没有name这个属性，所以就到其父亲那里寻找name,如果找到则使用（this就代表有该属性的对象），否则继续向上一层父亲查找，知道最顶层，如果没有则undefined
};
}

//注意对于非静态类需要先实例化（采用new操作符）才可以访问其内部属性
var car = new Car('bmw','red');

with关键字：   --- 尽量少用，容易浪费系统资源
with(obj){
alert(name);
}

this：代表当前对象，对于比较复杂的对象或者调用，如何区分this到底代表谁 ——  谁调用（该方法）则this表示的就是谁。

prototype:

var Car = function(){};
// 通过prototype放入公开属性
Car.prototype.name = 'bmw';
Car.prototype.color = 'red';
Car.prototype.say = function(){};

类属性：
Car.run = function(){};
类方法：

对象属性：
对象方法：

JavaScript中常用内置对象：
1、String
var str = new String('hello world'); // new 方式
var  str = "hello world" ;  // 对象直接量方式
常用属性与方法：
Global的方法： parseInt parseFloat
str.length
str.charAt(1); //返回指定索引出字符
str.charCodeAt(2);//返回指定索引处的字符的ASCII编码
str.concat('hello','wor','world') ; // 链接字符串
str.indexOf('world'); // 返回首次出现的world的位置
str.lastIndexOf('hello');
str.replace('world','heiheiru');//经常配合正则使用 : str.replace(/o/g,'p'); 全局替换所有o
str.slice(2,6);
str.split('#');
str.substr(2,5)
str.substring();
"HELLO".toLowerCase();
str.toUpperCase()
str.toString();
str.match(regex) ; // 返回正则匹配的所有结果构成的数组
可以利用prototype给String追加其他的方法。

2、Date

var date = new Date() ;  // 返回当前日期时间

方法：
getDate() ; // 返回 0-31
getDay() ; // 返回一周中的某一天 0 -6
getMonth(); // 0-11
getFullYear() ;// 返回四位年份  ， getYear() 被废弃
getHours() ; // 0-23
getMinutes();
getSeconds(); //
getMilliseconds() ;//
getTime(); //返回从1970年到现在所经过毫秒

Date.parse(dateVal) ; // 返回1970到指定时间的毫秒数
toTimeString() ; // 将Date对象的时间部分转化为字符串
toDateString() ; // 将Date对象日期部分转换为字符串

setDate() ;// 设置日期中月份的某一天（1-31）
setMonth() ;// 0-11
setFullYear() ;// 四位数
setHours() ; // 0-23
setMinutes() ;// 0-59
setTime();// 利用毫秒数设置时间

3、Number
属性:
MAX_VALUE 、MIN_VALUE、NaN 、NEGATIVE_INFINITY 负无穷、POSITIVE_INFINITY正无穷
方法：
toString() ;
toFixed(0-20) :  参数指定数字保留多少位小数

4、Array
属性： length 、prototype

var arr = new Array(1,2,3,4,"a","hello",{x:1,y:3}); // 里面可以放复杂类型的数据，类型不必一致
var arr = [1,2,3,4,"a","hello",{x:1,y:3}] ; // 对象直接量定义方式

concat() ; // 连接不同数组,将多个数组内容放置到一个数组中
var arr1 = [1, 2, 3, 4];
var arr2 = ['a', 'b', 'c'] ;
arr1.concat(arr2);  //

join() ; //将数组中的元素通过指定的参数连接起来，返回该字符串。
arr1.toString() // toString默认利用逗号将数组元素连接起来并返回
pop() ; // 返回并删除数组中最后一个元素
push(); //向数组末尾添加一个或多个元素，并返回新的数组长度。

//清空数组
arr = [] ;
或者  arr.push();

unshift() ; //向数组头部添加一个或多个元素
reverse() ; // 颠倒数组元素
shift() ; // 删除数组第一个元素
slice();
splice(index,howMany[,elem]); // 从index开始删除howMany个元素,并添加元素到删除的元素处
sort() // 排序 ，有很多排序算法
sort(); // 无参数时，对数组排序先排序第一位，。。。
sort(function(a,c){if(a > b){return 1}else{return  -1}) ; // 自定义排序算法
sort(function(){renturn a-b}) // 从小到大排序
sort(function(){renturn b-a}) // 从大到小排序
自定义算法可以利用数轴来表示：  -num ———————————————0————————————————————— +num
返回负数时，就调换俩个元素的位置，返回正数则不调换，如果是零也不调换

5、Math
属性：
E、LN2、LN10、PI、SQRT2 等
方法：
abs(x) ; // 绝对值
ceil(x) ; // 向上舍入  1.1 -》 2  ， 1.000 -》 2
floor(x) ; // 向下舍入
round(x) ; // 四舍五入
exp(x); // e的指数
max(x,y,z,....);//返回x y ,z ...中最大的值
min(x,y,z,...)
pow(x,y); // x的y次幂
random() ;// 随机数在0 - 1 之间

6、Function
属性：
arguments   、arguments.length（利用参数个数模拟其他语言的方法重载）
(
function(i){
alert(i);
arguments.callee(++i);
}
)(0);
方法：
arguments.callee()

使用Function对象定义函数 ,最后一个参数作为函数体
var abc = new Function('a','c','c',"alert(a+b+c);");
abc();
7、Global
8、Window

DOM  - 文档对象模型

每当浏览器打开一个窗口，就自动构建一个window对象。
DOM
|
window
|
|---------------------------------------------------------|
|            |            |              |
Navigator       Screen       History        Location        Document

window的方法：

setTimeout();
clearTimeout();
setInterval();
clearInterval();

Navigator : 主要包含客户端浏览器的信息
判断浏览器类型及版本信息
cookieEnabled --- 判断cookie是否启用
userAgent --  浏览器信息，一般利用string的match方法筛选所需要的属性信息

Screen ：包含了客户端屏幕信息
height、width、avaiHeight、avaiWidth

History: 浏览器当前window的历史记录
length  -- 历史记录长度
back();
forward();
go(-/+num)；
Location: 包含了当前URL的信息
hash // 设置或返回url锚点（如 ： #course2）
href // 设置或返回url
hostname // 设置或者返回当前主机名
pathname // 设置或者返回当前url的路径部分
protocol // 设置或者返回协议
search // 设置或返回查询字符串(包含问号) （不包含锚点部分）
assign() // 加载新的文档
reload() // 重新加载
replace() //新文档替换当前文档

DOM节点操作： 通过document对象操作html文档

访问节点:
getElementById();
getElementsByName(); // 返回数组形式
getElementsByTagName(); // 返回数组

创建节点:
createElement();
creatTextNode();

添加节点：
appendChild(node) ;
insertBefore(newNode,oldNode);

删除节点：
removeChild(node);
获取父节点:
parentNode ;

替换节点：
replaceNode(newNode,oldNode);

使用文档碎片提高js执行效率 ：  写js时尽量减少操作DOM，可以一次操作完成就不要多次操作，减少DOM元素的查找。
createDocumentFragment()

表格操作：
caption ：
createCaption();
deleteCaption();
thead:
createTHead();
deleteTHead();
tfoot:
createTFoot();
deleteTFoot();
tbody:
rows
insertRow();
deleteRow();
cell:
insertCell();
deleteCell();

DOM元素的属性：
setAttribute(name,value);
getAttribute(name);
removeAttribute(name);
常见如style ,style.cssText
innerText ;
innerHtml ;
outerText;
outerHtml ;

事件 ：
HTML事件
onload();
onresize();
onscroll();
键盘鼠标事件
onclick();
ondbclick();
onmousedown();
onmouseover();
onkeypress();
onkeydown();
onkeyup();

表单事件
onfocus();
onblur();
onchange();
onreset();
onsubmit();

Event对象的属性或方法
button -  标识鼠标的左中右三个键
ctrlkey
altkey
shiftkey
type
target
srcElement
screenX/screenY

preventDefault()
stopPropagation() ; // 阻止事件冒泡  不同浏览器有区别

事件流
捕获型事件（由外而内的查找过程）
冒泡型事件（由内而外）
如常用赋值形式的事件 ： document.getElementById('btnSubmit').onclick = function(){} ;

事件的绑定是可以覆盖的（同一个事件的先后绑定顺序）
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

//阻止事件冒泡函数
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}

事件处理和监听函数
addEventListener(eventName,callback,isbublePop); // 第三个参数指定是冒泡式还是捕获式事件
removeEventListener();
attachEvent();
detachEvent();

Cookie :
cookie的容量不超过4K
添加：
document.cookie = "值" ; 多个cookie值之间使用分号空格分隔