您的位置：首页 > Web前端 > JQuery

2017/2/9 学习总结 jQuery事件

2017-02-10 00:00 435 查看

1.jQuery事件主要分捕获阶段和冒泡阶段与DOM操作

捕获阶段-Event Capturing：允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。

冒泡阶段-Event Bubbling：与捕获事件相反，即当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。

2.jQuery 事件分类

与浏览器相关：ready，scroll，resize

$(document).ready(function(){//dosometing...})  //jQuery入口函数 使用了ready事件）
$(window).resize(function(){//dosometing...})   //浏览器窗口该改变事件监听
$(window).scroll(function(){//dosometing...})   //浏览器窗口滚动事件的监听

鼠标相关：click（点击），dbclick（双击鼠标），hover（悬浮），blur（失焦），focus（聚焦），mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave

$('div').dbclick(function(){
console.log('我被双击了')'
})
$('div').hover(function(){
console.log('移入事件');
},funcyion(){
console.log('移出事件');
})

与键盘相关：keydown,keypress,keyup（用法与鼠标事件一致）

3.事件的各种绑定方式

on()方法可以用事件委托即给父元素绑定事件（推荐使用）可以绑定多个事件

$('ul').on('click','li',function(){})  //给ul中所有的li绑定事件 ，第二个参数不写即给ul绑定事件

bind()方法绑定一个或多个事件

$('div').bind('click mouseenter',function(){})//两个事件执行同一个函数
$('div').bind({'click':function(){console.log(执行click事件),'mouseenter':function(){console.log(执行mouseenter事件)}})

one(),hover(over, out)方法

trigger()方法触发被选元素的指定事件类型

$('div').click(function () {
alert('click');
})
setInterval(function () {
$('div').trigger('click');  // 每隔一秒自动触发click事件
},1000)

4.移除事件

unbind()方法该方法实现绑定相反的操作，它从每个匹配的元素中删除绑定的事件。

off()方法该方法实现的是 on的对立面，它删除了捆绑的 on事件

课后练习：

仿淘宝侧边栏楼层滚动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>楼层滚动</title>
<style>
body{
height: 3000px;
}
div{
width: 1000px;
height: 300px;
margin:30px auto;
text-align: center;
line-height: 300px;
font-size: 100px;
color: #fff;
}
ul{
list-style: none;
margin: 0;
padding: 0;
width: 80px;
height: 400px;
position: fixed;
top:200px;
left:50px;
}
ul>li{
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
color: #fff;
font-weight: bolder;
cursor: pointer;
}
ul>.active{
color:red;
}
</style>
</head>
<body>
<div style="background-color: gold; margin-top: 0;">时尚</div>
<div style="background-color: greenyellow;">品质</div>
<div style="background-color: rebeccapurple;">特色</div>
<div style="background-color: brown;">实惠</div>
<div style="background-color: pink;">猜你喜欢</div>
<ul>
<li class="active">时尚</li>
<li>品质</li>
<li>特色</li>
<li>实惠</li>
<li>猜你喜欢</li>
</ul>
</body>
</html>
<script src="jquery-3.1.1.min.js"></script>
<script>
(function () {
var color = 'gold,greenyellow,rebeccapurple,brown,pink'.split(',');
$('ul>li')
.each(function (index,value) {
$(value).css('background-color',color[index]);
})
.on('mouseenter',function () {
var index =$(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('html,body').animate({'scrollTop':index * 330+'px'});
})
$(window).on('scroll',function () { //浏览器窗口滚动侧边栏对应样式改变
var h = $(document).scrollTop();
if( h>ttop(0)){
changeClass(0);
}
if(h>ttop(1)){
changeClass(1);
}
if(h>ttop(2)){
changeClass(2);
}
if( h>ttop(3)){
changeClass(3);
}
if(h>ttop(4)){
changeClass(4);
}
})
function ttop(i) {
return  $('div').eq(i).offset().top-60; //ttop(0),ttop(1),ttop(2),ttop(3),ttop(4)各楼层距离页面顶端的距离
}
function changeClass(n) {
$('ul>li').eq(n).addClass('active').siblings().removeClass('active');//改变对应li的样式
}
})();
</script>

效果图(还有一个bug没有解决)T.T

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 学习笔记

相关文章推荐

新的分享

章节导航