1.jquery位置信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
1.获取内容的宽高
console.log($(".box").width()); $(".box").delay(2000).hide(3000);
2.两秒过后宽度变为400
setTimeout(function (argument) {
$(".box").width(400)
},2000);
3.innerWidth() 内部的宽高 包含padding部分
console.log($(".box").innerWidth())
4.同样方法可以改变宽度
$(".box").innerWidth(500)
5.outerWidth()方法外部的宽高 padding+border
console.log($(".box").outerWidth())
6.offset().top 方法检查的到顶部的距离
console.log($('.box').offset().top);
scroll()方法检查得是页面滚动的距离
$(docunmet).scroll(function () {
console.log($(this).scrollTop())
})
})
</script>
</body>
</html>
2.回到顶部方法
利用scrollTop 设置属性 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.fixTop{
position: fixed;
bottom: 20px;
right: 30px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: #000;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li> </ul>
<div class="fixTop">回到顶部</div>
<script src="jquery.js"></script>
<script> $(function () {
$('.fixTop').click(function(event) {
//自定义动画效果animate是scrollTop设置为0
$('html,body').animate({
'scrollTop':0 },1000) }); });
</script>
</body>
</html>
回到顶部
3.事件流
所谓事件流类似于鼠标单击的时候有三个阶段:
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script> // document.getElementById('btn').addEventListener('click', function () {
// alert(1);
// },false); window.onload = function(){ var oBtn = document.getElementById('btn'); //1.
document.addEventListener('click',function(){
console.log('document处于事件捕获阶段');
}, true); //2.
document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true);
//3
document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true);
//4.
oBtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true);
//
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);
//5
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
//6
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);
//7.
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false); }; </script>
</body>
</html>
事件阶段
3.1关于事件冒泡的问题
由于存在冒泡事件 会使得单击事件由于冒泡问题传递的顺序性发生不受控制的事情,面对这种方法可以使用阻止冒泡来解决更准确的问题
event.preventDefault()阻止默认事件
event.stopPropagation() 阻止冒泡
event.target 事件对象 同 this
这里
event.target 如果没有事件冒泡，指的点击的目标对象
可以显示点击的目标对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.father{
width: 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);
// 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>
冒泡事件的解决
4.换肤
利用return false 来解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.fu{
position: fixed;
top:0;
left: 0;
width: 100%;
height: 320px;
background-color: red;
display: none;
}
.up{
cursor: pointer;
}
</style>
</head>
<body style="height: 2000px">
<!-- <form action=""></form> -->
<a href='http://www.baidu.com' id="changeFu">换肤</a>
<div class="fu">
<ul>
<li>
<a href="javascript:void(0)">女神降临</a>
</li>
<li>
<a href="javascript:void(0)">明星</a>
</li> <span class="up">收起</span> </ul>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
$('#changeFu').click(function(e) {
//阻止当前默认的事件
// e.preventDefault();
// //阻止冒泡
// e.stopPropagation();
console.log(111);
$('.fu').slideDown(1000);
// 相当于即阻止了默认事件 又阻止冒泡
return false;
}); $('body,.up').click(function(event) {
$('.fu').slideUp(1000);
}); $('.fu ul li a').click(function(event) {
event.stopPropagation();
$(this).css('color','green').parent('li').siblings('li').find('a').css('color','blue');
}); $('.fu').click(function(event) {
return false;
});
});
</script>
</body>
</html>
换肤
5.事件代理 on
比如在以后项目中新添加一个a 标签在原有ul基础上,可是原来的功能并不适用于这里,所以用到事件代理on()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li class="item1">
<a href="javascript:void(0);" id="a">alex</a>
</li>
<!-- <li>武sir</li> -->
</ul>
<script src="jquery.js"></script>
<script>
$(function () { // 绑定事件 如果使用事件委托的方式 以后的页面不会出现问题 // 第二个参数 表示的是后代的选择器 // 事件委托（代理） 很重要 如果未来 出现 未来添加的元素 优先考虑事件委托 //
// $('ul').on('click','a',function () {
// alert(this.innerText);
// });
$('ul li').click(function () {
alert(this.innerText);
}); $('ul').append('<li><a href="javascript:void(0);">wusir</a></li>'); })
</script>
</body>
</html>
6.合成事件
作用:减少代码量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script src="jquery.js"></script>
<script>
$(function () { /*
$('button').mouseenter(function(event) { }); $('button').mouseleave(function(event) { });
*/ $('button').hover(function() {
/* Stuff to do when the mouse enters the element */
console.log('进入');
}, function() {
/* Stuff to do when the mouse leaves the element */
console.log('离开');
});
})
</script>
</body>
</html>
合成事件
7.单双击事件 需要控制器来分离单双击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script src="jquery.js"></script>
<script>
$(function () {
var time = null;
// 单双击 的时间 间隔 是300ms
// 如果解决 单双击冲突 当做作业
$('button').click(function(event) {
//由于定时器响应时间300 只需要加上一次性控制器就可以啦
clearTimeout(time);
time = setTimeout(function () {
console.log('单机了');
},300);
// 定时器 300ms 一次性定时器
}); $('button').dblclick(function(event) {
//这里需要清空上一次的延迟
clearTimeout(time);
console.log('双机了');
});
})
</script>
</body>
</html>
单双击事件
8.聚焦和失焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text">
<script src="jquery.js"></script>
<script> //加载页面的时候 获取到焦点
$('input[type=text]').focus(); $('input[type=text]').focus(function () {
console.log(1);
}); $('input[type=text]').keydown(function(event) {
console.log(1); /*
console.log(event.keyCode);
switch (expression) {
case label_1:
// statements_1
break;
case label_1:
// statements_1
break;
case label_1:
// statements_1
break;
case label_1:
// statements_1
break;
default:
// statements_def
break;
}
*/ }); $('input[type=text]').change(function(event) {
console.log(1111);
}); $('input[type=text]').select(function(event) {
console.log(1111);
}); </script>
</body>
</html>
聚焦失焦