JQuery事件处理

Jquery事件

1、  绑定事件示例代码:

<a href=”#”>绑定事件</a>

<div style=”display:none;”>

什么是绑定事件?这是隐藏的内容,点击上面的内容会显示这里的内容。

</div>

<script language=”javascript”>

//单击显示,再次点击隐藏

/*$(function(){

$(“a”).bind(‘click’,function(){

if($(this).next().is(“:visible”)){

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

}else{

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

}

return false;

})

});*/

//鼠标划过显示,离开隐藏

/*$(function(){

$(“a”).bind(‘mousemove’,function(){

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

}).bind(‘mouseout’,function(){

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

})

});*/

//第二种方式绑定事件,也是鼠标划过

$(function(){

$(“a”).mouseover(function(){

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

}).mouseout(function(){

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

})

});

</script>

2、  合成事件示例代码:

<a href=”#”>这里是合成事件测试代码</a>

<div style=” display:none;”>这里的内容默认是隐藏的</div>

<script language=”javascript”>

//JQuery中目前有两个合成事件hover(),toggle();你可以这样理解:合成事件就是可以触发两个函数的事件

//鼠标停留显示隐藏内容,离开触发第二个函数隐藏内容

/*$(function(){

$(“a”).hover(function(){

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

},function(){

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

})

});*/

//上面例子中,第一单击显示,第二次单击隐藏,同样可以用合成时间toggle(),这个时候的a也不会跳转

$(function(){

$(“a”).toggle(function(){

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

//这是第一次单击后的操作,当然你可以给这个标题搞个背景色。使用addClass(),再次单击就用removeClass去掉就可以

},function(){

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

})

});

</script>

3、  事件冒泡示例代码:

事件冒泡

<span>我是父元素内容<b>这是后代元素内容</b></span>

<a href=”http://www.0377joyous.com” target=”_blank”>Joyous 博客</a>

<script language=”javascript”>

//比如一个父元素绑定了一个事件,而父元素内部后代元素又绑定了一个事件,这样后代元素事件响应的时候父元素事件响应不响应呢?

/*$(function(){

$(“span”).bind(‘click’,function(){

alert(“父元素事件被激活”);

});

$(“b”).bind(‘click’,function(){

alert(“子元素事件被激活”);

});

});*/

//单击b包含的内容会激活两个事件,这样怎么才能解决?

$(function(){

$(“span”).bind(‘click’,function(){

alert(“父元素事件被激活”);

});

$(“b”).bind(‘click’,function(){

alert(“子元素事件被激活”);

event.stopPropagation();//增加这句就阻止了事件冒泡,不过ie貌似不支持,当然可以增加一句return false;来解决

});

});

//这个问题是不是想到了提交按钮,a标签跳转等默认行为,我们是不是可以阻止这些默认行为发生,把控制权留给自己?

$(function(){

$(“a”).bind(‘click’,function(){

//其实基本原理就是重新写了click事件,当然我前面也有用到return false;来进制点击a进行跳转

event.preventDefault();

});

});

</script>

4、  移除事件示例代码:

<a href=”#”>移除事件例子</a>

<script language=”javascript”>

//移除事件就是用unbind()函数来移除

$(function(){

$(“a”).bind(‘click’,function(){

alert(‘弹出内容’);

});

$(“a”).unbind();//不带参数会移除所有事件,带事件类型参数会移除指定事件,带有事件类型以及处理函数作为参数那么移除指定事件处理函数

});

</script>

5、  模拟事件示例代码:

<button id=”mybut”>Joyous 博客–Jquery教程</button>

<span></span>

<a>多个事件</a>

<div style=”display:none;”>多个事件隐藏</div>

<script language=”javascript”>

//很多事件都是有用户单击或者鼠标划过来触发的,可是刚打开的页面我们有没有办法直接触发呢?

/*$(function(){

//这里绑定事件

$(“button”).bind(‘click’,function(){

$(“span”).append(“激活点击事件才能显示”);

});

});

$(function(){//触发一定要在触发前绑定或者定义

$(‘#mybut’).trigger(‘click’);

});*/

//能不能触发用户自定义的事件?

/*$(function(){

$(“#mybut”).bind(“myfun”,function(){

$(“span”).append(“<b>我自己定义的事件能激活吗?</b>”);

});

$(“#mybut”).trigger(“myfun”);

});*/

//能不能传递参数?

/*$(function(){

$(“#mybut”).bind(“mydata”,function(event,message1,message2){

$(“span”).append(“<i>”+message1+message2+”</i>”);

});

$(“#mybut”).trigger(“mydata”,[“第一个参数”,”第二个参数”]);

});*/

//bind既能绑定系统事件,也能 绑定用户定义事件,当然能绑定多个事件

$(function(){

$(“a”).bind(“mouseover mouseout”,function(){

$(this).next().toggle();

})

});

</script>

6、  基本动画示例代码:

<a href=”#”>基本动画</a>

<div style=”display:none;”>

<p>这里隐藏很多内容,慢慢的出来,慢慢的进去。。这就是基本动画。知识在于积累,不论现在有没有用,将来肯定有用滴!!</p>

</div>

<script language=”javascript”>

/*

//基本的隐藏和显示

$(function(){

$(“a”).toggle(function(){

$(this).next().show(1000);//在1s中内显示出来,还有slow=600毫秒,fast=200毫秒,normal=400毫秒

},function(){

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

});

});*/

//改变透明度来显示和隐藏

/*$(function(){

$(“a”).toggle(function(){

$(this).next().fadeIn(800);

},function(){

$(this).next().fadeOut(800);

});

});*/

//元素高度来显示和隐藏

/*$(function(){

$(“a”).toggle(function(){

$(this).next().slideDown();

},function(){

$(this).next().slideUp();

});

});*/

</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱塘大数据

理工男图解零维到十维空间,烧脑已过度,受不了啦!

让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

26530
来自专栏腾讯社交用户体验设计

ISUX Xcube智能一键生成H5

50620
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.1K20
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

17230
来自专栏怀英的自我修炼

考研英语-1-导学

英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

11210
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

26340
来自专栏钱塘大数据

中国互联网协会发布:《2018中国互联网发展报告》

在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

13150
来自专栏前端桃园

知识体系解决迷茫的你

最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

19440
来自专栏微信公众号:小白课代表

不只是软件,在线也可以免费下载百度文库了。

不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

43230
来自专栏腾讯高校合作

【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

15020

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励