.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;
}
$(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;
})
})
$(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');
})
$(function(){
// //只能绑定click事件,不能绑定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可绑定多个事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消绑定事件
$(this).unbind('mouseover');
});
})
// //JS原生写法
// window.onload = function(){
// }
// //jQuery写法,等同于上面写法
// $(window).load(function(){
// })
// //ready的写法
// $(document).ready(function(){
// })
// //ready的简写
// $(function(){
// })
// 窗口改变尺寸的时候,会高频触发
$(window).resize(function() {
console.log('3');
});
$(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');
});
})
.box{
width: 200px;
height: 200px;
background-color: gold;
margin: 100px auto 0;
}
.son{
width: 100px;
height: 100px;
background-color: green;
}
$(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});
});
})
.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;
}
$(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();
});
})
$(function(){
// //给全部的li设置内容和样式
// $('.list li').html('111');
// $('.list li').css({background:'gold'});
//第一个参数index是索引值
$('.list li').each(function(index) {
// alert(index);//弹出索引值
//$(this)是每一个li
$(this).html(index);
});
})
.box{
width: 100px;
height: 100px;
background-color: gold;
}
$(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
)
}
)
}
);
})
.box{
width: 200px;
height: 200px;
background-color: gold;
display: none;
}
$(function(){
$('#btn').click(function(){
// $('.box').fadeOut();//淡出
// $('.box').fadeIn();//淡入
// $('.box').fadeToggle();//切换淡入淡出
// $('.box').toggle();//切换显示隐藏
$('.box').slideToggle();//切换上收和下展
})
})