一、事件

事件绑定的方法有两种：

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

方法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. 使用托管快照创建作为 Azure 托管磁盘存储的 VHD 的副本

    创建快照 创建 OS 或数据磁盘 VHD 的快照,以便将其用作备份或用于排查 VM 问题. 快照是 VHD 的完整只读副本. 使用 Azure 门户创建快照 登录到 Azure 门户. 首先在左上角单 ...

  2. 可选的binlog解析组件

    本文的mysql-binlog-connector-java:https://github.com/shyiko/mysql-binlog-connector-java 阿里的canal:https: ...

  3. iptables实战演练

    iptables禁止 ip 10.10.10.1 访问本地80端口: iptables -t filter -I INPUT -s 10.10.10.1 -p tcp –dport 80 -j DRO ...

  4. 1）HDFS分布式文件系统 2）HDFS核心设计 3 ）HDFS体系结构

    一.HDFS简介 1.HDFS:Hadoop distributed file system 一个分布式文件系统 基于流数据模式访问和处理超大文件的需要而开发 适合应用在大规模数据集上 2. 优点 处 ...

  5. [luogu T71973]卡常者π酱

    [luogu T71973]卡常者π酱 题意 给定一个长度为 \(n\) 的字符串, 要求将字符串分割为若干段, 每一段要么是一个字符要么是前面几段的并的子串. 如果某一段是一个单独字符, 则产生 \ ...

  6. C#中单问号(?)和双问号(??)的用法整理

    1.单问号(?) 1.1 表示Nullable类型 C#2.0里面实现了Nullable数据类型 //A.比如下面一句,直接定义int为null是错误的,错误提示为无法将null转化成int,因为后者 ...

  7. 一些安卓模拟器的IP问题和getOutputStream();关于connect();的函数异常的问题

    ip问题 1.不能使用local host 和127.0.0.1作为本地服务器的地址,而网上无论10.0.0.2还是10.0.2.2的8080端口都无法访问.真正的地址应该在CMD 键入ipconfi ...

  8. Python3编写网络爬虫02-基本请求库requests的使用

    一.requests 库使用 需要安装 pip install requests import requests #导入requests库 request = requests.get("h ...

  9. 1.数据结构&算法的引言+时间复杂度

    一.什么是计算机科学? 首先明确的一点就是计算机科学不仅仅是对计算机的研究,虽然计算机在科学发展的过程中发挥了重大的作用,但是它只是一个工具,一个没有灵魂的工具而已.所谓的计算机科学实际上是对问题.解 ...

  10. 把php session 会话保存到redis

    php的session会话默认时以文件形式保存在php.ini配置文件设置的会话缓存目录,文件保存会话的效率很低,每当每个用户登录一次就会在服务器上生成一个唯一的session_id文件,当用户登录量 ...