jquery事件

来源:互联网 发布:网络歌手受排挤 编辑:程序博客网 时间:2024/05/02 04:53

首先介绍下随着页面加载而执行的函数:


$(document).ready(function(){

  // 编写代码:

})

通常我们为了简便课写成


$(function(){

 //编写代码:

})


有时我们也会写作

$().ready(function(){        //当$()中不带有参数时,我们默认参数就是“document”.

 //编写代码:

})


jquery 中is方法是is() 根据选择器、元素或jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。.is(selector),


$(function(){

$("#panel1 h5.head").bind("click",function(){

if($(this).next().is(":visible"));

$(this).next().hide();

else(){

                         $(this).next().show();}

                  })

})

 绑定事件可以简写为:

$(function(){

$("#panel1 h5.head").click(function(){

if($(this).next().is(":visible"));

$(this).next().hide();

else{

$(this).next.().show();

}

})

})


hover(enter.leave);hover方法用于模拟光标悬停事件,当光标处在上方就会触发第一个函数,当光标离开这里就会触发第二个函数。实例如下:

$(function(){

$("#panel h5.head").hover(function(){

$(this).next().hide();}

,function(){

$(this).next().show();})

})

toggle(fn1;fn2;fn3....)toggle方法用于模拟鼠标连续单机事件。 第一次单机触发第一个函数,再次单机同一元素触发第二个函数,第三次单机同一元素触发第三个函数,依次类推。。。此方法可用于两个或多个函数间的切换。

代码示例如下:

$(function(){

$("#panel h5.head").toggle(function(){\

$(this).addclass("highlight");

$(this).next().hide();

},function(){

$(this).removeclass("highlight");

$(this).next().show();

})

});

jquery 中one()方法。one()方法与bind()方法类似,区别在于绑定的处理函数触发一次后,将会立即被删除。代码示例如下:


<script type="text/javascript">

$(function(){

$("#panel h5.head").one("click",function(){             //单机鼠标触发绑定事件后事件将会被删除。因此当第二次单机鼠                                                                                                                 标时执行的是第二个绑定的事件。

$("#test").append("<p>我是绑定的第一个函数</p>");

})

$("#panel h5.head").one("click",function(){

$("#test").append("<p>我是绑定的第二个函数</p>");

})

$("#panel h5.head").one("click",function(){

$("#test").append("<p>我是绑定的第三个函数</p>");

 })

})

//  此处若连续单机三次鼠标将会出现结果:

我绑定的是第一个函数

我绑定的是第二个函数

我绑定的是第三个函数

</script>






0 0
原创粉丝点击