JavaScript 函数
1.弹出框
confirm :弹出一个选择框。 是和否的选择。返回一个boolean类型。
eg:
var boo = confirm("你是不是很帅?");
if(boo){
alert("你很聪明");
}else{
alert("你不诚实哈!");
}
prompt:弹出一个输入框,类似Java的scanner。返回一个字符串
eg:
var str = prompt("输入一个数");
console.info(str);
2.open函数,以及一些window相关函数
window.open 打开一个新的窗口。
用法:
var wi = window.open("newhtml.html","我的串口","width = 400 , height = 400 , top =0 ,left =100")
function co(){
/*通过窗体对象调用close方法*/
wi.close(); //关闭窗体
}
window.location.href = “xxx”:通过js对象控制跳转。
eg:
function ck(){
//当触发事件,调用此方法就会发生跳转。
window.location.href="newhtml.html";
}
window.history.forward(); 前进到下一级目录。
用法:
function fowd(){
//使用forward前提是使用了back或者go。
window.history.forward();
}
window.history.back();返回上一级目录。
back 默认返回上一级(-1可以不写。)
window.history.back(-1);
history.Go(-1); 也是返回上一级目录。 go可以返回多级目录。通过传入的参数进行确定。-1表示前一级。
3.延时函数,定时函数。
延时函数:setTimeout(x1 , x2);
x1传入需要执行的函数,x2传入需要延时的时间。
eg:
function add(){
console.info("执行");
}
/*两秒中后再执行函数,add称为回调函数。命名回调,add加()就表示立即执行了,时间是毫秒*/
setTimeout(add, 2000);
延时函数中还有匿名回调类型的(感觉类似java 匿名内部类):
/*匿名回调*/
setTimeout(function(){console.info(123)},3000);
简单的语句可以放在字符串里面,到时间后可以自动转换为js代码
var time = setTimeout("alert()",4000);
消除延时操作:
/*消除延时执行,要清除哪一个,就需要加一个标志给定时器,setTimeout 会默认返回一个数字标志*/
clearTimeout(time);
定时函数:setInterval(x1,x2);
x1传入需要执行的函数,x2传入需要延时的时间。
/*定时执行某一段代码*/
function ko(){
console.info("执行这段代码")
}
setInterval(ko,2000);
var numb = setInterval(function(){
console.info("1")
},100);
/*关闭定时的代码*/
clearInterval(numb);
4.navigator 对象
navigator是一个独立的对象,使用他提供浏览器获取操作系统的一些信息。
/*获取浏览器使用的语言*/
document.writeln(window.navigator.language);
/*浏览器是否处在在线模式*/
document.writeln(window.navigator.onLine);
/*浏览器正式的名字*/
document.writeln(window.navigator.appName);
/*浏览器版本*/
document.writeln(window.navigator.appVersion);
5.screen对象
document.write(window.screen.height);
document.write(window.screen.width);
/*获取可以使用的宽度,高度*/
document.write(window.screen.availHeight);
document.write(window.screen.availWidth);
/*document 是文档对象 , 是直接打印到网页上面。*/
事件
1.事件流
操作一个元素的时候,页面上不止一个事件在触发。就是事件流。
冒泡和捕获两个不同的实现方式,因为各个浏览器早期设计有差异 。
ie 默认是冒泡,而且只支持冒泡。
标准的dom浏览器既支持冒泡也支持捕获。
冒泡:即事件触发后,从最低层执行到最外层。
捕获:与冒泡相反。
2.事件的添加方式
1.传统指派方法:找到某个元素,在绑定某个事件。
eg:
var b = document.getElementById("bt1");
function back(){
window.history.back();
}
b.onclick = back ;
注意:back 如果加上括号表示立即执行。
<body onclick="ck()" onkeypress="ck1(event)">
ck() 在元素上,是被看成了字符串,被点击过后才将字符串转换为js代码,所以是要加上括号的。
2.现代指派方法:调用addEventListener。
addEventListener 用于绑定事件,现代指派事件。 第一个参数是事件的类型, 第二个参数是事件执行的行为,第三个参数是指冒泡还是捕获 (默认一般都是冒泡–false)
ie下面的现代指派是用的是attachEvent();
eg:
odiv.addEventListener("click", function(){
alert('div');
},true);
3.event对象。
只要有事件触发,都会产生event对象,当事件结束,event对象消失。
event代表当前事件的状态。
获取event对象有三种方式。
1.直接跟随事件传入。
eg:
<div id = "div1" onclick="ck(event)"></div>
<script>
function ck(e){
console.info(e);
}
</script>
2.在IE中,event是一个全局变量。
可以使用window.event获得。
eg:
function ck1(){
var e1= window.event;
console.info(e1.type);
}
3.在firefox等浏览器中,事件会作为第一个参数传入。 Firefox只支持事件对象作为句柄第一个参数传入
实现方式:
function ck1(){
var e1=arguments[0];
console.info(e1.type);
}
Arguments是一个类似数组但不是数组的对象,说它类似数组是因为其具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length。还有就是arguments对象存储的是实际传递给函数的参数,而不局限于函数声明所定义的参数列表,而且不能显式创建 arguments对象。arguments对象只有函数开始时才可用。event则是他的第一个参数。
4.鼠标事件。
<div id="div1" onclick="ck(event)"
ondblclick="ck(event)"
onmouseover="ck(event)"
onmouseout="ck(event)"
onmousedown="ck(event)"
onmouseup="ck(event)"
>
</div>
<script>
function ck(e){
console.info(e.type)
}
</script>
鼠标事件也很简单。几乎都可以见明知义。
onmouseover表示鼠标移进。
onmouseout表示鼠标移出去。
5.键盘事件
<textarea name="" id="t1" cols="30" rows="10"
onkeydown="ck(event)"
onkeyup="ck(event)"
onkeypress="ck(event)">
</textarea>
<script>
/*onkeydown 键盘按下去, onkeyup 键盘弹上来, onkeypress 按压键盘*/
function ck(e){
console.info(e.type);
/*获取到键盘码*/
console.info(e.keyCode);
}
</script>
6.html事件
获取到光标:onfocus
失去光标:onblur
示范代码:
<select name="" id="sel">
<option value="China">中国</option>
<option value="USA">美国</option>
</select>
<input type="text" id="inp"/>
<script>
var osel = document.getElementById("sel");
osel.onchange = function(){
console.info(osel.value);
}
/*获取到光标,触发事件*/
var oinp = document.getElementById("inp");
oinp.onfocus = function(){
this.style.backgroundColor= "blue";
}
/*失去光标*/
oinp.onblur = function(){
if(this.value==""){
alert("验证失败!")
}else{
alert("验证成功");
}
}
</script>
表单提交事件
<form action="demo%2001.html" onsubmit="return sub()" onreset="re()" onkeypress="ck(event)">
<input type="text" id="inp"/>
<input type="reset"/>
<input type="submit"/>
</form>
<script>
/*事件的返回值,返回false 就阻止提交,true就提交类容*/
var oinp = document.getElementById("inp");
function sub(){
if(oinp.value == "" || oinp == null){
alert("输入框不能为空");
return false;
}else{
return true;
}
}
function re(){
oinp.value="";
}
function ck(e){
if(e.keyCode==13){
sub();
}
}
</script>
注意return一定要写。