Jquery简单的事件

l blur(fn) 当失去焦点时
l change(fn) 当内容发生改变时
l click(fn) 当鼠标单击时
l dblclick 当鼠标双击时
l focus(fn) 当获取焦点时
l keydown(fn) 当键盘按下时
l keyup(fn) 当键盘按下并抬起时
l mousedown 鼠标按下触发(按住不放只会触发一次)
l mouseup鼠标按下并抬起时触发
l mouseover(fn) 当鼠标经过时
l mouseout(fn) 当鼠标离开时
l submit(fn) 当表单提交时
    <input type="text" name="name" id="name"/>
<script type="text/javascript" src="Jquery2.1.4.js"></script>
<script type="text/javascript">
$("#name").blur(function(){
alert(1);
});
</script>

上面是当文本框失去焦点时,弹出1;如果将blur换成focus就变成了文本框获得焦点时弹出1。

<select name="city" id="city">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
$("#city").change(function(){
alert(2);
});

上面是当下拉菜单选项被改变时,弹出2,比如说之前选择北京,再次选择北京不会弹出2,但改选为上海时则会弹出2。

<form action="index.php" method="post">
<input type="text" name="name" id="name"/>
<select name="city" id="city">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select> <input type="submit" value="提交"> </form>
$("form").submit(function(){
alert(1);
return false;
});

上面是当form表单中的提交按钮被点击时,弹出1,并且返回false是阻止表单提交的,如果改为true则会提交成功跳转。

JQuery事件绑定

第一种:事件名(function(){})

这个在上面的例子中已经使用过,就是找到对象.事件名(function(){})即可。

$("form").submit(function(){
alert(1);
return false;
});

第二种:通过bind绑定

绑定一个:bind('事件名',function(){})

$("#but4").bind("click",function(){    //找对象.bind("事件",function(){})
alert("点击触发");
})

绑定多个:bind({"事件名":function(){},"事件名":function(){}})

$("#but3").bind({"click":function(){    //找对象.bind({"事件":function(){},"事件":function(){}})

        alert("ok");
},"mouseout":function(){
alert("false");
}})

解绑:unbind()

    //解绑
$("#but5").click(function(){
$("#but4").unbind();
});

第三种:一次性事件 one(‘事件名’,function(){})只触发一次

//一次性事件
$("#but6").one('click',function(){
alert(1);
});

事件切换

hover(function(){},function(){})是专用于实现鼠标经过与鼠标离开的

$("#img").hover(function(){
$("#img").attr('src','submit.jpg');//简单效果
},function(){
$("#img").attr('src','submit.png');
});
toggle(fn1,fn2……):鼠标第一次单击的时候触发第一个fn函数,鼠标第二次单击的时候触发第二个fn函数,如果没有传递参数,默认在显示和隐藏之间进行切换

2019-08-01 JQuery事件的更多相关文章

  1. 【纪中集训】2019.08.01【NOIP提高组】模拟 A 组TJ

    T1 Description 给定一个\(N*N(N≤8)\)的矩阵,每一格有一个0~5的颜色.每次可将左上角的格子所在连通块变为一种颜色,求最少操作数. Solution IDA*=启发式迭代加深 ...

  2. 19 01 16 jquery 的 属性操作 循环 jquery 事件 和事件的绑定 解绑

    jquery属性操作 1.html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').htm ...

  3. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  4. JQuery 事件及案例

    JQuery事件与JavaScript事件相似,只是把其中的on去掉 1.click,dblclick事件 案例1:点击缩略图换背景 <html xmlns="http://www.w ...

  5. jQuery事件-div的显示隐藏及鼠标的移入移出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

  7. JQuery选择器JQuery 事件

    JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  8. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  9. jquery事件核心源码分析

    我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...

  10. 解密jQuery事件核心 - 委托设计(二)

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

随机推荐

  1. 201671030126 赵佳平 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于那个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十四 团队项目评审&课程学习总结 作业学习目标 掌握软件项目评审会流程:反思 ...

  2. springboot2.0整合logback日志(详细)

    <div class="post"> <h1 class="postTitle"> springboot2.0整合logback日志(详 ...

  3. GIL全局解释器锁及协程

    GIL全局解释器锁 1.什么是GIL全局解释器锁 GIL本质是一把互斥锁,相当于执行权限,每个进程内都会存在一把GIL同一进程内的多线程,必须抢到GIL之后才能使用Cpython解释器来执行自己的代码 ...

  4. 付哇刷脸支付系统源码V1.03完整安装包.zip

    付哇刷脸支付系统源码是什么? 1.是一款专业的刷脸+聚合支付平台源码系统: 2.支持对接自己的支付宝和微信官方服务商: 3.基于目前流行的WEB2.0的架构(php+mysql),采用自研DOXCX框 ...

  5. 非vue等框架中html 中使用es6的模块用法小结

    以下是html中使用es6模块化引入的方法 一.html中的引入 <!DOCTYPE html> <html lang="en"> <head> ...

  6. Codeforces Round #606 (Div. 2) D - Let's Play the Words?(贪心+map)

  7. Ubuntu下安装配置SQLSERVER2017

    摘要自微软官网: https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-ubuntu 安装步骤: 1. 导入公共秘 ...

  8. java web开发入门汇总

    servlet 用java语言开发动态资源网站的技术,在doGet方法中拼接显示html,在doPost方法中提交数据.类似于.net的ashx技术. servlet生成的class文件存放在tomc ...

  9. 使用dozer将DTO转化为DO

    DTO,就是Data Transfer Object,数据传输对象,可以简单理解成请求中的对象. PO,就是Persistant Object,持久化对象,它跟持久层(通常是关系型数据库)的数据结构形 ...

  10. 【操作系统之十二】分支预测、CPU亲和性(affinity)

    一.分支预测 当包含流水线技术的处理器处理分支指令时就会遇到一个问题,根据判定条件的真/假的不同,有可能会产生转跳,而这会打断流水线中指令的处理,因为处理器无法确定该指令的下一条指令,直到分支执行完毕 ...