雷哥带你走进Javascript

javascript复习笔记
--------------------------------------------
1.概念
2.面向对象思想
3.作用认识
4.引入方式
5.执行顺序

变量
1）声明方式
x=10
用 var声明（可以省略）
2) 变量的命名规则
a、不能以数字开头
b、不能是系统中关键字 [如if switch var 等]
c、区分大小写
d、不能以标点符号开头

注释：
单行：//
多行：/* */

消息框：
1)alert()
2)confirm()
3)prompt()

变量的数据类型（10种）
首先引入查看数据类型的函数
a=10;
typeof(a),a其本身返回的是string类型

1.字符串
2.数字
3.浮点
4.数组
5.对象
6.布尔型
7.null
8.undefined
9.NaN
10.json

global对象
数据类型的转换
1)转换成数字
Number();
2)转抱成字符串
String()
4)转换成数字
parseInt()
5)转换成浮点数
parseFloat()
6)转换成布尔型
Boolean()
7)转换成对象
8)Object()
9)eval()

确定元素的位置
1.document.getElementById()
2.document.getElementsByTagName();
3.document.getElemnetsByName();

运算符
1)in
2)new
3)++,--
4)arr instanceof Array
arr=new Array(3,4,5);
if(arr instanceof Array){
alert("yes");
}else{
alert("no");
}

json字符串转成json对象
eval("("+"{'name':'zhilei','age':'10'}"+")")

流程控制
1.if(){}
2.while(){}
3.switch(){}
4.for
5.forin

函数
1)声明
2)参数
3)返回值

对象篇
1)Array
2)Boolean
3)Date
4)Math
5)String
6)RegExp
7)Functions
8)Events
9)定时器与超时器对象
setInterval();
clearInterval()
超时器
setTimeout()
clearTimeout();

1.数组对象
属性：
length, instanceOf Array;
方法：
1).concat()
2).join()
3).push()
4).pop()
5).reverse()
6).shift()
7).slice()
8).sort()
9).splice()
10).toSource()
11).toString()
12).toLocaleString()(x)忽略
13).unshift()
14)filter()

总结：将数组转换成字符串的方法
arr.join();
arr.toString();

2.布尔对象
new Boolean();
假值有哪些：(七种值)
1)0,false,undefined,NaN,"",null

3.日期对象
new Date();
1)实例化日期对象
time=new Date()

2)从 Date 对象返回一个月中的某一天 (1 ~ 31)。
time.getDate()

3)从 Date 对象返回月份 (0 ~ 11)。
time.getMonth() ps日常使用的时候要加1

4)从 Date 对象以四位数字返回年份。
time.getFullYear();
time.getYear() 这个已经不用了

5)返回 Date 对象的小时 (0 ~ 23)。
time.getHours();

6)返回 Date 对象的分钟 (0 ~ 59)。
time.getMinutes()

7)返回 Date 对象的毫秒(0 ~ 999)。
time.getSeconds()

8)返回 Date 对象的毫秒(0 ~ 999) 秒单词要小写
time.getMilliseconds()

9)从 Date 对象返回一周中的某一天 (0 ~ 6)。
time.getDay();

4.数学对象 (直接是一个对象，不需要实例化)
常用的属性：[数学对象的属性都是大写的]
1)E
2)PI

常用的方法：
2)进一值
ceil()
3)舍一
floor()
4)取两个值最大值
max(3,5)
5)取最小值
min(4,5)
6)返回0-1的随机数
random( )

5.number对象
1)Number 对象是原始数值的包装对象。
2)Number()
3)当Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。

属性：
返回最大值
Number.MAX_VALUE

返回最小值
Number.Min_VALUE

返回并不一个数字
Number.NaN

判断一个数是不是一个数字
isNaN()

方法：
1)将数字转换为字符串
toString()
例：
<script>
var num=10;
var aa=Number.toString(num);
alert(typeof(aa));
</script>

2)把数字转换为字符串，结果的小数点后有指定位数的数字。
tofixed

例子：将数据对象转为字符串，并指定小数保留1位
<script type="text/javascript">
var num = new Number(13.37);
document.write (num.toFixed(1)) //代表小数保留一位
</script>

6.字符串对象
声明字符串对象就是声明一个字符串的变量
new String("aaa")="aaaaaa";
1.如果有new的话，则会成一个新的字符串来处理字符串
2.如果没有的话，则会转换数据类型

属性：
字符串的长度
length

方法：
1)创建锚点
anchor()
var str="hello";
document.write(str.anchor("test"));
// 说白了这个功能就是将字符串作为a链接的innerHTML而anchor()括号时面的值就是a链接的name值

2)用大号字体显示字符串。
big();
var str="hello";
document.write(str.big());

3)显示闪动的字符串
str.blink();
本质就是给字符串加标签<blink>str</blink>

4)显示粗体
str.bold();

5)返回查指定位置的字符(指针从零开始)
str.charAt(3);

6)返回字符串指定位置的unicode编码
str.charCodeAt();

7)字符串连接
str.concat();

8)以打印机文本显示字符串
str.fixed();

9)给字符串加指定的颜色 (注意：全小写)
str.fontcolor();
相当于<font color="#f00">hello</font>

10)给字符串指定大小
str.small();
操作后字符中加了标签<small>hello</small>

11)索引字符串
说明：返回的一个索引下标
str.indexOf("索引值","从哪里开始")

12)将字符串转为斜体
str.italics();
结果在这个字符串上面加一个标签<i>str</i>

13)将字符串显示为链接
在这个字符串上面加<a href="undefined">hello</a>

14)用本地的顺序来比较字符串
str.localeCompare(target)

16)显示小字体
str.small()

7)字符串分割
str.split('',num);

18)将字符串显示为下标
str.sub(); 其实就是加一个标签_{hello world}

19)从起始索引提出字符串中指字数止的字符
str.substring();
str.slice();

20)大小写转换
1)全转换大写
toUpperCase()
2)全转为小写
toLowerCase()
21.转换成字符串
toString()=String("");

正则处理字符串
1)匹配
match()
2)查找
search()
3)替换
replace()

7正则对象(RegExp)
功能：处理字符串
1)创建正则对象语法
new RegExp(pattern,attributes)
转义符:\

0)常用原子
.
\w与\W包含数字，字母与下划线
\d与\D
\s与\S
\b与\B
\0
\n
\f
\r
\v
[abc]
[a-zA-Z]
[^a]
[0-9]

1)常用元字符
+
*
?
{x}
{x,y}
{x,}
n^
n$

2)模式修正符
i :忽略大小写
m :执行多行匹配
g :执行全局匹配

()用法

支持正则表达式字符串对象的方法：
返回第一个与 regexp 相匹配的子串的起始位置
search()
1)查找符合规则的第一个项的下标
2)返回的是一个数字

match()
1)返回值
1)如果是用字符串作为直接查找的内容的话，则会返回一个字符串，且是符合的第一个.
2)如果用正则查找的话，而没有加"g" 全局标志的话，则也会返回符合正则的第一个字符串.
3)如果用正则查找且用全局模式"g" 则会返回一个字符串的数组.

replace()
1)返回一个新的字符串
2)如果不加全局替换的话则会替换查找到的第一个
3)可用字符串来查找
4)也可用正则来查找
5)也是复制性的操作，并不会将原来的字符串给更改

split()
[这个只是复制性操作，并不非改变原字符串,且分割后是一个数组对象]
1)可以直接用字符串分割,如果给一个""空的字符串，则会将每一个字母都分开
2)也可用正则来分割
3)也可用有第二个参数就是显示的个数

实例：
1)url匹配
2)mail匹配

8)函数对象其实就是global对象
全局对象与函数可用于所有的内建javascript对象
顶层函数(全局函数)
1)将js字符串作为脚本来执行[相当于去掉string外面的单双引号]
eval()
如果没有表达式的话则要加上()相当于表达式

2)isNaN()

3)Number()

4)String()

5)parseFloat()

6)parseInt()

顶层属性
1)NaN
2)undefined

9事件句柄或者是事件对象

1)焦点事件
onblur
onfocus

2)页面加载事件
1.onload(事件会在页面或者是图片加载完成后立即执行)
支持标签：<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持该事件JavaScript: 对象：
image, layer, window
例子:
onload 当页面加载完成的时候执行相应的代码
document.body.onload=function(){
alert("aa");
}
ununload支持标签
unbeforeunload
1.body
2.frameset

onbeforeunload实例：
document.getElementById("body").onbeforeunload=function(){
return confirm('你确认要离开这个页面?')
}

1.onresize 当浏览器大小发生改变的时候执行的动作
2.onscroll

对象内容发生改变
onchange
事件是没有()的

3)键盘事件
onkeydown
onkeypress

4)鼠标事件
1.onmousedown (鼠标按下)
2.onmousemove (鼠标移动)
3.onmouseout (现在改用mouseleave,能实现绝对离开)
4.onmouseover (现在改用mouseenter)
5.onmouseup (鼠标抬起事件)
6.onclick (点击一个操作对象)
7.ondblclick (并不常用)

5)表单事件
->直接操作表单对象
onreset
onsubmit

->操作表单内input,textarea对象
onselect
1.(支持事件的html标签 input textarea)
2.支持该事件的js对象是window

事件对象方法：
1.focus()
2.blur
3.select()
4.submit()
5.reset()
6.click

阻止标签默认的方法
a标签
form表单

DOM对象：
event事件监听器对象:
属性：
关于鼠标:
1)获取发生鼠标事件时候相对于浏览器的位置
event.clientY,event.clientX
2)判断鼠标哪个键被点击
0左 1中 2右
3)相对于屏幕鼠标的位置
screenX screenY

关于键盘：
1)返回键被按下后的unicode码 ps这值并不包含shift alt 等键
event.keyCode
2)判断一此keyCode没有返回码的
1.evnet.shiftKey
2.altKey
3.ctrlKey
4.metaKey[苹果专有]
5.relatedTarget [只有onmouseover 与onmouseout 能用本身功能并不大]

----------------------------------------------------------
浏览器对象(BOM):
功能:让js有操作窗口的能力,其是最外层的对象,只不过可以省略而已。

一.window对象
二.Navigator
三.Screen
四.History
五.Location

===========================
1.window对象[窗口对象只有打开的时候才会产生一个对象]

Window 对象表示浏览器中打开的窗口。
如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

属性：
1)获取浏览器的高度与宽度
a.对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
获取窗口的高
window.innerHeigiht
获取窗口的宽
window.innerWidth

对于Internet Explorer 8、7、6、5：
# window.document.documentElement.clientHeight
# window.document.documentElement.clientWidth
# document.body.clientWidth;
# document.body.clientHeight;
# 如果要用的话 ，我们则要选择第一种 最为方便，且最符合现在的浏览器标准

页面中三个关键高度
1.滚动出去的高度
document.documentElement.scrollTop
2.浏览器的大小(除了上下的菜单栏部分)
1).window.innerHeight,window.innerWidth
2).document.documentElement.clientWidth/clientHeight
3).谷歌的话则要用document.body.clientWidth/clientHeight
3.页面文档的总高度，屏幕总高度
document.documentElement.scrollHeight

2)判断窗口是否已经关闭
closed
3)frmaes,top
4)innerHiehgt
5)innerWidth

只读引用的属性：
1)document
2)navigator
3)history
4)location
5)screen

方法：
1)定时与超时器(返回一个对象)
setInterval()
clearInterval()
setTimeout()
clearTimeout()
2)消息框
alert()
confirm()
prompt()

Navigator对象：
属性：
userAgent

历史对象：
属性：length

方法：
1.back()=go(-1);
2.go()
3.forward()

screen屏幕对象：
属性：
width
height
availWidth
availHeight

location对象：
属性：
1)bash
2)host
3)hostname
4)href
location.href="http://www.baidu.com"=location="http://www.jd.com";
5)pathname
6)port
7)protocal
8)search

方法：(三个方法的功能差不多)
1)分配一个新的文档，也会替换当前的文档
assign()

2)重新加载当前文档(也就是刷新)
reload()

3)找一个新的文档来替换当前的文档
replace()

-----------------------------------------------------------
文档对象(DOM)
1)Document (document对象)
2)Element (元素对象)
4)Events (事件对象) 事件监听对象

1)document对象的集合：
1.document.forms
2.selectobj.options
3.document.images
4.document.links
5.document.anchors
6.tabojg.rows
7.tabojb.cells

2)非集合的属性:

1.body
2.cookie
3.domain
document.domain=location.host=location.hostname
4.lastModified
5.referrer
6.title
7.URL
document.URl=location.href [两者值是一样的]
方法：
1.getElementById()
2.getElementsByTagName()
3.getElementsByClassName()
4.getElementsByName()
5.document.write();

正规属性与非正规属性:

元素对象:
正规属性 对象可以直接访问
1.id
2.className
3.title
4.style

通过方法来获取或者设置所有的属性包括非正规属性
1.获取
obj.getAttribute() ,如果所有的属性的话getAttributs
2.设置
obj.setAttribute()

常规属性：
1.element.clientHeight
2.element.clientWidth

元素对象的js属性:
innerHTML
outerHTML
textContent
tagName

ajax对象
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

1.创建对象
xhr=new XMLHttpRequest
2.常用方法
1)xhr.open("post/get","url","true/false")
说明：第三个参数代码是同步还是异步
2)xhr.send();
说明：发送请求
3)如果发送的是表单的数据的话则发送一个请求的头信息
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
4)监听方法：
onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
obj.innerHTML=xhr.responseText
}
}

2)响应
xhr.reponseText

3)

属性：
xhr.status (200 or其它的)
xhr.readyState(0,1,2,3,4)
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪