锋利的jquery--CH4

锋利的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>

------------------------------------------------------------