jQuery（三）
事件细节
$('div').click(function(ev){
//ev:兼容后的event对象
//ev.pageX(相对于文档的距离)=clientX(相对于可视区的距离)+滚动条的距离
}))
ev.which:keyCode还可以获取鼠标左键右键中间的滚轮的键值
ev.preventDefault();//阻止默认事件
ev.stopPropagation();//阻止冒泡
return false;//阻止默认事件+阻止冒泡
$('div').one('click',function(){//只执行一次
alert(123);
});
位置操作
<style>
*{padding:0;margin:0;}
#div1{width:200px;height:200px;background:red;margin:20px;}
#div2{width:100px;height:100px;background:yellow;margin:30px;}
</style>
$(function(){
//div2.offsetLeft()//看父级或者父父级有没有定位，如果没有定位，值为到达屏幕左边的距离，如果有定位，值为到有定位的元素的位置。如果div1加上定位的话，值为30px;
alert($('#div2').offset().left);//获取到屏幕的左距离
alert($('#div2').position().left);//到有定位的父级的left值，把当前元素转化成类似定位的形式，把div2看成有定位的元素，值为20px，如果div1再加个定位的话，值为0
})
<body>
<div id="div1>
<div id="div2">
</div>
</div>
</body>
offsetParent
parent():获取父级
offsetParent():获取有定位的父级
<style>
*{padding:0;margin:0;}
#div1{width:200px;height:200px;background:red;margin:20px;}
#div2{width:100px;height:100px;background:yellow;margin:30px;}
</style>
$(function(){
$('#div2').offsetParent().css('background','blue');//div1有定位时，div1背景变蓝，反之，body背景变蓝。
$('#div2').parent().css('background','blue');//div1变蓝
})
<body>
<div id="div1>
<div id="div2">
</div>
</div>
</body>
val
$(function(){
alert($('input').val());//弹出123，val:获取元素value值
$('input').val(456);//把input的value变成456
})
<body>
<input type="button" value="123" />
</body>
size
$(fucntion(){
alert($('li').size());//4 像length
})
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
each//一参：下标，二参：每个元素
$(fucntion(){
$('li').each(function(i,elem){
$(elem).html(i);//跟循环很像
})
})
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
拖拽
hover
$(function(){
$('#div1').hover(function(){
$(this).css('background','blue');//鼠标移入div1背景变蓝
},function(){
$(this).css('background','red');//鼠标移出div1背景变红
})
})
show()、hide()
$(function(){
$('#div1').hover(function(){
$('#div2').hide();//鼠标移入div2隐藏
},function(){
$('#div2').show();//鼠标移入div2显示
})
})
$(function(){
$('#div1').hover(function(){
$('#div2').hide(1000);//鼠标移入div2 1秒隐藏，宽高透明度一起变
},function(){
$('#div2').show(1000);//鼠标移出div2 1秒显示
})
})
fadeIn()、fadeOut()//鼠标淡入淡出，还可以指定时间，默认时间400
$(function(){
$('#div1').hover(function(){
$('#div2').fadeOut(1000);
},function(){
$('#div2').fadeIn(1000);
})
})
slideUp()、slideDown()//向下展开，向上卷起
$(function(){
$('#div1').hover(function(){
$('#div2').slideUp(1000);
},function(){
$('#div2').slideDown(1000);
})
})
fadeTo()//指定范围
$(function(){
$('#div1').hover(function(){
$('#div2').fadeTo(1000,0.5);//半透明
},function(){
$('#div2').fadeTo(1000,1);
})
})
