文档对象模型:dom
浏览器对象模型:bom
js是以时间驱动为核心的语言
onkeyup:按下并且释放键盘出发的事件
ondbclick:双击鼠标
onfocus:获取焦点
onblur:失去焦点
onmouseover:鼠标悬停
onmouseout:鼠标移出
onload:网页文档加载事件
onunload:网页关闭时
onsubmit:表单提交事件
onreset:表单重置事件
oninput:文本框的内容发生变化就触发,不管是否失去焦点
绑定标签:
doucment.getElementById("id");
返回值为一个标签可以直接使用。
获取属性值,设置属性值。
var a = doucment.getElementsByTagName("input");
返回值为一个标签数组,习惯性遍历后直接使用,即便是一个元素那也是一个数组,没有元素就是一个空数组。
a[0].className=="...";
document.getElementsByClassName("aaa");
返回值为一个标签数组,习惯性遍历后直接使用,即便是一个元素那也是一个数组,没有元素就是一个空数组。
只有绑定id的时候不加s,因为id是独一无二的,其他时候Element都加s
var div = document.getElementById("box");
div.οnclick=function(){
设置属性:
div.className="aaa";
设置样式
注意格式:加引号,在css中没有引号,在js中全部要加引号;
div.style.height="100px";
js中不允许"-",所有的斜杠去掉,后面接大写字母;
div.style.backgroundColor="red";
window.οnlοad=function(){};
页面加载完毕触动这个事件,页面加载完毕包括文本和图片。
整个页面所有元素加载完毕,再执行onload的中的代码
页面加载从上往下加载,如果这个js在中间,js操作的标签位置在后面,这个时候就会报错。
js和html是同步加载的,从上往下依次加载
如果使用元素在定义元素之前会报错。
div.className="...";将原来的class属性先删除,然后在重新复制
div.className +="..";原来的属性不删除,在class后面再追加一个属性
修改img标签的src图片路径
img.src="jd.png";
等价于
img["src"]="jd.png";
等价于
img.setAttribute("src",jd.png);
}
在函数中js指函数的调用者
js父子兄节点啊关系:
父节点:
parentNode 该节点.parentNode
兄弟节点:sibling就是兄弟的意思
nextSibling 下一个节点
nextElementSibling 下一个元素节点
兼容性写法:
下一个兄弟节点:该节点.nextSibling||该节点.nextElementSibling
previousSibling 上一个节点
previousElementSibling 上一个元素节点
子节点:
firstChild
firstElementChild
lastChild
lastElementchild
所有子节点:返回的是数组
childNodes
children
火狐谷歌等高版本会把换行看作为子节点
nodeType=1 元素节点
nodeType=2 属性节点
nodeType=3 文本节点
创建节点:
document.createElement("标签名");
var aaa=document.createElement("li");
插入节点:
父节点.appendChild(新节点);父节点的最后插入一个几点
父节点.appendChild(aaa);父节点的最后插入一个几点
父节点.insertBefore(新节点,参考节点);在参考节点前插入
父节点.insertBefore(aaa);
删除节点:
父节点.removeChild(子节点);
var bbb=document.getElementById("aaa");
var ccc=bbb.parentNode;
ccc.removeChild(bbb);
复制节点:
新节点=要复制的节点.cloneNode(参数);参数可选复制节点
可接受一个布尔值参数,
true表示深复制,复制节点本身及其所有的子节点
false表示浅复制,复制节点本身,不包括子节点
属性操作:getAttribute();setAttribute();removeAttribute();
div.getAttribute("");
div.setAttribute("key","value");
div.removeAttribute("");
禁止a链接跳转
a.οnclick=function(){
return false;
}
也可以用
在a标签内加上οnclick=fn();return false;
a链接中有onclick事件时,点击a链接先执行onclick中的事件然后在跳转a标签页面
修改某个标签的文字:btn.innerHTML="修改的内容";
判断某个标签中的文字
if{btn.innerHTML==""){}
for(var i=0;i<arr.length;i++){
arr[i].onclick(){
img.src=this.href;//arr[i]不好使,要用this,this是函数调用者,和i没有关系所有不会出错
return false;
}
}
value:获取标签的value属性 var a = a.val
innerHTML :获取双闭合标签的内容,识别标签 a.innerHTML("");
innerText:获取双闭合标签的内容,不识别标签 (原样输出) a.innerText("");
textContent
p不能嵌套p
a不能嵌套a
h1不能嵌套h1
oninput:文本框的内容发生变化就触发,不管是否失去焦点
<input type="text" value="" name="" id="in">
<script type="text/javascript">
var in=document.getElementById("in");
in.οninput=function(){
console.log(this.value);
}
</script>
<input type="text" name="" value="" οnblur="fn(this);">
<script type="text/javascript">
function fn(aaa){
var a= aaa.value;
}
</script>
fn在input中必须传递this,不能用this.value,因为这个时候this代表window,是input标签调用window然后window调用onblur,如果在括号你加上this,这是传递的就是input标签本身。
select标签设置默认
optionId.selected='true';
如果去掉不能false,应该将selected属性移除
optionId.removeAttribute("selected");
全选全不选
//this表示最上面的checkBox
for(var i=0;i<check.length;i++){
check.checked=this.checked;
}
arguments和通过标签获取的数组都是伪数组,不能用every等方法,如果要用就得遍历通过push放入真正的数组中
onselect:选中文本
成员变量是window的一个方法和属性
var newWindow=window.open(url,target,param)
url:要打开的地址
target:新窗口的位置 _self _blank _parent
param:新窗口的一些设置
返回值新窗口的句柄
//关闭窗口
window.close()
//移动窗口
新窗口.moveTo(5,5)
newWindow.moveTo(5,5)
新窗口.moveBy()
newWindow.moveBy(5,5)
//改变窗口的大小
新窗口.resizeTo()
newWindow.resizeBy()
name:新窗口的名字
fullscreen:{yes/no/1/0}是否全屏,默认no
channelmode:{yes/no/1/0}是否显示频道栏,默认no
toolbar:{yes/no/1/0}是否显示工具条
location:{yes/no/1/0}是否显示地址栏
directories:{yes/no/1/0}是否显示转向按钮
status:{yes/no/1/0}是否显示窗口状态条
menubar:{yes/no/1/0}是否显示菜单
scrollbars:{yes/no/1/0}是否显示滚动条,默认yes
resizable:{yes/no/1/0}是否窗口调整大小,
width
height
top
left
var json{"name":"新窗口",
"fullscreen":"no",
"":"",
"":"",
"":"",
"":"",
"":"",}
window.open("http://www.baidu.com" "_blank",json)
跳转:
location.href="网址",
window.open("网址","_blank");
location对象
href
hash:url中#后面的内容,包括#
hostname:主机名
host:主机名包括端口
pathname:url路径部分
protocol:协议一般是指,http,https
search:查询字符串
navigator:获取客户端的一些信息
userAgent:(系统浏览器)
platform:浏览器支持的系统,win/mac/linux
console.log(navigator.userAgent)
console.log(navigator.platform)
history
//后退一个
history.back()
history.go(-1)
//刷新
history.go(0)
//前进
history.go(1)
history.forward()
定时器
setTimeout(执行事件,间隔时间);//只执行一次,可以用递归调用,就是循环执行器了
五秒后跳转到某个网站
var timeOut=setTimeout(function(){
location.href="网址";
},5000)
setTimeout(方法,定时);
setInterVal(执行事件,间隔时间);//循环执行器,一直执行下去
//循环一秒钟执行一次
var num=0;
var interVal=setInterVal(function (){
alert(num++)
},1000);
setInterVal(fn,1000);//不带括号
function fn(){
alert("111");
}
//如果要传递参数就一定要给函数加引号
setInterVal("fn(11)",1000);
function fn(aa){
alert("aa");
}
清除定时器:
clearInterVal(定时器的名字);
clearTimeOut(定时器的名字);
setTimeout,setInterVal的返回值就是定时器的名字
var num=0;
var timer=setInterVal(function (){
alert(num++)
if(num==10){
cleanInterVal(timer);
}
},1000);
透明度:
opacity为1就是不透明,opacity为0表示完全透明
css设置opacity为1--style="opacity:1"
透明度递减 xx.style.opacity-=0.1;
var timer=setInterVal(function(){
xxx.style.opacity-=0.1;
if(xxx.style.opacity==0){
xxx.style.display=none;
clearInterval(timer);
}
},1000);
向下取整
Math.floor();
向上取整
Math.ceil();
随机数
Math.random();
绝对值
Math.abs();
四舍五入
Math.round();