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 proxy 报错

    react项目中,package.json中proxy的配置如下 "proxy": { "/api/rjwl": { "target": & ...

  2. IntelliJ IDEA 2018.3.2无法正常输入字符问题解决方案

    昨天升级IDEA的版本到2018.3.2,今天打开项目发现只要在代码编辑器输入字符(英文.符号或中文等)都会立刻被强制删除,造成一个无法正常输入的现象(回车换行可以).仔细观察这种想象后发有可能是代码 ...

  3. win10 安装mysql

    现在mysql压缩包:https://downloads.mysql.com/archives/community/ 在目录下新建data文件夹,my.ini文件,内容如下: [mysqld] bas ...

  4. tomcat启动出错 invalid LOC header

    tomcat启动出错 invalid LOC header,run as maven test 没有报错,只有警告: 'build.plugins.plugin.version' for org.ap ...

  5. rabbitmq - java client lib一二事

    由于不可抗因素, 需要给对接方撸一个client的demo.基于比较老的jdk. 所幸找到了这里:http://www.rabbitmq.com/releases/rabbitmq-java-clie ...

  6. eclipse中的快捷键的使用

  7. HTML、CSS知识点,面试开发都会需要--No.2 CSS

    No.2  CSS 1.选择器类型 选择器类型包括:type.class.id. 2.引用外部css文件 使用link元素,添加rel和href属性:<link rel="styles ...

  8. 51nod 1805 小树 (组合数模板,逆元公式)

    题意:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1805 题解: 根据cayley公式,无向图的每一个生成树就对应一个 ...

  9. DATEADD日期函数的使用

    在当前日期加上几天:https://www.cnblogs.com/shitaotao/p/7648198.html 计算本月的第一天:https://www.cnblogs.com/lcyuhe/p ...

  10. Codeforces 1090D - Similar Arrays - [思维题][构造题][2018-2019 Russia Open High School Programming Contest Problem D]

    题目链接:https://codeforces.com/contest/1090/problem/D Vasya had an array of n integers, each element of ...