事件冒泡等

<!DOCTYPE html>

<head>

.grandfather{

width: 300px;

height: 300px;

background-color: green;

position: relative;

}

.father{

width: 200px;

height: 200px;

background-color: gold;

}

.son{

width: 100px;

height: 100px;

background-color: red;

position: absolute;

left: 0;

top: 400px;

}

</style>

$(function(){

$('body').click(function() {

alert(4);

});

$('.grandfather').click(function() {

alert(3);

});

$('.father').click(function() {

alert(2);

});

$('.son').click(function(event) {//event代表当前事件

alert(1);

// console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标

// alert("X轴坐标：" + event.clientX);

// //阻止事件冒泡

// event.stopPropagation();

//合并阻止操作：把阻止冒泡和阻止默认行为合并

return false;

});

//阻止右键菜单

$(document).contextmenu(function(event){

// //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）

// event.preventDefault();

//合并阻止

return false;

})

</script>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>自定义事件</title>

</style>

$(function(){

//自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数

$('#btn1').bind('hello', function(){

alert('hello');

})

$('#btn1').bind('click', function(){

alert('click');

})

$('#btn2').click(function() {

// trigger即可以触发自定义事件，也可以触发原始的事件

$('#btn1').trigger('hello');

$('#btn1').trigger('click');

});

//不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发

// $('#btn1').trigger('hello');

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>绑定事件bind</title>

</style>

$(function(){

// //只能绑定click事件，不能绑定其他的了

// $('#btn').click(function() {

// /* Act on the event */

// });

//bind方式可绑定多个事件

$('#btn').bind('click mouseover', function() {

alert('hello!');

//取消绑定事件

$(this).unbind('mouseover');

});

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery其他事件</title>

</style>

// //JS原生写法

// window.onload = function(){

// }

// //jQuery写法，等同于上面写法

// $(window).load(function(){

// })

// //ready的写法

// $(document).ready(function(){

// })

// //ready的简写

// $(function(){

// })

// 窗口改变尺寸的时候，会高频触发

$(window).resize(function() {

console.log('3');

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>input框事件</title>

</style>

$(function(){

// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）

// $('#txt01').focus();

// //文本框获取焦点的时候（有光标闪烁的时候）

// $('#txt01').focus(function() {

// alert('focus');

// });

// //失去焦点的时候（光标离开的时候）

// $('#txt01').blur(function() {

// alert('blur');

// });

// //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在

// $('#txt01').change(function() {

// alert('change');

// });

//松开键盘按键就触发

$('#txt01').keyup(function() {

alert('keyup');

});

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>鼠标移入移出</title>

.box{

width: 200px;

height: 200px;

background-color: gold;

margin: 100px auto 0;

}

.son{

width: 100px;

height: 100px;

background-color: green;

}

</style>

$(function(){

/*进入子元素也触发*/

/*$('#div1').mouseover(function() {

$(this).animate({marginTop: 50});//.stop()

});

$('#div1').mouseout(function() {

$(this).animate({marginTop: 100});//.stop()

});*/

/*进入子元素不触发*/

/*$('#div1').mouseenter(function() {

$(this).stop().animate({marginTop: 50});//

});

$('#div1').mouseleave(function() {

$(this).stop().animate({marginTop: 100});//

});*/

/*通过hover（mouseenter+mouseleave）实现简写*/

$('#div1').hover(function() {

$(this).stop().animate({marginTop: 50});

}, function() {

$(this).stop().animate({marginTop: 100});

});

})

</script>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>元素绝对位置</title>

.con{

width: 600px;

height: 600px;

margin: 50px auto 0;

}

.box{

width: 100px;

height: 100px;

background-color: gold;

margin-bottom: 10px;

}

.pos{

margin-left: 500px;

}

.pop{

width: 100px;

height: 100px;

background-color: red;

position: fixed;

left:0;

top: 0;

display: none;

}

</style>

$(function(){

var $pos = $('.pos');

//offset()是获取相对于页面左上角的绝对位置，即使外面再包一层con居中层，也不影响效果

var pos = $pos.offset();

// console.log(pos);

// alert(pos.left + "," + pos.top);

var w = $pos.outerWidth();

var h = $pos.outerHeight();

// alert(w);

$('.pop').css({left:pos.left + w,top:pos.top});

$pos.mouseover(function() {

$('.pop').show();

});

$pos.mouseout(function() {

$('.pop').hide();

});

})

</script>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery循环</title>

</style>

$(function(){

// //给全部的li设置内容和样式

// $('.list li').html('111');

// $('.list li').css({background:'gold'});

//第一个参数index是索引值

$('.list li').each(function(index) {

// alert(index);//弹出索引值

//$(this)是每一个li

$(this).html(index);

});

})

</script>

</head>

<body>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery动画</title>

.box{

width: 100px;

height: 100px;

background-color: gold;

}

</style>

$(function(){

参数：

1、什么属性做动画，属性设置{param1: value1, param2: value2}

2、动画执行的时间，单位毫秒

3、动画曲线：

swing（默认值）开始和结束慢，中间快

linear匀速

可省略不写

4、回调函数，动画完成之后要做的事情，可无限嵌套

注意：animate() 方法只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）

$('#div1').animate({

width: 200,

height: 200},

1000,

function(){

// alert('动画完了！');

$(this).animate(

{marginLeft: 500},

1000,

function(){

$(this).animate(

{marginTop: 500},

1000

)

}

)

}

);

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery特殊效果</title>

.box{

width: 200px;

height: 200px;

background-color: gold;

display: none;

}

</style>

$(function(){

$('#btn').click(function(){

// $('.box').fadeOut();//淡出

// $('.box').fadeIn();//淡入

// $('.box').fadeToggle();//切换淡入淡出

// $('.box').toggle();//切换显示隐藏

$('.box').slideToggle();//切换上收和下展

})

</script>

</head>

<body>

</body>

</html>

事件冒泡等

推荐阅读更多精彩内容