JS=DOM+BOM+基本语法
排序
children 获取的是元素集合；是类数组，但是没有数组的一些方法和属性，
排序：先存放在新的数组里，在用数组的sort排序，
用for循环添加到新的元素内；
<script type="text/javascript">
var ul=document.getElementsByTagName('ul')[0];
var btn=document.getElementsByTagName('input')[0];
//elements collection 元素集合 他们是类数组结构 但是不是真正的数组 没有数组的一些方法和属性
btn.onclick = function(){
var aLi = [];//是数组
for(var i=0;i<ul.children.length;i++){
aLi.push( ul.children[i] );
}
aLi.sort(function(li1, li2){
//从html中获取的值都是字符串 innerHTMl value
return li1.innerHTML - li2.innerHTML;
})
for(var i=0;i<aLi.length;i++){
ul.appendChild(aLi[i]);
}
}
</script>
位置和尺寸
位置:
offsetLeft, offsetTop
如果没有定位父级:offsetParent -> body；
到文档顶部位置的函数:
function getPos(obj) {
var pos = {left:0, top:0};
while (obj) {
pos.left += obj.offsetLeft;//100 + 100 + 10 + 0
pos.top += obj.offsetTop;//80+ 80+10 + 0
obj = obj.offsetParent;//null
}
return pos;
}
尺寸:
style.width : 样式宽 ;
clientWidth : 可视区宽 ;
offsetWidth : 占位宽;
看下面~~~
<div style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>;
<script>
alert( oDiv.style.width ); //100px 获取到的是字符；只能获取行内样式的
alert( oDiv.clientWidth ); //样式宽 + padding 120
alert( oDiv.offsetWidth ); //样式宽 + padding + border 122
</script>
操作元素属性的多种方式
setAttribute();
getAttribute();
<body>
<div class="div"></div>
</body>
<script>
var div=document.getElementsByTagName('div')[0];
div.setAttribute('id','box');
console.log(div.getAttribute('id'));
</script>
BOM
Browser Object Model :指浏览器对象模型；
window.innerHeight，获取浏览器当前高度；
window.innerWidth；获取浏览器当前宽度；
scrollX、scrollY：
window.scrollX：滚动条横向偏移
window.scrollY：滚动条纵向偏移
window.scrollTo(0,300)：两个参数分别是水平、垂直方向偏移；移动到绝对位置
window.scrollBy(0,300)：两个参数分别是水平、垂直方向偏移；相对当前位置移动滚动
<script>
// window.onclick=function(){
// alert(window.innerHeight);
// alert(window.innerWidth);
// }
//scrollBy
// var timer=setInterval(function(){
// // var height=window.innerHeight;
// window.scrollBy(0,100);
// var scrollY=window.scrollY;
// if(scrollY>3000-window.innerHeight){
// clearInterval(timer);
// }
// },500)
//scrollTo
var timer=setInterval(function(){
var scrollY=window.scrollY;
scrollY+=100;
window.scrollTo(0,scrollY);
if(scrollY>3000-window.innerHeight){
clearInterval(timer);
}
},500)
</script>
navigator
window.navigator.userAgent属性返回浏览器的User-Agent字符串，用来标示浏览器的种类。
<script>
//Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
console.log( window.navigator.userAgent );
</script>
window.open(url) 打开新窗口
<body>
<button>打开新窗口</button>
<script>
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
window.open('http://www.baidu.com');
}
</script>
</body>
浏览器相关事件
window.onscroll window.onresize
<script>
//onscroll 滚动时触发
var i=0;
window.onscroll = function(){
i++;
document.title = i;
}
//onresize 改变窗口大小是触发
window.onresize = function(){
i++;
document.title = i;
}
</script>
回到顶部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
width:3000px;
height:3000px;
}
div{
width:70px;
height:70px;
background:#f9c;
text-align: center;
line-height: 70px;
position: fixed;
right:80px;
bottom:100px;
display: none;
}
</style>
<script>
window.onload=function(){
var div=document.getElementsByTagName('div')[0];
window.onscroll=function(){
var scrollY=window.scrollY;
if(scrollY>1500-window.innerHeight){
div.style.display='block';
}else{
div.style.display='none';
}
}
div.onclick=function(){
window.scrollTo(0,0);
div.style.display='none';
}
}
</script>
</head>
<body>
<div>回到顶部</div>
</body>
</html>
事件冒泡
事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制
取消冒泡
event.stopPropagation()
<script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1(ev) {
alert( this.id );
ev.stopPropagation();//阻止冒泡
}
oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;
//事件冒泡
</script>
事件对象
事件必须是第一个形参；事件对象是在函数内部使用；
触发DOM上的某个事件时：产生的相关信息
event.clientX ：事件被触发时鼠标指针距浏览器水平方向的距离
event.clientY：事件被触发时鼠标指针距浏览器垂直方向的距离
<script>
var oDiv = document.getElementsByTagName('div')[0];
window.onclick = function(event){
console.log(event.clientX, event.clientY);
}
</script>
网友评论