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他会换背景

DOM加载及合成事件

猜你喜欢