javascript:用来在页面中编写特效的,和html/css一样都是由浏览器解析的
javascript语言:
一、js如何运行的(javaScript,jscript,vbscript,applet)
二、输出
alert(什么类型都可以)
document.write(字符串)
三、如何在html中使用js
1.使用<script></script>将js语法嵌入到html中,可以使用多个,每一个之间都是有关联的
2.href="javascript:js代码"
3.事件中
4.写到外部文件中(.js)<script src="文件位置"></script>
js语法:
命名规范:
1.一定要有意义
2.不能以数字开头,不能是系统的关键字
大小写:javaScript严格区分大小写
变量名和函数:驼峰式命名
对象:每个单词首字母都要大写 Date(); new Object();
分号:
功能执行语句加分号 var name="lisi";
结构定义语句后面不加分号 if function(){}
注释:
// 单行
/* */ 多行
四、变量
var a=10; 跟别的语言不一样,js只要浏览器没有关闭,变量一直在浏览器内存中。
注意:javaScript是弱类型语言,(和PHP一样)
var a=10; 声明
int a=10; 赋值
五、数据类型
typeof(变量)
1.number(int float double) 注意:计算时还是按整型和浮点型分开使用
2.string (string char)-----------所有的浮点数都是近似数,10个0.1相加等于0.9999999999....
3.boolean
4.object(object,array,null)注意:分别处理
5.undefiend 没有声明变量
字符串声明,"" '' 双引号和单引号都是一样的。所有转义都可以使用
+连接两个字符串
六、运算符和表达式
算数运算符号
赋值运算符号
条件运算符号
逻辑运算符号
位运算符号
其他运算符号
七、流程控制
一个整型,一个字符类型,用switch,其他类型就用别的好了。
八、函数
定义:是一段完成"指定功能"的已经"命名"的代码段。
1.函数名
2.参数 --根据需要使用参数
3.函数体(功能)
4.返回值(可选)
函数遇到return 就终止了。
看函数的类型: alert(typeof(函数名()))这样是错误的-----加了括号是调用函数,这里应该去掉括号
函数的类型是function
函数可以赋给一个变量, var test=function(){
alert("################");
}
函数不加(),代表这整个函数。
回调函数:变量解决不了的问题,传一个函数进去。
例:function talble(start,end,check){
for(var i=start;i<end;i++){
if(check(i)){
document.write(i+"<br/>");
}
}
}
//1.从这个函数中(10,500)取出3的倍数
//2.从这个函数中(-200,200)取出负数
table(10,500,function(num){
if(num%3==0){
return true;
else
return false;
}
})
函数只有调用才能使用到,
应用:
全局:在函数外面声明的变量
局部:在函数内部声明的变量
var test=10;
function demo(){test+=20} demo();demo(); alert(test);-----50
九、对象
十、内置js对象
十一、数组
DOM和BOM
DOM-----文档对象模型
document(HTML或XML)
object对象(html元素转成的js对象)
1.转成对象的方式:
a.标记名(多个) ---id(唯一) ,,name(多个)
doucument.getElementsByTagName("div")-----document.getElementyById()-----document.getElementsByName()
2.操作属性
var shopping = document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");
3.操作内容
innerText----火狐里不兼容,ie能用,火狐的话用textContent
innerHTML(设置或取出内容,带上了HTML标签)
4.操作样式
对象.style.backgroundColor=""
对象.style.fontSize=""
对象.className=""---------批量操作
获取某个区域内的元素----document.getElementById().getElementsByTagName()
事件处理:
一、事件源:任何一个html元素(节点)body,div,button,p,a ,h1........
二、事件:你的操作
鼠标:
click 单击
dbclick 双击
contextmenu(在body)文本菜单
mouseover 放上
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动
键盘:
keypress
keyup
keydown
文档:
load: 加载(页面全部加载完后再执行)
unload: 关闭
beforeunload:关闭之前
表单:
focus:焦点
blur 失去焦点
submit:提交
change: 改变
其他:
scroll:滚动事件
selected:事件
三、事件处理程序
有3种方法加事件:
第一种:
格式:on事件---比如onclick onMouseover
<button onclick='getElementById("demo").innerHTML=Date()'>现在的时间是??</button>
第二种:
对象.on事件=处理程序
对象.onclick=function(){}
第三种:
<script for="事件源" event="事件">事件处理程序</script>
屏蔽右键按钮
<body oncontextmenu="return false"></body>
在外部引用的js里写 onload=function(){} ----------这样可以在页面全部加载完之后再执行相关操作了。。
事件对象:event 它的属性:srcElement 事件源对象
keyCode 事件发生时的键盘码
clientX 白色区域的x轴距离
clientY
screenX 屏幕的x轴
screenY
returnVlaue
cancleBubble 取消某个方法
event 这个事件对象在火狐里面不兼容,要想兼容,写:var ev=e || window.event;
<div onkeypress="show()">
<script>
function show(){
alert(event.keyCode);
}
</script>
</div>
定时器:setInterval(function(){},1000)
关闭定时器的操作:clearInterval();
setTimeout()
从载入后延迟指定的时间去执行一个表达式或者是函数;
仅执行一次 ;和window.clearTimeout一起使用.
setInterval()
在执行时,它从载入页面后每隔指定的时间执行 一个表达式或者是函数;(功能类似于递归函数);和window.clearInterval一起使用.
鼠标移动上去图片能够移动:
<div id="one" style="position:absolute;left:100px;top:100px;width:200px;height:30px;background:red;"></div>
<script>
var one=document.getElementById("one");
var down=false;
var dx=0;
var dy=0;
document.onmousemove=function(e){
var ev=e || window.event;
if(down){
one.style.top=ev.clientY-(dy-sy);
one.style.left=ev.clientX-(dx-sx);
}
}
one.onmousedown=function(){
var ev=e || window.event;
dx=ev.clientX;
dy=ev.clientY;
sx=parseInt(one.style.left);
sy=parseInt(one.style.top);
if(!down)
down=true;
}
document.onmouseup=fuction(){
if(down)
down=false;
}
</script>
window对象:当前浏览器窗体--------所有对象都是窗体对象的子对象,,包括document,event,frames,location
它的属性:status
opener
closed
方法:alert()
confirm()----确认框 onclick="return confirm("您确定要取消吗?")"
setInterval()-----只要页面上动的东西,都要用到这个
clearInterval()
setTimeout()-----只执行一次
clearTimeout()
open()
做一个页面上滚来滚去的图片
<html >
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body> <div id="one" style="background:red;position:absolute;left:0;top:0;width:100px;height:100px;">我是广告</div> <script> var x=0;
var y=0; var xs=10;
var ys=10; var one=document.getElementById("one"); function move(){ x+=xs;
y+=ys;
if(x>=document.body.clientWidth-one.offsetWidth-20 || x<=0){
xs=-1*xs;
}
if(y>=document.body.clientHeight-one.offsetHeight-20 || y<=0){
ys=-1*ys;
} one.style.left=x;
one.style.top=y; } var dt=setInterval("move()",200);
one.onmouseover=function(){ clearInterval(dt);
}
one.onmouseout=function(){
dt=setInterval("move()",100);
} </script> </body>
</html>
window.open("url","窗口名称","窗口的相关参数");
用连接打开的窗口么有父子关系,用window.open方法打开的窗口存在父子关系。
找到父窗口:opener
做跑马灯效果
var num=0;
var dir=1;
var space="";
setInteval(function(){
if(num>40||num<0){
dir=-1*dir;
}
num+=dir;
var space="";
for(var i=0;i<num;i++){
space+="";
}
window.status=space+"www.brbphp.com";},100)
做frameset的时候也存在父子关系
window.parent.parent最外层的那个窗口
window.parent.parent.frames[0] 获得了分层结构的子窗口,数组形式,从上到下,从左到右数
window.parent.parent.frames['main'] 也可以通过name来查找
window对象中的常用对象属性:
它的子对象:document--
location---跳转位置
html的跳转--<meta http-equiv="refresh" content="3;url=http://www.baidu.com">--3秒钟后刷新这个页面
js的跳转:window.navigate(url)
location.href='url'
location='url';也可以跳转
location.replace=('url')---前面的都是重定向,这个是替换,后退不回去
location.reload();-----刷新,可放在定时器里定时刷新。
要记住的:
location='url',,,,,,,location.reload();
history----历史对象
javascript:history.back()
javascript:history.go(-1)--返回上一步,,-2就是返回上两步
screen---屏幕对象
screen.width
表单对象:
document.forms.username;
document.表单名称.username----取表单的内容
表单的属性:
action
method
title---不常用
enctype
表单的方法:
submit();
事件:
onfocus();焦点事件
onblur();失去焦点
onchange();内容改变触发
登陆界面光标为表单第一个输入框:
onload="document.getElementById("表单的id").username.focus()"----用户操作更方便
onsubmit---表单提交之前触发,成功了就提交过去了,失败了就提交不过去
<form name="" action="" onsubmit="return check()" method="">
document.form(表单名称).username.value=='' -----取表单内容
onscroll=""-----滚动事件
-----------页面上有一个图片随着滚动条移动位置不变---------------------
<style>
#tu{
position:fixed;-----相对于html的位置,可以防止在拉动滚动条时 出现图片闪烁
top:100px;
left:100px;
}
</style>
<body>
<testarea cols="100" rows="100"></textarea>
<img src="" id="tu">
</body>
注意:文件头加上dtd文件头
jquery