<html>
<head>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<select class="" name="">
<option value="iPhone">iPhone</option>
<option value="iPad">iPad</option>
</select>
</body>
/*引入jQuery*/
<script src="jquery-2.2.3.js" charset="utf-8"></script>
<script type="text/javascript>
$(function (){
// 给按钮绑定事件
// 可以通过群组选择器选出多个元素，并且可以同时添加事件
// 可以同时给元素绑定多个事件，只需要在on()的第一个参数的位置添加事件类型，中间使用空格分隔，即可
// $('#btn1, #btn2').on('click mouseover mouseout', function (e) {
// 使用on()方式绑定的事件的回调中，内部的this为触发该方法的原生DOM对象。
// 如果需要使用，建议转为JQ元素，后续使用JQ方法
// var $this = $(this);
// $this.html('button');
//
// 每次函数被调用，都会产生一个事件对象，就是函数的参数e，并且JQ已经出了兼容的问题
// 通过e.type就可以获取事件类型
// console.log(e.type);
// console.log(e);
// });
// 移除事件
// $('#btn1, #btn2').off('mouseover mouseout');
// 绑定一次事件
// $('#btn3').one('click', function () {
// console.log(this);
// });
// $('#btn1').on('click mouseover', function (e) {
// if (e.type == 'click') {
// console.log('click');
// } else if (e.type == 'mouseover') {
// console.log('mouseover');
// }
// });
// 如果给一个按钮绑定多个事情的时候，可以给on()方法传递一个对象，方法类型和对于的函数以键值对的方式传入
// $('#btn1').on({
// 'click': function () {
// console.log('click');
// },
// 'mouseover': function () {
// console.log('mouseover');
// }
// });
// 简化事件的绑定
$('#btn1').click(function () {
console.log('click');
});
$('#btn2').mouseout(function () {
console.log('dblclick');
});
$('select').change(function () {
console.log(this.value);
});
// 浏览器大小发生改变
$(window).resize(function () {
console.log('fads');
});
});
</script>
</html>
网友评论