DOM加载及合成事件

$(document).ready()方法

当 DOM 已经加载，并且页面已经完全呈现时，会发生 ready 事件

$(document).ready()方法和js中window.onload方法有相似也有不同之处

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕

 

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){})

$(document)可以简写为$(function(){}) 当不带参数 默认是document

 

事件绑定 bind(type[,data],fn):它又三个参数 第一个是必需规定添加到元素的一个或多个事件。

由空格分隔多个事件

第二个是可选参数 传递到函数的额外数据

第三个是规定当事件发生时运行的函数

$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
1等待DOM加载完毕  2找到元素 绑定click事件
3找到内容元素如果内容元素显示 则隐藏 如果隐藏则显示
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态

 

 

合成事件   hover()  toggle()

hover也就是可以弄个当鼠标在button上鼠标变样子滑过去再次该回原来样子

 

$(document).ready(function(){
  $("p").hover(function(){
    $("p").css("background-color","yellow");
    },function(){
    $("p").css("background-color","pink");
  });
});
当鼠标停留在p上颜色改变   

 toggle()

方法每次单机调用下个哥方法 到最后重复第一个   如果只有俩来回切换

$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});

每次点击button他会换背景