目录
confirm()
用于弹出一个带有确认和取消按钮的提示框。需要字符串来作为参数，该字符串将作为提示内容。
点击确认返回true，点击取消返回false，故可通过返回值来做不同的功能。
Dom增删改
需要父节点的方法可以通过 子节点.parentNode 来获取更为方便
使用innerHTML也可以完成DOM增删改的操作，如：
增：父节点.innerHTML+="<li>xxx</li>";
但会修改整个网页中该标签的结构，所以一般会结合使用，如：
var li =document.creatElement("li");
li.innerHTML="xxx";
city.appendChild(li);增
document.createElement("xxx");
可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据改标签名创建元素节点对象，并将创建好的对象作为返回值返回
document.createTextNode("xxx");
可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
父节点.appendChild(子节点);
向一个父节点添加一个子节点
父节点.insertBefore(新节点,旧节点)
可以指定的子节点前插入新的子节点
删
父节点.removeChild(子节点);
删除一个子节点
改
父节点.replaceChild(新节点,旧节点);
可以使用指定的子节点替换已有的子节点
超链接解除默认行为
点击超链接之后，超链接会跳转页面，这是超链接的默认行为，若不希望出现该默认行为，可以通过在响应函数的最后添加 return false 来取消默认行为。
或者通过在href中写入 "java.script:;" 也可以取消该默认行为。
超链接索引问题
for循环会在页面加载完之后立即执行，而响应函数会在超链接被点击时才执行。当响应函数执行时，for循环已经执行完毕。故若要获取一个数组内的超链接，要使用this来指定。
操作内联样式
通过JS修改元素的样式
语法：元素.style.样式名="样式值";
注意：如果样式名中有"-"，这种情况在JS中是不合法的。故要将这种样式名修改为驼峰命名法，即将"-"后的字母改为大写。
我们通过style属性设置的样式都是内联样式
读取元素的样式值
语法：元素.style.样式名
注意：通过style属性读取的是内联样式，故无法读取样式表中的样式。
获取元素的样式值
语法：元素.currentStyle.样式名
它可以用来读取当前元素的样式值
只支持IE浏览器
getComputedStyle()
该方法需要两个参数
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般情况下传null
该方法会返回一个对象，对象中封装了当前元素对应的样式。故若要读取元素的样式值，要通过该对象对应的样式名属性来读取，如：getComputedStyle(box,null).width;
该方法获取的是样式真实值，而不是默认值，如：没有设置width，不会获取auto，而是实际长度
该方法不支持IE8及以下的浏览器
若要两者都兼容，可通过如下做法：
function getstyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}
else{
return obj.currentStyle[name];
}
}通过currentStyle和getComputedStyle()读取到的样式都是只读的，无法修改。若要修改必须通过style属性
其他样式相关的属性
以下属性都为只读，不可修改。若要修改只能通过style属性。
clientWidth
该属性可以获取元素的可见宽度
clientHeight
该属性可以获取元素的可见高度
上述两种属性不返回单位，且这两种属性会获取元素的宽度和高度，包括内容区和内边距。
offsetWidth
获取元素整个的宽度
offsetHeight
获取元素整个的高度
上述两种属性会获取元素的宽度和高度，包括内容区、内边距和边框。
offsetParent
可以用来获取当前元素的定位父元素，会获取到离当前元素最近开启了定位的祖先元素。
如果所有的祖先元素都没有开启定位，则返回body。
offsetLeft
当前元素相对于其定位元素的水平偏移量
offsetTop
当前元素相对于其定位元素的垂直偏移量
scrollWidth
获取元素整个滚动区域的宽度
scrollHeight
获取元素整个滚动区域的高度
scrollLeft
获取水平滚动条移动的距离
scrollTop
获取垂直滚动条移动的距离
当满足scrollHeight - scrollTop == clientHeight时，表示垂直滚动条移动到了底部。
当满足scrollWidth - scrollLeft == clientWidth时，表示水平滚动条移动到了最右部。
事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘当前哪个键被按下。
在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。
如果要兼容所有浏览器可以：
obj.onmousemove=function(event){
if(!event){
event=window.event;
}
//或者
event=event || window.event;
}clientX
可以获取鼠标指针的水平坐标
clientY
可以获取鼠标指针的垂直坐标
上述两种属性的值是相对与当前可见窗口而言的
pageX
可以获取鼠标相对于当前页面的水平坐标
pageY
可以获取鼠标相对于当前页面的垂直坐标
上述两种属性在IE8及以下不支持
target
返回触发事件的对象
事件冒泡
事件冒泡（Bubble），所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。如果要取消事件冒泡，可通过事件对象来取消。
cancelBubble
该属性可以取消冒泡。通过将事件对象的cancelBubble设置为true，即可取消冒泡。
事件委派
指将事件统一绑定给元素共同的祖先元素，这样该元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派利用了冒泡，通过委派可以减少事件绑定的次数，提高性能。例如：
//给ul中类名为link的标签委派一个事件
var ul=document.getElementsByTapName("ul")[0];
ul.onclick=fuction(event){
event=event||window.event;
if(event.target.className=="link"){
语句
}
};事件的绑定
使用 对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个。
addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
第一个，事件的字符串，无on
第二个，回调函数，当事件触发时该函数会被调用
第三个，是否在捕获阶段触发事件，需要一个布尔值，一般传false
该方法可以同时为一个元素的相同事件绑定多个响应函数。当事件触发时响应函数将会按照函数的绑定顺序执行。该方法不支持IE8及以下的浏览器。
该方法中的this是绑定事件的对象
attachEvent()
在IE8及以下可以使用该方法来绑定事件
参数：
第一个，事件的字符串，需要on
第二个，回调函数
该方法也可以同时为一个事件绑定多个响应函数。不同的是，该方法是后绑定先执行。
该方法中的this是window
bind函数（若要使this指向绑定事件的对象可通过如下操作）：
function bind(obj,eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(eventStr,callback,false);
else {
obj.attachEvent("on"+eventStr,fuction(){
callback.call(obj); //解决this不同问题
});事件的传播
事件传播有三个阶段
1.捕获阶段
从最外层的祖先元素向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
事件捕获到了目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
滚动条练习
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动条练习</title>
<style>
#info{
width:300px;
height:500px;
background-color: #bfa;
overflow: auto;
}
</style>
<script>
window.onload=function(){
//获取id为info的p元素
var info=document.getElementById("info");
var btn01=document.getElementById("btn01");
var btn02=document.getElementById("btn02");
//为info绑定一个滚动条滚动事件
info.onscroll=function(){
//检查垂直滚动条是否到底部
if(info.scrollHeight-info.scrollTop==info.clientHeight){
//到底部使表单项可用
btn01.disabled=false;
btn02.disabled=false;
}
}
//我们还要实现必须要勾选第一个按钮，才能按下提交按钮
btn02.onclick=function(){
if(btn01.checked==true){
alert("恭喜您注册成功！");
}
else{
alert("请勾选前面的协议条款，谢谢！");
}
}
}
</script>
</head>
<body>
<h1>欢迎亲爱的用户注册</h1>
<p id="info">
在用户注册及使用本服务时，需要搜集能识别用户身份的个人信息以便可以在必要时联系用户，或为用户提供更好的使用体验。搜集的信息包括但不限于用户的姓名、性别、年龄、出生日期、身份证号、地址、学校情况、公司情况、所属行业、兴趣爱好、常出没的地方、个人说明；同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束
在用户注册及使用本服务时，需要搜集能识别用户身份的个人信息以便可以在必要时联系用户，或为用户提供更好的使用体验。搜集的信息包括但不限于用户的姓名、性别、年龄、出生日期、身份证号、地址、学校情况、公司情况、所属行业、兴趣爱好、常出没的地方、个人说明；同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束
在用户注册及使用本服务时，需要搜集能识别用户身份的个人信息以便可以在必要时联系用户，或为用户提供更好的使用体验。搜集的信息包括但不限于用户的姓名、性别、年龄、出生日期、身份证号、地址、学校情况、公司情况、所属行业、兴趣爱好、常出没的地方、个人说明；同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束
在用户注册及使用本服务时，需要搜集能识别用户身份的个人信息以便可以在必要时联系用户，或为用户提供更好的使用体验。搜集的信息包括但不限于用户的姓名、性别、年龄、出生日期、身份证号、地址、学校情况、公司情况、所属行业、兴趣爱好、常出没的地方、个人说明；同意对这些信息的
</p>
<!--如果表单项添加 disabled="disabled"，则表单项将变为不可用状态-->
<input type="checkbox" disabled="disabled" id="btn01">我已仔细阅读该协议并遵守
<input type="submit" disabled="disabled" value="注册" id="btn02">
</body>
</html>
为表单项添加disabled="disabled"，则表单项将变成不可用的状态。
onscroll
该事件会在元素的滚动条移动时触发
拖拽练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
height: 300px;
width: 300px;
background-color: aquamarine;
position: absolute;
}
#box2{
height: 200px;
width: 200px;
background-color: antiquewhite;
position: absolute;
}
</style>
<script>
window.onload=function(){
drag("box");drag("box2");
function drag(c){ //函数方便调用
var obj=document.getElementById(c);
obj.onmousedown=function(event){
if(obj.setCapture)
obj.setCapture(); //解决在IE8中拖拽异常问题
event=event||window.event;
var ol=event.clientX-obj.offsetLeft; //获取鼠标在div中的偏移量
var ot=event.clientY-obj.offsetTop;
document.onmousemove=function(event){
event=event||window.event; //解决事件对象兼容性问题
var left=event.clientX-ol; //获取（鼠标的坐标 - 鼠标在div中的偏移量）
var top=event.clientY-ot;
var sl=document.body.scrollLeft||document.documentElement.scrollLeft; //获取滚动条滚动的距离，同时解决不同浏览器兼容问题
var st=document.body.scrollTop||document.documentElement.scrollTop;
obj.style.left=left+sl+"px"; //更改box的偏移量
obj.style.top=top+st+"px";
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null; //解决鼠标在任何地方松开触发事件问题
if(obj.releaseCapture)
obj.releaseCapture(); //解决在IE8中拖拽异常问题（即全选时会拖拽文字）
};
return false; //解决拖拽功能异常（IE8不起作用）
};
};
}
</script>
</head>
<body style="height: 1000px; width: 1000px;">
<p>wenzi</p>
<div id="box">
</div>
<div id="box2">
</div>
</body>
</html>onmousemove
该事件将会在鼠标在元素中移动时被触发
onmousedown
鼠标按键在元素中被按下时触发
onmouseup
鼠标按键在元素中被松开时触发
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
