一.位置信息
1.width() height()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
400px;
height: 400px;
position: relative;
top: 20px;
}
.box{
200px;
height: 200px;
background-color:yellow;
position: absolute;
top: 10px;
left: 90px;
border: 1px solid greenyellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
<script src="jQuery.js"></script>
<script>
$(function(){
//200 200
console.log($('.box').width());
console.log($('.box').height());
$('.box').width('230px');
$('.box').height('230px');
})
</script>
</body>
</html>
2.innerHeight() innerWidth() 包括padding，但是不包括border。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
400px;
height: 400px;
background-color:red;
position: relative;
top: 20px;
}
.box{
200px;
height: 200px;
background-color:yellow;
position: absolute;
top: 10px;
left: 90px;
border: 1px solid greenyellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
<script src="jQuery.js"></script>
<script>
$(function(){
//220 220
console.log($('.box').innerWidth());
console.log($('.box').innerHeight());
//设置时改变 的是盒模型content的大小 不能改变padding
console.log($('.box').innerWidth('250px'));
console.log($('.box').innerHeight('250px'));
})
</script>
</body>
</html>
3.outerWidth() outerHeight() 包括padding，border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
400px;
height: 400px;
background-color:red;
position: relative;
top: 20px;
}
.box{
200px;
height: 200px;
background-color:yellow;
position: absolute;
top: 10px;
left: 90px;
border: 1px solid greenyellow;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
<script src="jQuery.js"></script>
<script>
$(function(){
//222 222
console.log($('.box').outerWidth());
console.log($('.box').outerHeight());
//设置时改变 的是盒模型content的大小 不能改变padding和margin
console.log($('.box').outerWidth('250px'));
console.log($('.box').outerHeight('250px'));
})
</script>
</body>
</html>
4.offset() 偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
400px;
height: 400px;
background-color:red;
position: relative;
top: 20px;
}
.box{
200px;
height: 200px;
background-color:yellow;
position: absolute;
top: 10px;
left: 90px;
border: 1px solid greenyellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
<script src="jQuery.js"></script>
<script>
$(function(){
//获取距离
console.log($('.box').offset().top);
console.log($('.box').offset().left);
//设置距离
$('.box').offset({top:10,left:10})
})
</script>
</body>
</html>
5.scrollLeft() scrollTop() 滚动距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
400px;
height: 400px;
background-color:red;
position: relative;
top: 20px;
}
.box{
200px;
height: 200px;
background-color:yellow;
position: absolute;
top: 10px;
left: 90px;
border: 1px solid greenyellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
<script src="jQuery.js"></script>
<script>
$(function(){
//设置文档卷上去的距离
$(document).scrollTop(300);
//获取文档卷上去的距离
$(document).scroll(function() {
console.log($(this).scrollTop());
console.log($('this').scrollLeft());
})
})
</script>
</body>
</html>
二.事件流的概念
1.事件:HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，
可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
2.预备知识
在解释输出结果为什么是这样之前，还有几个知识点需要了解一下即可：
(1)、addEventListener
addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和
一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
(2)、document、documentElement和document.body三者之间的关系：
document代表的是整个html页面；
document.documentElement代表的是<html>标签；
document.body代表的是<body>标签；
图片(事件流)
3.jquery的常用事件
图片
4.例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.father{
300px;
height: 300px;
background-color:red;
}
</style>
</head>
<body>
<div class="father">
<button class="child">按钮</button>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
//每一个事件都默认传过来 一个event
$('.child').click(function(event) {
console.log('按钮被点击了');
console.log(this);
// currentTarget就等价于this
// console.log(event.currentTarget);
console.log(event.target);
//阻止事件冒泡
// event.stopPropagation()
});
$('.father').mouseenter(function(event) {
console.log(event.type);
console.log('父盒子被点击了');
console.log(this);
// console.log(event.currentTarget);
console.log(event.target);
// event.stopPropagation()
});
$('body').click(function(event) {
console.log(this);
// console.log(event.currentTarget);
// event.target 如果没有阻止事件冒泡，指的点击的目标对象
console.log(event.target);
console.log('body被点击了')
});
})
</script>
</body>
</html>
三.换肤()
重点:设置点击body和向上按钮都能slidedown
四.事件代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>小明</li>
</ul>
<script src="jQuery.js"></script>
<script>
$(function(){
// $('ul li').click(function(){
// alert(this.innerText)
// });
// //此时点击小亮是没有点击事件的
$('ul').append('<li>小亮</li>');
//此时无论点击小明还是小亮,都会有点击事件
$('ul').on('click','li',function(){
alert(this.innerText)
})
})
</script>
</body>
</html>
五.合成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>区域</button>
<script src="jQuery.js"></script>
<script>
$(function(){
$('button').hover(function(){
console.log('鼠标进入')
},
function(){
console.log('鼠标离开')
})
})
</script>
</body>
</html>
六.聚焦和失焦