冒泡泡de可乐
代码都是思想和概念的体现~每多学一点知识,就能少写一行代码~

加载DOM

$(document).ready() 在DOM载入就绪时就对其进行操作,并调用执行它所绑定的函数

$(document).ready(function(){

})

简写方式:
 $(function(){

})

$().ready(
function(){ //$()不带参数时,参数就是document

})

事件绑定  bind()

bind(type,[data],fn)

3个参数说明

type---事件类型,包括blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、             keydown、keypress、keyup、error.......

[data]---可选参数,作为event.data属性值传递给事件对象的额外数据对象

fn---用来绑定的处理函数

$(function(){
  $("#panel h5").bind(click,function(){
     $(this).next().show();
   })
})

简写:
$(function(){
  $("#panel h5").click(function(){
     $(this).next().show();
   })
})

事件合成

(1) hover(enter,leave)  用于模拟光标悬停事件,mouseover()和mouseout()事件结合。当光标移动到元素上时,触发enter函数;当光标移除这个元素时,触发leave函数 

//鼠标移入移除切换是否可见
$(function(){
  $("#panel h5").hover(function(){
     $(this).next().show();
   }),function(){
 $(this).next().hide();
}
})

 

(2)toggle(fn1,fn2,...fnN)  用于模拟鼠标连续单击事件   第一次单击元素,触发第一个函数;第二次单击,触发第二个函数;依次触发,直到最后一个。随后的每次单击都是轮番调用这几个函数
toggle() 可以切换元素的可见状态   若元素可见,单击后隐藏;若元素隐藏,单击后可见

//单击切换是否可见
$(function(){
  $("#panel h5").togle(function(){
     $(this).next().show();
   }),function(){
 $(this).next().hide();
}
})

事件冒泡

 事件冒泡:事件会按照DOM的层次结构像水泡一样不断向上直至顶端。比如span元素嵌套在div元素中,当span元素被单击时,也单击了div元素;如果span和div都绑定有click事件,会依次执行

 阻止事件冒泡,用event.stopPropagation()

//当单击span时,只会触发span的click事件,不会触发div的click事件

$("span").click(function(event){

var txt="<p>内层span元素被单击</p>";

$("#msg").html(txt);

event.stopPropgation()    //停止事件冒泡  可用return false 代替

});

事件对象及其属性

   在程序中使用事件对象,只需要为函数添加一个参数

//单击element元素时,event对象就被创建了。这个事件只有事件处理函数才能访问到,事件处理函数执行完毕后,事件对象就被销毁

$("element").click(function(event)           //event:事件对象

//......

)

   事件对象常用属性

event.type   //获取事件类型

event.preventDefault()  //阻止默认的事件行为  如点击表单提交按钮时阻止表单提交、单击链接时阻止跳转等  可用return false代替

event.stopPropagation()  //阻止事件冒泡 可用return false代替

event.target  //获取到触发事件的元素

event.pageX 和  event.pageY  //获取到光标相对于页面的x坐标和y坐标

移除事件 unbind()

unbind([type],[data]);   第一个参数是事件类型,第二个参数是将要移除的函数

(1)如果没有参数,则删除所有绑定的时间

(2)如果提供了事件类型做参数,则只删除该类型的绑定事件

(3)如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数会被删除

       对于只需触发一次,随后就要立即解除绑定的情况,jQuery提供了一种简写方法---one()

 

posted on 2018-09-10 17:22  HathawayLee  阅读(163)  评论(0编辑  收藏  举报