JavaScript早期出现的原因---表单验证
js代表的是行为层，表示的是用户与网页的交互
JavaScript是一种直译式脚本语言
java---是编译式语言
js只能在浏览器执行，每一款浏览器都有自带的js引擎
js的四个核心
ECMAscript---javascript核心代码
dom document object model--文档对象模型
bom browser object model--浏览器对象模型
事件处理模型---点击按钮出现alert---οnclick="a";
定义JavaScript的三种方式：
方式一：定义在标签中style--行内样式
<p script type="text/JavaScript" >hello hello kitty</p>
方式二：定义在body里面的script --内联样式
<script type="text/JavaScript">
alert("ok")
</script>
方式三：单独建立一个js文件--外部样式
<script type="text/JavaScript" " href="my.js></script>
javascript定义的最好方式是在结束body前面一句，因为js是堵塞下载的，可以先加载静态html的在加载动态的。
1.js
的分层
(
功能
):jquery(tool)
组件
(ui)
应用
(app),mvc(backboneJs)
2.js
的规划
():
避免全局变量和方法
(
命名空间
,
闭包
,
面向对象
),
模块化
(seaJs,requireJs)
常用内部类
:Data Array Math String
HTML
属性，
CSS
属性
HTML
：属性
.HTML
属性
="
值
"
；
CSS
：对象
.style.CSS
属性
="
值
";
class
和
float
1.class:className
2.float:cssFloat
事件
:
用户的动作
鼠标事件：
onclick
：点击
onmouseover:
鼠标放上
onmouseout:
鼠标离开
ondbclick:
双击事件
onmousedown:
鼠标按下
onmouseup:
鼠标抬起
onmousemove
鼠标移动
表单事件：
onfocus:
获取焦点
onblur:
失去焦点
onsubmit:
提交事件
onchange:
当发生改变的时候
onreset:
重置事件
键盘事件:
onkeyup:
键盘抬起
onkeydown:
键盘按下
onkeypress:
键盘按键一次
窗口时间:onload事件
页面加载完成之后立刻执行的事件
两种方式
:
1.<script>window.οnlοad=init/*
函数名，不能加括号
*/;</script>
2.<body οnlοad="init()"></body>
event:
保存事件发生时的相关的信息
当事件发生的时候
,event
event.clientX:
事件发生时的
X
的坐标
event.clientY:
事件发生时的
Y
的坐标
event.target:
事件源
event:
必须通过实际参数的形式传递给函数才可以用
<input type = "button" value = "
点击
" onclick = "fn(event)" >
修改div中的内容
innerHTML:
对象中所有的内容（文本内容和标签内容），一般指的是双标签或者容器标签
innerText:
对象中所有的文本内容
document.createElement("
标签名
");
document.body.appendChild(
对象
);
removeChild(
对象
)
document.body
是
body
标签对象
document.documentElement
是
html
标签对象
ECMAscript,BOM,DOM
1.window:
对象最高级
2.BOM:
浏览器对象
: brower object model
3.DOM:
文档对象模型
:document object model
4.BOM:
网页一打开就会存在
5.DOM:
去操作的代码
6.document
是链接
DOM
和
BOM
document
有下级，其他的都没有下级【多窗口】
window.open("
链接
","name","
设置
");
1.width:
设置窗口宽度
2.height:
设置窗口高度
3.left:
新窗口到左端距离
4.top:
新窗口到顶部的距离
5.srollbars:
滚动条【
yes,no,1,0
】
6.toolbar:
工具类【
yes,no,0
】
7.location:
地址栏
window.close:
关闭窗口
window.close()
创建定时器:
一次性计时器
:window.setTimeout("
函数
()"
，时间
t)
执行
:
是在时间
t
之后执行
js
代码【只会执行一次】
时间
:
以毫秒为单位
反复性计时器
:window.setInterval("
函数
()"
，时间
t)
时间
:
以毫秒为单位
执行
:
是每过时间
t
就会执行一次
js
代码【
n
次】
清楚定时器
:
清除一次性定时器
:window.clearTimeout(
定时器名
)
清除反复性定时器
:window.clearInterval(
定时器名
)
注意
:
要想清除定时器，必须给定时器名字，匿名定时器无法清除
找对象的方法:
di:document.getElementById("id
名
");
标签
:document.getElementsByTagName("
标签名
")//
获取的是对象的集合
(
数组
)
对象
.getElementByTagName(
标签名
)
name:document.getElementByName("name
名
");//form
集合
(
数组
)
className:document.getElementByClassName("class
名
");//
集合
(
数组
)
【
firefox
】
document.images;//
获取
img
对象
(
数组
)
document.links;//
获取链接对象
(
数组
)
document.forms;//
获取表单对象
(
数组
)
document.body;//body
标签对象
document.documentElement;//HTML
对象
event:
事件信息对象
this:
当前对象
location对象
location.href:
返回
url
信息【可以获取
url
信息，也可以给其赋值，实现跳转页面】
location.assign():
加载新的文档【跳转页面】
location.reload():
重新加载当前的文档【刷新页面】
location.replace():
用新的文档替代当前的文档【跳转页面】
location.assign
和
location.replace
的区别
:
location.assign:
会产生历史记录
location.replace:
不会产生历史记录
history对象:
history.length:
浏览过的
url
数量
history.back():
返回历史记录的前一个页面
history.forward():
加载历史记录中的下一个页面
history.go(n):
跳转到历史记录中指定的页面，如果是
-1
实际上就是
history.back()
的功能
screen对象
screen.height:
获取屏幕的高度
screen.width:
获取屏幕的宽度
screen.availHeight:
获取除去任务栏的高度
screen.availWidth:
获取除去任务栏的宽度
navigator对象
navigator.appName:
浏览器名
navigator.appCodeName:
浏览器代码名
navigator.appVersion:
浏览器的版本号和平台信息
navigator.userAgent:
浏览器信息
DOM:
描述网页各个组成部分的关系
var obj = document.getElementById("id
名
")
火狐浏览器中空白处也算一个节点
parentNode:
父节点
childNodes:
子节点
firstChild:
第一个子节点
lastChild:
最后一个子节点
nextSibling:
下一个兄弟节点【注意
:
必须是同父级关系】
previousSiblind:
前一个兄弟节点【注意
:
必须是同父级关系】
扫一扫
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
