jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click、mousedown、keypress事件。jQuery绑定事件有2种方法,下面用最基本的例子做演示。

①直接绑定,$('selector').event(function () { 代码块;})

<button>click me</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
$('button').click(function () {
alert('hello world');
})
</script>

②通过bind绑定,$('selector').bind('event',function () { 代码块;})

通过这种方法可以解绑事件,$('selector').unbind('event')

<button>click me</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
$('button').bind('click',function () {
alert('hello world');
})
$('button').unbind('click' )
</script>

为了避免在文档未完全加载之前就运行jQuery代码导致错误,或者动态增加的标签不会自动绑定事件,可通过两种方法解决。

1.保证文档在完全加载之后再运行jQuery代码

$(document).ready(function(){
// 开始写 jQuery 代码...
}); //等价于
$(function(){
// 开始写 jQuery 代码...
});

②事件委托与绑定

<ul>
<li>11</li> <li>22</li> <li>33</li> <li>44</li>
</ul>
<button>add li</button> <!--按钮,点击增加li标签-->
<script src="baidu_jquery_2.1.4.js"></script>
<script>
$('button').click(function () {
var $ele=$('<li>')
$ele.html(($('li').length+1)*11); //新增li标签的文本内容
$('ul').append($ele)
})
$('li').bind('click',function () { //点击li标签,弹出提示框
alert('hello world');
})
</script>

对于上面这个例子,原本文档中的11、22、33和44标签,点击分别可弹出提示框,单只对于点击按钮后新增的55、66、77等标签,则不会自动绑定上原li标签的click事件,即点击不会弹出hello world提示框。为此,可将事件绑定在ul标签、并委托给ul标签的li标签。

//将原本li标签的click事件修改为如下
$('ul').bind('click','li',function () {
alert('hello world');
})

jQuery常见事件

①显示与隐藏:show()、hide()与toggle()

三个函数不加参数分别表示直接显示、隐藏与切换;加上时间参数如hide(1000),表示隐藏这个动作持续1000ms;也可使用'slow'或者'fast'作为参数。

<div style="width: 200px;background: pink">hello world</div><br>
<button id="showing">显示</button>
<button id="hiding">隐藏</button>
<button id="toggling">切换</button>
<script>
$('#showing').click(function () {
$('div').show();
})
$('#hiding').click(function () {
$('div').hide();
})
$('#toggling').click(function () {
$('div').toggle(); //切换,如果div是显示则隐藏,如果是隐藏则显示
})
</script>

②向上与向下滑动:slideUp()、slideDown()与slideToggle()

三个函数不加参数分别表示直接向上滑动、向下滑动与切换;加上时间参数如slideUp(1000),表示向上滑动这个动作持续1000ms;也可使用'slow'或者'fast'作为参数。

<div style="width: 200px;background: pink">hello world</div><br>
<button id="slideup">向上滑动</button>
<button id="slidedown">向下滑动</button>
<button id="slidetoggle">切换</button>
<script>
$('#slideup').click(function () {
$('div').slideUp(1000);
})
$('#slidedown').click(function () {
$('div').slideDown(1000);
})
$('#slidetoggle').click(function () {
$('div').slideToggle(1000); //切换,如果当前状态为向下滑动则向上滑动,如果当前状态为向上滑动则向下滑动
})

③淡入与淡出:fadeIn()、fadeOut()、fadeToggle()与fadeTo()

这四个参数实际是对标签的透明度进行设置,前三个参数的用法类似前面两个,而fadeTo()需要两个参数,第一个参数表示速度,可使用毫秒数或者'slow'和'fast',第二个参数为指定的透明度,在0和1之间。

<div style="width: 200px;background: pink">hello world</div><br>
<button id="fadein">淡入</button>
<button id="fadeout">淡出</button>
<button id="fadetoggle">切换</button>
<button id="fadeto">透明度</button>
<script>
  $('#fadein').click(function () {
$('div').fadeIn(1000);
})
$('#fadeout').click(function () {
$('div').fadeOut(1000);
})
$('#fadetoggle').click(function () {
$('div').fadeToggle(1000);
})
$('#fadeto').click(function () {
$('div').fadeTo(1000,0.3);
})
</script>

对于上述三对方法,除了可以加上毫秒或者'slow'和'fast'作为第一个参数,还可以加上第二个参数即回调函数,表示原方法完成后执行的函数,语法

$(selector).event(speed,function() { //回调函数代码}),以下例子以第一对函数为例。点击点击隐藏按钮时,会先隐藏div标签,隐藏动作完成后会弹出“已隐藏”提示框;点击显示按钮时,会先显示div标签,显示动作完成后会弹出“已显示”提示框。

<div style="width: 200px;background: pink">hello world</div><br>
<button id="showing">显示</button>
<button id="hiding">隐藏</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
$('#showing').click(function () {
$('div').show('slow',function () {
alert('已显示');
});
})
$('#hiding').click(function () {
$('div').hide('slow',function () {
alert('已隐藏');
});
})
</script>

jQuery事件绑定与常用事件的更多相关文章

  1. js和jQuery中的事件绑定与普通事件

    普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...

  2. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  3. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  4. 13-jQuery事件绑定和常用鼠标事件

    # 关于事件 ## 事件绑定 1.**基本绑定** > $(element).click(function(){})>> $(element).dblclick(function() ...

  5. JQuery - on绑定多个事件

    一.jquery为多个选择器绑定同一个事件 $("#start,#end").on("click",function(){ alert("The pa ...

  6. Jquery同时绑定多个事件

    //JQ 同时绑定多个事件 $("div.div_grren a img").bind({ mouseover:function(){ $(this).attr('src',bor ...

  7. jquery on 绑定多个事件 多个元素

    $('.wrap').on({ click:function(){ //事件1 ...... }, keyup:function() { //事件2 ....... }, keydown:functi ...

  8. JS中事件绑定函数,事件捕获,事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  9. 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象

    1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...

随机推荐

  1. react 简单的用函数调出ui显示

    import test from '../components/test' const info = () => { test.info('This is a normal message'); ...

  2. react使用mobx

    mobx api 使用装饰器语法 mobx数据转化为js数据 安装 yarn add mobx mobx-react yarn add babel-preset-mobx --dev "pr ...

  3. 关于Redis 应用 的一些 感悟

    最近在项目中 使用了 Redis技术

  4. hibernate12--缓存

    <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN&q ...

  5. 微信小程序之点赞和取消点赞

    wxml代码 <image wx:if="{{collection}}" src="/images/boy.png" bindtap="toCo ...

  6. 原生js的remove方法代表删除节点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js设计模式(五)---观察者模式

    概述: 观察者模式也叫 “ 发布-订阅 " 模式 , 发布者发布信息是不需要考虑订阅者是谁?添加订阅者的时候也不需要通知发布者. 应用: 最经典的就是: DOM事件 开发过程中我们常用自定义 ...

  8. Luogu 1071 - 潜伏者 - [字符串]

    题目链接:https://www.luogu.org/problemnew/show/P1071 题解: 模拟就完事儿了. 注意failed的情况有:出现一个 $f[x]$ 对应多个值:存在两个不同的 ...

  9. Linux 从源码编译安装 OpenSSH

    https://blog.csdn.net/bytxl/article/details/46639073 Linux 从源码编译安装 OpenSSH以及各问题解决 2015年06月25日 17:37: ...

  10. 解决Kettle ETL数据乱码

    首先用insert语句插入一条数据试试是否因为MySQL编码不对引起,如果是MySQL原因,修改MySQL编码即可: 如果不是因为MySQL的编码导致问题,那么在Kettle的表输出中,编辑连接-选项 ...