一、事件

事件绑定的方法有两种：

  • 绑定到元素
  • 查找元素后绑定事件

方法1：绑定到元素

<body>

    <p onclick='func1()'>点击我</p>

</body>

<script type="text/javascript">

     function func1(){

	    alert('123');

     }

　　

方法2:查找到元素后绑定事件

<body>

<p>点击我</p>

</body>

<script type="text/javascript">

     $('p').click(function(){

	    alert('123');

    });

</script>

　　

说明：方法2的优点是不用在元素里面进行事件添加，相当于事件和元素分离。

1、浏览器事件

resize（）//只要在浏览器窗口的大小改变时，根据不同的浏览器，该消息被追加到<div id="log">一次或多次。

<body>

<p id='log'>点击我</p>

</body>

<script type="text/javascript">

$(window).resize(function() {

  $('#log').append('<div>Handler for .resize() called.</div>');

});

</script>

　　

2、scroll（）//当用户在元素内执行了滚动操作，就会在这个元素上触发scroll事件。

$('#target').scroll(function() {

 　　 $('#log').append('<div>Handler for .scroll() called.</div>');

});

　　

2、文档加载

当DOM准备就绪时，执行的一个函数。

$( document ).ready(function() {
　　// Handler for .ready() called.
});
等价于
$(function() {
　　// Handler for .ready() called.
});
 
 

3、事件绑定

bind(事件名称，函数）和unbind（‘click’，function(){}）

$('#foo').bind('click', function() {
　　alert('User clicked on "foo."');
});
 
on（）和off（）
<!DOCTYPE html>

<html>

<head>

  <style>

button { margin:5px; }

button#theone { color:red; background:yellow; }

</style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <button id="theone">Does nothing...</button>

<button id="bind">Add Click</button>

<button id="unbind">Remove Click</button>

<div style="display:none;">Click!</div>

<script>
//定义函数aClick，然div显示，并展示慢慢消失效果。

function aClick() {

  $("div").show().fadeOut("slow");

}
//绑定点击函数，针对#theone绑定aClick函数，并把内容改为‘Can Click!’

$("#bind").click(function () {

  $("body").on("click", "#theone", aClick)

    .find("#theone").text("Can Click!");

});
//找到unbind元素并绑定click事件，执行aClick函数,找到#theone元素然后把内容改为‘Does nothing.....’

$("#unbind").click(function () {

  $("body").off("click", "#theone", aClick)

    .find("#theone").text("Does nothing...");

});

</script>

</body>

</html>

　　

4、表单事件

  • .blur() //为 "blur" 事件绑定一个处理函数，或者触发元素上的 "blur" 事件
  • .change()//"change" 事件绑定一个处理函数，或者触发元素上的 "change" 事件。此事件仅限用于<input>元素，<textarea>和<select>元素。
  • .focus()//"focus" 事件绑定一个处理函数，或者触发元素上的 "focus" 事件。此事件起初适用于有限的元素，比如表单元素（<input>, <select>等）和链接元素（<a href>）。
  • .select()//"select" 事件绑定一个处理函数，或者触发元素上的该事件。此事件只能用在<input type="text">和<textarea>。
  • .submit()//"submit" 事件绑定一个处理函数，或者触发元素上的该事件。它只能绑定在<form>元素上。以下几种情况会导致表单被提交：用户点击了<input type="submit">, <input type="image">, 或者 <button type="submit">，或者当某些表单元素获取焦点时，敲击Enter（回车键），都可以提交。

5、键盘事件

  • .keydown()
  • .keypress()
  • .keyup()

6、鼠标事件

    • .click()
    • .contextmenu()
    • .dblclick()
    • .focusin()
    • .focusout()
    • .hover()
    • .mousedown()
    • .mouseenter()
    • .mouseleave()
    • .mousemove()
    • .mouseout()
    • .mouseover()
    • .mouseup()
    • .toggle()

7、事件对象

  • event.currentTarget
  • event.data
  • event.isDefaultPrevented()
  • event.isImmediatePropagationStopped()
  • event.isPropagationStopped()
  • event.namespace
  • event.pageX
  • event.pageY
  • event.preventDefault()
  • event.relatedTarget
  • event.result
  • event.stopImmediatePropagation()
  • event.stopPropagation()
  • event.target
  • event.timeStamp
  • event.type
  • event.which

二、效果

1、基础

  • .hide()//隐藏
  • .show()//显示
  • .toggle()//切换（有就去掉，没有就增加）

2、自定义

  • .animate()
  • .clearQueue()
  • .delay()
  • .dequeue()
  • jQuery.dequeue()
  • .finish()
  • jQuery.fx.interval
  • jQuery.fx.off
  • .queue()
  • jQuery.queue()
  • .stop()

3、渐变

  • .fadeIn()
  • .fadeOut()
  • .fadeTo()
  • .fadeToggle()

4、滑动

  • .slideDown()
  • .slideToggle()
  • .slideUp()

JQuery快速入门-事件与效果的更多相关文章

  1. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  2. JQuery快速入门

    Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替.其是由John ...

  3. jquery快速入门三

    事件 常用事件 click(function(){.......}) #触发或将函数绑定到指定元素的click事件 hover(function(){.....}) 当鼠标指针悬停在上面时触发.... ...

  4. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  5. JQuery 快速入门一篇通

    JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...

  6. jquery快速入门（二）

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...

  7. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  8. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  9. jquery快速入门（一）

    一.jquery加载文档 jquery加载文档(也叫入口函数) $(document).ready(function(){ // 这里写 jQuery 代码... }); 简写方式: $(functi ...

随机推荐

  1. Oracle EBS 用户职责人员取值

    SELECT fu.user_name 用户名, fu.description 用户说明, fu.start_date 用户启用日期, fu.end_date 用户终止日期 --,fu.employe ...

  2. __MySQL 5.7 Replication 相关新功能说明

      背景: MySQL5.7在主从复制上面相对之前版本多了一些新特性,包括多源复制.基于组提交的并行复制.在线修改Replication Filter.GTID增强.半同步复制增强等.因为都是和复制相 ...

  3. Python处理Windows事件日志（json）

    通过NXlog将Windows事件日志保存为json格式文件,然后在Python中使用json.loads()进行处理. NXlog在将Windows事件日志保存为json格式文件,文件中带入了BOM ...

  4. Zabbix 添加主机，获取模板templateID

    添加一个Host Name=Mail CAS_1.1,IP=10.16.3.4的主机,并加入组groupID=30,连接模板templateID=10132. # -*- coding: UTF-8 ...

  5. 2.2Python基础语法（二）之运算符

    返回总目录 目录: 1.Python运算符的分类 2.算数运算符 3.复合运算符 4.比较运算符 5.逻辑运算符 (一)Python运算符的分类: (二)算数运算符: 注意下面三种算数符号: 1.** ...

  6. Hash Tables

    哈希表 红黑树实现的符号表可以保证对数级别的性能,但我们可以做得更好.哈希表实现的符号表提供了新的数据访问方式,插入和搜索操作可以在常数时间内完成(不支持和顺序有关的操作).所以,在很多情况下的简单符 ...

  7. node+koa中转层开发实践总结

    node中转层的意义: 1.能解决前后端代码部署在不同服务器下时的跨域问题.(实现) 2.合并请求,业务逻辑处理.(实现) 3.单页应用的首屏服务端渲染.(暂未实现) 环境准备: node: ^8.1 ...

  8. linux，添加新硬盘的方法

    一.物理机添加一块新的硬盘方法(目的是把后加的磁盘直接加在现有的上面,不用再分区挂载)1.首先要确定现有系统在那块盘上  [root@localhost ~]# df -lhFilesystem    ...

  9. 3.HBase In Action 第一章-HBase简介（1.1.1 大数据你好呀）

    Let's take a closer look at the term Big Data. To be honest, it's become something of a loaded term, ...

  10. BZOJ4340:[BJOI2015]隐身术(后缀数组,ST表,DFS)

    Description 给定两个串A,B.请问B中有多少个非空子串和A的编辑距离不超过K? 所谓“子串”,指的是B中连续的一段.不同位置的内容相同的子串算作多个. 两个串之间的“编辑距离”指的是把一个 ...