jQuery
事件
1.页面加载
以DOM提供的load事件和jQuery中的ready()方法来加载页面
<script>
window.onload = function () {
var qyc = document.getElementById('qyc');
console.log(qyc);
}
// window对象等于浏览器窗口
/*load事件-当浏览器窗口加载完毕是被触发
* 事件处理函数中代码逻辑，在浏览器加载中完毕后在执行*/
</script>
</head>
<body>
<!-- HTML元素 -->
<button id="qyc">按钮</button>
</body>2.事件绑定
事件绑定和解绑
单事件绑定： type：事件类型的字符串 data：作为event data属性值给事件对象的格外数据对象 callback：绑定每个元素的事件上面处理函数
<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
/*bind(type, data, callback)方法 - 绑定事件*/
/*function click1(){
console.log('this is button.');
}
function click2(){
console.log('this is button too.');
}
$('#btn').bind('click', click1);
$('#btn').bind('click', click2);*/
/*
unbind(type, data, callback)方法 - 解绑定事件
*/
// $('#btn').unbind('click', click1);
/*
bind()与unbind()中data参数
* data参数的值-利用event事件对象data属性进行接收
* 该参数的数据内容只能在事件的处理函数中被使用
*/
// var obj = { a : '犬夜叉' };
$('#btn').bind('click', { a : '犬夜叉' }, function(event){
// var obj = { a : '犬夜叉' };
console.log(event.data);
});
</script>
</body>多事件绑定和解绑
多事件绑定： type:事件类型的字符串一个或多个，有空格分隔多个事件 data：作为event data属性值给事件对象的格外数据对象 callback：绑定每个元素的事件上面处理函数
<script src="js/jquery.js"></script>
<style>
#qh {
width: 100px;
height: 20px;
border: 1px solid black;
}
ul {
list-style: none;
padding: 0;
display: none;
}
li {
width: 100px;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="qh">游戏列表</div>
<ul>
<li>端游</li>
<li>手游</li>
<li>页游</li>
</ul>
<script>
/*$('#title').bind('mouseover', function(){
$('ul').css('display','block');
});
$('#qh').bind('mouseover mouseout', function(){
if ($('ul').is(':hidden')) {
$('ul').css('display','block');
} else {
$('ul').css('display','none');
}
});
$('#title').bind('mouseout', function(){
$('ul').css('display','none');
});*/
/* jQuery支持链式操作
$('#title').bind('mouseover', function(){
$('ul').css('display','block');
}).bind('mouseout', function(){
$('ul').css('display','none');
});
*/
$('#qh').bind('mouseover mouseout', function(){
if ($('ul').is(':hidden')) {
$('ul').css('display','block');
} else {
$('ul').css('display','none');
}
});
// bind()方法-多事件绑定，事件名称之间使用空格分隔
/*
unbind()方法
1.没有指定任何事件时-将指定元素的所有事件全部解绑定
2.一个事件名称时-将该元素的指定当个事件解绑定
3.多个事件名称时-将该元素的指定多个事件解绑定
*/
$('#title').unbind('mouseover mouseout');
</script>
</body>事件绑定方法对比
<script src="js/jquery.js"></script>
</head>
<body>
<script>
/*
jQuery中提供多组事件绑定与解绑定的方法
* bind()与unbind()-jQuery 3.0版本后删除方法
* on()与off()方法-jQuery 1.7版本后新增方法
* 其实bind()与unbind()的底层方法就是on()和off()
* live()与die()-jQuery 1.7版本后删除方法
* 作用-实现事件委托
* delegate()与undelegate() - jQuery 1.6版本后新增方法，jQuery
3.0版本后删除方法
* 作用-实现事件委托
* one()-为事件绑定一次性的函数
*/
</script>3.事件切换
hover()方法：over：鼠标移动到元素上触发函数 out：鼠标移开元素触发函数
<script src="js/jquery.js"></script>
<style>
#qh {
width: 100px;
height: 20px;
border: 1px solid black;
}
ul {
list-style: none;
padding: 0;
display: none;
}
li {
width: 100px;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="qh">游戏类型</div>
<ul>
<li>端游</li>
<li>手游</li>
<li>页游</li>
</ul>
<script>
/*
鼠标悬停事件
* mouseover-表示鼠标悬停在指定元素之上
* mouseout-表示鼠标从指定元素上移开
*/
$('#qh').bind('mouseover', function(){
$('ul').css('display','block');
});
$('#qh').bind('mouseout', function(){
$('ul').css('display','none');
});
// jQuery提供hover(over, out)方法
$('#qh').hover(function(){
$('ul').css('display','block');
},function(){
$('ul').css('display','none');
});
</script>
</body>4.事件模拟
以trigger()方法模拟触发元素绑定的事件
<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
$('#qyc').bind('click',function() {
// 绑定事件-由用户行为进行触发，调用处理函数
console.log('you my button');
});
$('#qyc').trigger('click');
// 模拟用户触发事件
</script>
</body>