1. 执行时机

1、 当所有页面元素都加载完成再执行

//原生javascript方法
window.onload = function(){

}

//测试
function one(){
    alert("one");
}
function two(){
    alert("two");
}

window.onload = one;
window.onlaod = two;

window.onload = function(){
    one();
    two();
}

//jQuery方法
$(window).load(function(){

})

2、 当 DOM 元素加载完就执行

$(document).ready(function(){

})

$().ready(function(){

})

$(function(){

})

2. 事件绑定

jQuery 中事件的绑定,通过 one() 和 on() 方法。

常见事件类型

blur            //当输入域失去焦点
focus           //当输入域获得焦点
load            //当加载时,触发事件
resize          //对浏览器窗口调整大小时
scroll          //对元素滚动时
unload          //当用户点击链接离开本页时
click           //单击
dblclick        //双击
mousedown       //当按下鼠标按钮时
mouseup         //当松开鼠标按钮时
mousemove       //当鼠标指针在指定的元素中移动时

mouseover       //当鼠标指针放到元素上时(子元素上也生效)
mouseout        //当鼠标离开元素时(子元素上也生效)
mouseenter      //当鼠标指针放到元素上时
mouseleave      //当鼠标离开元素时
hover           //合成事件,鼠标放上去、鼠标离开
toggle()        //显示、隐藏

change          //当输入域发生变化  表单 区分于blur
select          //当 textarea 或文本类型的 input 元素中的文本被鼠标选中时
submit          //提交表单
keydown         //当按下按键时(只发生一次)
keypress        //每插入一个字符,就会发生keypress事件。
keyup           //当按钮被松开时
error

练习

<div id="panel">
    <h5 class="head">谁才是武汉最好的PHP培训机构?</h5>
    <div class="content">
        武汉长乐教育,是最专业的武汉PHP培训机构。
www.whphp.com是我们在武汉PHP市场主要的IT教育培训宣传网站,请您认证域名www.whphp.com。
当您在寻找一个真正能学会技术的武汉PHP培训学校,那就来武汉长乐教育吧。
    </div>
</div>
//用到方法 is(":visible")

3. 阻止事件冒泡和默认行为

什么是事件冒泡

<script type="text/javascript">
$(function(){
    // 为span元素绑定click事件
    $('span').on("click",function(){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为div元素绑定click事件
    $('#content').on("click",function(){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为body元素绑定click事件
    $("body").on("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>
</head>
<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>

<div id="msg"></div>
$('a').click(function(event){
    event.stopPropagation();        //阻止事件冒泡
    event.preventDefault();         //阻止默认行为

//$('a').click(function(e){
    //e.stopPropagation();      //阻止事件冒泡
    //e.preventDefault();           //阻止默认行为


    //return false;
})

4. 给动态增加的元素绑定事件

<script>
$(function(){
        //$("p").click(function(){
             //$(this).css("background-color","pink");
        //})
        $(document).on("click","p",function(){
             $(this).css("background-color","pink");
        })  
        $("button").click(function(){
            $("div").append("<p>动态增加的元素</p>")
        })
});
</script>
    <div><p>本来的的元素</p></div>
    <button>点我</button>

已添加到喜欢了