锋利的jquery--CH4
$(function() {
//span点击事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击</p>";
$('#msg').html(txt);
alert(event.type);///----捕获事件类型;
event.stopPropagation();//停止冒泡事件; propagation 繁殖蔓延扩展;
});
//div点击事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击</p>";
$('#msg').html(txt);
});
//body点击事件
$('body').bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击</p>";
$('#msg').html(txt);
});
})
</script>
------------------------------------------------------------
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<script type="text/javascript">
$(function() {
$('body').mousedown(function(e){
alert(e.which);//--鼠标左边 1 中间 2 右边 3;
})
$('body').keyup(function(e){
alert(e.which);//---键盘点击触发事件;
})
})
</script>
window.onload----页面所有元素,包括图片,都加载了才可以,
window.onload = one;//onload调用one函数
window.onload = two;//onload调用two函数
一个页面加载,只会执行一次onload--只会调用two;
$(document).ready()-----只要DOM 就绪就可以执行,不必等所有图片都加载了;
$(document).ready(function(){});即为:$(function(){});的原版;
也可以直接不写document,默认是document
bind()---绑定 click mouseover mouseout mousemove
hover()----模拟光标悬浮事件
$(element).hover(function(){}.funcition(){})
//---鼠标放上触发第一个func,鼠标移开触发第二个func
toggle()----模拟鼠标连续单击事件;
----------------------???--------------------------------------
<div id="panel">
<h5 class="head">来点我啊</h5>
<div id="content">7月10日上午,在福建福州鼓楼区洪山园路段发生一起事故,
一辆大巴车撞倒环卫工人陈女士并推行了十多米。昨日,记者了解到,
此前两人曾发生肢体冲突,陈女士伤情严重,全身20多处骨折,伤情有待进一步鉴定。
</div>
</div>
<p>ppppppp</p>
<script type="text/javascript">
$(function() {
$('#panel h5.head').toggle(function(){//----没有点击就触发事件????
$(this).next().show();//--隐藏把他妈自己也隐藏了-----???
},function(){
$(this).next().hide();
})
// $('#panel h5.head').on('click',function(){
// // alert(33);
// $(this).next().hide();
// });
})
</script>
--------------------冒泡事件----------------------------------------
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<script type="text/javascript">
------------------------------p127------------------------------
<style type="text/css">
#panel{
width:300px;
height:300px;
border:1px solid;
}
</style>
<div id="panel">
</div>
<script type="text/javascript">
$(function() {
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){
//---写在func里面,animate执行后才执行;
$(this).css("border","4px solid blue");
})
});
})
</script>
------------------------------------------------------------
stop()---会结束当前正在进行的动画,并立即执行队列中的下一个动画;
$("#panel").hover(function(){ //---放上去执行
alert(3);
},function(){ //---离开执行;
alert(4);
});
------------------------------------------------------------
$(element).is(":animated") //--判断是否是动画状态
------------------------------------------------------------
<style type="text/css">
#panel{
width:200px;
height:200px;
border:1px solid;
}
</style>
<div id="panel">
<h5 class="head" style="display:block;">h5-----</h5>
<p>-32--023-0-032</p>
</div>
<script type="text/javascript">
$(function() {
//toggle---切换元素的可见性,如果可见则隐藏,如果隐藏则出来;
$("#panel h5.head").toggle(function() {//----直接前面的elementtoggle了;
$(this).next().hide();//---??怎么next没效果;p130---效果不同;
},function(){
$(this).next().show();
});
// $("#panel h5.head").click(function() {
// //alert($(this).html());
// $(this).next().toggle();//---toggle切换元素的可见性:
// });
})
</script>
------------------------------------------------------------