js笔记02
Posted 黑土白云
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js笔记02相关的知识，希望对你有一定的参考价值。
1.BOM的概述
browser object modal :浏览器对象模型。
浏览器对象：window对象。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
Window 顶级父类--> 子:history location Navigator screen
2. window的属性
innerHeight: 文档显示区的高度,不包括工具栏 菜单栏等高度
innerWidth: IE不支持 不包括滚动条
通用写法：var x =window.document.body.clientWidth //文档显示区的宽度
var y = document.body.clientHeight//文档显示区的高度
outerheight: var x =window.document.body.outerheight;
outerwidth: var y =window.document.body.outerwidth;
self :等同于window对象
parent：是打开窗口的父窗口对象,重要
opener：是打开窗口的父窗口对象,重要
2种情况下使用opener:
1.使用winodw.open()方法打开的页面
2.超链（里面的target属性要设置成_blank）
2种情况下使用parent:
1.iframe 框架
2.frame 框架
frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例：父子窗口相互传参.
open方法，是打开一个页面.
对话框：
1)消息框 alert() ;
2)确认框 confirm() ;
3)输入框 prompt() ; (了解)
定时器：
setTimeout ,setInterval
定时器： 1.setTimeout() :只会调用1次
2.setInterval() ：每隔一段时间调用1次
3. history对象
a. forward()前进
b. back() 后退
c. go(n) 正数是前进，负数是后退.
4. location对象。
1.href 属性： 是指要连接到其他的URL
写法一、window.location.href=‘demo_window对象的close方法.html‘ ；
写法二、window.location=‘demo_window对象的close方法.html‘ ；
2.reload方法: 刷新
写法： window.location.reload() ；
5.常用事件
* 事件（掌握，明白每个事件发生的时机）
鼠标移动事件
* onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
* onmouseover : 鼠标悬停事件
鼠标悬停事件： 当鼠标移动到某个控件上面的时候发生
this: 把this写在那个标签里面就代表那个标签对象
this.style.backgroundColor : 当调用样式表中的属性的时候，如果属性中间有横杠，则应去掉.
示例： 当鼠标移动到p标签上的时候，p标签改变样式 (参见demo01_鼠标悬停事件.html)
* onmouseout : 鼠标移出事件
鼠标移开事件： 当鼠标从控件上移开的时候
示例参见(demo_02_鼠标移开事件.html ;
* 鼠标点击事件
onclick : 当鼠标单击某个控件时发生
示例： 当单击按钮时，在<p>中显示字符串 "冠希哥来了" 参见(demo03_鼠标单击事件.html)
<script>
function init(){
btn1.onclick=function (){//给btn1按钮注册一个点击事件
var img = document.getElementById("img");
img.style.display="none";
this.disabled="true";//将按钮设置为不可点击,灰色,this代表btn1
}
btn2.onclick=function (){
var img = document.getElementById("img");
img.style.display="block";//调用css的样式 用style 或直接用属性
var btn1 = document.getElementById("btn1");
btn1.removeAttribute("disabled");//删除btn1的属性
}
function fun(obj){obj.value ="新浪";}
function add(){
var add = document.getElementById("add");
//调用html,用innerHtml
add.innerHTML="<img src=‘images/img1.jpg‘ width=‘200‘ height=‘200‘>";
}
function remove(){
var btn3 = document.getElementById("btn3");
btn3.removeAttribute("onclick");
}
}
</script>
</head>
<body onload="init()">
<img src="images/img1.jpg" id="img">
<input type="button" id="btn1" value="隐藏图片">
<input type="button" id="btn2" value="显示图片">
<input type="button" id="btn3" value="搜狐" onclick="fun(this)">//this==<input>
<input type="button" id="btn4" value="添加一副图片" onclick="add()">
<input type="button" id="btn5" value="去除搜狐按钮的点击事件" onclick="remove()">
<p id="add"></p>
</body>
* 加载与卸载事件
onload ,onunload
加载事件(onload) : 在整个页面的元素加载完毕之后发生,body加载完毕之后调用
<body onload="fun(),fun1(),fun3()"></body> onload可以调用多个函数
只能写在 img ,layer 和body中;
卸载事件(onunload) : 用于页面关闭时发送某些信息给服务器
注意： onload和onunload事件必须写在body或者图片标签里面
示例参见（demo04_加载卸载事件.html）
* 聚焦与离焦事件
onfocus, onblur
聚焦事件：是在控件获得焦点的时候发生
离焦事件：是在控件失去焦点的时候发生
示例： 文本框获得焦点的时候改变样式，失去焦点时变回原样(参见demo05_聚焦离焦事件.html)
<script>
function fun(obj){
obj.style.border="1px solid red";
obj.style.background="black";
obj.style.color="white";
}
function fun1(obj){
if(obj.value==""){
alert("内容不得为空");
obj.focus();//让焦点回到input框中
}
}
</script>
</head>
<body>
<input type="text" name="" value="" onfocus="fun(this)" onblur="fun1(this)"><br><br><br>
<input type="text" >
</body>
* 键盘事件
onkeypress,onkeyup,onkeydown
onkeypress: 按下键盘按键并松开
onkeydown : 按下按键发生
onkeyup: 松开按键
示例参见（demo06_键盘事件.html`）
<script>
function fun(obj,e){
obj.value= e.keyCode;//65A 97a 拿到按键的asc码
}
</script>
</head>
<body>
//event对象 能拿到事件的状态等信息
<input type="text" name="" onkeypress="fun(this,event)" onkeydown="" onkeyup="">
</body>
* 提交与重置事件 :提交 是把前台的数据提交到服务器
onsubmit,onreset
提交事件： 是在点击提交按钮后发生。(必须写在form表单中)
提交流程:点击submit按钮-->check(this)方法,如果返回为true,提交表单数据到服务器,跳转页面,反之光标重回到输入框且弹出提示...
重置事件： 是在点重置交按钮后发生。
示例： 提交表单中的数据(检查):如果是陈冠希：通过，否则不能提交数据（参见demo07_提交重置事件.html）
<script>
function check(form){
var txt= form.username.value;
if(txt ==""){
document.getElementById("sname").innerHTML="<font color=‘red‘>*名字不能为空</font>";//只有input标签才有value,其他用innerHtml
form.username.focus();//光标重新回到输入框
return false;//必须要有boolean返回值
}
return true;
}
function funreset(form){
var txt= form.username.value;
if(form.username.value !=""){//有数据才清空
return true;
}
return false;
}
</script>
<body>
<form action="ting.html" method="post" onsubmit="return check(this)" onreset="funreset(this);">
<input type="text" name="username" value=""><span id="sname"></span>
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
</form>
</body>
* 选择与改变事件
onselect:
onchange:
onselect: 只能用于输入框. 当选择输入框中的文本时发生
onchange: 用于select和文本框.
对于下拉框是在选项发生变化的时候发生
对于文本框是在文本框的内容发生变化并且失去焦点时发生
示例： 当选择文本框的内容时，弹出文本框的内容
下拉框的selectedIndex属性：代表选中某项的索引
参见(demo08_选择与改变事件.html)
以上是关于js笔记02的主要内容，如果未能解决你的问题，请参考以下文章
谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js