浏览器加载一个页面时,是按照自上而下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面上边,在代码执行的时候,页面还没有完全加载
window.onload事件会在整个页面加载完成之后,才会触发,将对应的script代码,写在里面,可以确保script代码可以在页面加载完成之后,才会执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠</title>
</head>
<body>
<div id="div"><strong>嘿嘿</strong></div>
<script type="text/javascript">
window.onload=function()
{
//返回的是元素数组对象
var d1=document.getElementById("div");
alert(d1.innerHTML);
}
</script>
</body>
</html>
innerHTML在JS是双向功能:获取对象的html内容 或 向对象插入html内容
我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容;
也可以对某对象插入内容,如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;
//返回的是元素数组对象
var d1=document.getElementById("div");
//读取或设置节点class属性
d1.className
//id属性
d1.id
//name属性
d1.name
//value属性
d1.value
childNodes属性会获取包括文本节点在内的所有节点,注意DOM标签与标签之间的空白也会被当成文本节点
在IE8一下的浏览器中,不会将空白文本当成子节点,所以该属性再IE8中会返回4个子元素,而其他浏览器都是9个
firstElementChild不支持IE8和一下的浏览器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠</title>
</head>
<style>
div
{
height: 50px;
width: 100px;
}
</style>
<body>
<div>
<button id="btn1">按钮1</button>
</div>
<div>
<button id="btn2">按钮2</button>
</div>
<div>
<button id="btn3">按钮3</button>
</div>
<script type="text/javascript">
//写一个通用按钮的回调函数
//str: 按钮的id
//function:回调函数,按钮按钮后的反应
function btnPress(str,f)
{
var btn=document.getElementById(str);
//将function函数与按钮点击事件绑定在一起
//只有对应事件触发,函数就会立刻执行
btn.onclick=f;
return btn;
}
//按钮1
var b1=btnPress("btn1",function()
{
b1.innerHTML="你小子按我干嘛?";
});
//按钮2
var b2=btnPress("btn2",function(){
b2.innerHTML="你小子又按我干嘛?";
});
//按钮3
var b3=btnPress("btn3",function(){
b3.innerHTML="你小子又又按我干嘛?";
});
</script>
</body>
</html>
和Innerhtml类似,但是它会自动将html标签去除掉
获取到的是空白文本节点
获取前一个兄弟元素,IE8不支持
//获取body标签
//var b=document.getElementsByTagName("body");
//方式2:
var body=document.body;
alert(body);
var html=document.documentElement;
alert(html);
document.querySelector()
需要一个选择器的字符串作为参数,可以根据一个 CSS 选择器来查询一个元素节点对象
虽然 IE8 中没有 getElementsByClassName()但是可以使用 document.querySelector()代替
使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
document.querySelectorAll()
该方法和 document.querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个,它也会返回数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠</title>
</head>
<body>
<ul>
<li>大忽悠</li>
</ul>
<script type="text/javascript">
//创建li元素节点对象
var li=document.createElement("li");
//创建文本节点对象
var text=document.createTextNode("小朋友");
//将文本节点对象添加到li标签中
li.appendChild(text);
//将li标签添加到ul标签中
document.getElementsByTagName("ul")[0].appendChild(li);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠</title>
</head>
<body>
<ul>
<li>大忽悠</li>
</ul>
<script type="text/javascript">
var li=document.createElement("li");
var text=document.createTextNode("小朋友");
li.appendChild(text);
var u1=document.getElementsByTagName("ul")[0];
var l1=document.getElementsByTagName("li")[0];
//在指定的子节点前面插入子节点
u1.insertBefore(li,l1);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠</title>
</head>
<body>
<ul>
<li>大忽悠</li>
</ul>
<script type="text/javascript">
var li=document.createElement("li");
var text=document.createTextNode("小朋友");
li.appendChild(text);
var u1=document.getElementsByTagName("ul")[0];
var l1=document.getElementsByTagName("li")[0];
//在指定的子节点前面插入子节点
u1.replaceChild(li,l1);
</script>
</body>
</html>
(1) < a href=“javascript:void(0);” οnclick= “myjs( )” > Click Me < /a > onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。 < a href=“javascript:;” > Click Me < /a> 和void(0)一样,都返回"undefined"
(2) < a href="#"> Click Me < /a> 是网上很常见的代码,#是标签内置的一个方法,用这种方法点击后网页后返回到页面的最顶端所以又有了“##”“#!”等,尽管解决了返回顶部的问题但仍存在其他缺陷
(3)事件处理函数的工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后, 如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接呗点击了,同样的若返回false即会认为链接 未被点击 <a href=“http://www.baidu.com” οnclick=" myjs(); return false; “> Click Me < /a> <a href=“http://www.baidu.com” οnclick=” return false; "> Click Me < /a> 当点击a标签时,JavaScript代码返回值为false,故此链接默认行为未被触发。
语法: 元素.style.样式名=样式值
<style>
div{
background-color: aqua !important;
}
</style>
样式表即css设置的样式
全局对象window,全局作用域中所有变量都是其属性,所有函数都是其方法
变量如果没找到会报错,而属性如果没找到会返回undefined,因此我们需要在getComputedStyle前面加上一个window标识是对象的方法
不包括边框
开启定位:只要position值不是static即为开启定位
overflow: hidden; 将子元素溢出的部分隐藏起来
overflow: auto;如果内容被修剪,则浏览器会显示滚动条,以便查看其余内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
#d2
{
width: 300px;
height: 700px;
background-color: cadetblue;
}
#d1
{
width: 500px;
height: 500px;
background-color: whitesmoke;
overflow: auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<script>
var d1=document.getElementById("d1");
alert(d1.scrollHeight);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
#d2
{
width: 300px;
height: 700px;
background-color: cadetblue;
}
#d1
{
width: 500px;
height: 500px;
background-color: whitesmoke;
overflow: auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<button>按钮</button>
<script>
var d1=document.getElementById("d1");
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function()
{
alert(d1.scrollTop);//获取垂直滚动的距离
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
#p1{
width: 200px;
height: 200px;
overflow: auto;
background-color: aliceblue;
}
</style>
</head>
<body>
<p id="p1">
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
我已经知情了<br/>
</p>
<!-- 默认禁用,除非将滚动条滑动到最底部 -->
<input type="checkbox" disabled="disabled"/>我同意上面的协议
<script>
//首先绑定一个滚动条滚动的事件
var p1=document.getElementById("p1");
p1.onscroll=function()
{
//如果滚动条滑动到了最底部,那么设置多选框可以选择
if(p1.clientHeight==p1.scrollHeight-p1.scrollTop)
{
alert("滚动条最底部");
//true为禁用,false为可用
document.getElementsByTagName("input")[0].disabled=false;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
#d1{
width: 200px;
height: 50px;
background-color:lawngreen;
}
#d2{
width: 200px;
height: 20px;
background-color: chocolate;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<script>
var d1=document.getElementById("d1");
var d2=document.getElementById("d2");
d1.onmousemove=function(event)
{
//解决事件对象兼容性问题
event=event||window.event;
d2.innerHTML="<strong>坐标x ="+event.clientX+" 坐标y ="+event.clientY+"</strong>";
}
</script>
</body>
</html>
//针对IE8以下浏览器不会将事件对象传入到事件函数的参数中
event=event||window.event;
//针对浏览器滚动条归属权的不同做出的兼容性写法
var st=document.body.scrollTop||document.documentElement.scrollTop;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
#d1{
width: 50px;
height: 50px;
background-color:lawngreen;
/*
开启d1的绝对定位
*/
position: absolute;
}
</style>
</head>
<body>
<div id="d1">就跟着你了</div>
<script>
//div要想跟着鼠标移动,需要设置一个绝对路径
var d1=document.getElementById("d1");
//这里触发鼠标移动事件应该是整个页面,不然鼠标移动出了div,事件就失效了
document.onmousemove=function(event)
{
//兼容性写法
event=event||window.event;
//使用pageX和pageY的写法,IE8不支持
//设置div的偏移量为鼠标移动的偏移量
d1.style.left=event.pageX+"px";
d1.style.top=event.pageY+"px";
}
</script>
</body>
</html>
问题:
如果一次性为全部包括新增的超链接绑定单击响应事件呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<ul id="u1">
<li><a href="javascript:;">大忽悠</a></li>
<li><a href="javascript:;">小朋友</a></li>
<li><a href="javascript:;">大朋友</a></li>
</ul>
<button id="btn">点击新增超链接</button>
<script>
var b1=document.getElementById("btn");
var u1=document.getElementById("u1");
b1.onclick=function()
{
u1.innerHTML+="<li><a href='javascript:;'>新增超链接</a></li>";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<ul id="u1">
<li><a href="javascript:;" class="dhy">大忽悠</a></li>
<li><a href="javascript:;" class="dhy">小朋友</a></li>
<li><a href="javascript:;" class="dhy">大朋友</a></li>
</ul>
<button id="btn">点击新增超链接</button>
<script>
var b1=document.getElementById("btn");
var u=document.getElementById("u1");
b1.onclick=function()
{
u1.innerHTML+="<li><a href='javascript:;' class='dhy'>新增超链接</a></li>";
}
//为ul绑定一个单击响应函数
u.onclick=function(event)
{
event=event||window.event;
//如果触发事件的对象是我们期望的对象,则执行操作
if(event.target.className=="dhy")
{
alert("超链接被点击");
}
}
</script>
</body>
</html>
<button id="btn">小朋友</button>
<script>
var b1=document.getElementById("btn");
b1.attachEvent()("click",function(){
alert("大忽悠 stay with 小朋友")
},false);
</script>
匿名函数由window对象调用,但是在匿名函数内部,我们通过函数对象calllback调用call方法,改变了调用当前callback的this对象,从而完成了调用对象的统一性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠</title>
</head>
<style>
#d1
{
width: 200px;
height: 200px;
background-color: #1E9FFF;
/* 开启决定定位后,才能移动 */
position: absolute;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
<script>
//d1调用拖拽函数
var d1=document.getElementById("d1");
//调用拖拽函数
moveWithMe(d1);
//封装一个拖拽函数
function moveWithMe(obj)
{
//当鼠标在obj区域里面按下时,触发鼠标按下的事件
obj.onmousedown=function(event)
{
event=event||window.event;
//设置obj对所有鼠标点击事件的捕获
//浏览器兼容
obj.setCapture&&obj.setCapture();
//div的偏移量计算
var lx=event.clientX-obj.offsetLeft;
var ly=event.clientY-obj.offsetTop;
//当触发鼠标按下事件之后,obj会跟随鼠标移动
//即触发鼠标在当前页面的移动事件
//因为此时鼠标已经在obj内部按下了,
//此时只要确保鼠标的移动偏移量与obj一致即可
document.onmousemove=function(event)
{
//兼容IE8的window.event
event=event||window.event;
//鼠标的移动偏移量与obj一致即可
//这里返回的是一个number类型的数值,我们需要在后面拼接一个px
obj.style.left=event.clientX-lx+"px";
obj.style.top=event.clientY-ly+"px";
};
//当obj绑定一个鼠标松开事件,当鼠标松开的时候,obj的位置固定
documnet.onmouseup=function()
{
alert("hhh");
//取消鼠标移动事件
document.onmousemove=null;
//取消鼠标松开事件。确保是一次性事件
documnet.onmouseup=null;
//当鼠标松开时,释放点击事件的捕获
//浏览器兼容性
obj.releaseCapture&&obj.releaseCapture();
};
return false;
};
};
</script>
</body>
</html>
鼠标点击移动div,那么就让鼠标呆在点击出,而不是跑到左上角,计算出div在每次鼠标点击时需要的偏移量即可
d1.onmousewheel=function()
{
alert("鼠标滚轮滚动了");
};
//为div绑定一个鼠标滚轮事件
addEventListener("DOMMouseScroll",function(){
alert("鼠标滚轮");
},false)
<div id="d1"></div>
<script>
//d1调用拖拽函数
var d1=document.getElementById("d1");
//为div绑定一个鼠标滚轮事件
addEventListener("DOMMouseScroll",function(event){
//判断滚轮向上滚,还是向下滚
if(event.wheelDelta>0 || event.detail >0)
{
}
else{
}
//取消火狐的默认行为
event.preventDefault && event.preventDefault();
},false)
</script>
给document当前页面绑定键盘按下的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠</title>
</head>
<body>
<script>
//给document绑定键盘事件
document.onkeydown=function(event)
{
//打印按钮键的ascall编码
alert(event.keyCode);
}
</script>
</body>
</html>
给input输入框绑定键盘点击事件
不同的userAgent中会存储不同的浏览器信息,每个浏览器基本都有自己的唯一标记,可以通过正则表达式判断
location.href 属性返回当前页面的 URL。
也可以用来获取或者设置当前页面的URL
prompt("")函数用于弹出提示用户进行输入信息的文本框,其返回用户输入的字符串,里面输入的字符串是弹出框的标题 alert():弹出一个对话框
confirm弹出一个确认框
点击确认:
另一个同理
按钮点击开启一个定时器,因此需要在开启定时器前关闭上一次开启的定时器
追加属性记得加一个空格